Vmo8 Wiki

Vmo8 用户的地盘, C2/C3开发者的乐园

用户工具

站点工具


fb账号-设置-登录-分享

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
fb账号-设置-登录-分享 [2020/07/15 11:08]
216.244.66.228 已恢复为旧版 (2017/12/22 08:29)
fb账号-设置-登录-分享 [2020/07/15 12:44] (当前版本)
Aven 已恢复为旧版 (2017/12/22 08:46)
行 1: 行 1:
 ==== FB账号-设置-登录-头像合成-分享 ==== ==== FB账号-设置-登录-头像合成-分享 ====
 +<WRAP center round tip 60%>
 +**必要前提:**
 +  - 你自己得能FanWall,否则就啥都别说了…… 
 +  - 如果需要后面的高级功能,你需要一台位于Wall外的动态服务器,否则也是啥都别说了
 +  - 你的页面存放地址必须是https访问,否则也是不行的…… 
 +</WRAP>
  
-  - 前提是,你能翻墙,否则就啥都别说了…… 并且,如果需要后面的高级功能,你的服务器也要能翻墙,否则也是啥都别说了…… 顺便说,你的页面存放地址必须是https访问,否则也是不行的……  
   - 首先设置账号 到[[https://developers.facebook.com/]]开通开发者,我的应用/添加新应用 起个名字,留个邮箱   - 首先设置账号 到[[https://developers.facebook.com/]]开通开发者,我的应用/添加新应用 起个名字,留个邮箱
   - 因为要使用FB登录,所以添加产品的时候,添加一个Facebook登录就行,快速入门不用管,目前这里什么都不用设置   - 因为要使用FB登录,所以添加产品的时候,添加一个Facebook登录就行,快速入门不用管,目前这里什么都不用设置
   - 现在打开控制面板,看到应用编号和应用密钥,点一下显示应用密钥,输入登录密码,获得密钥,把这两个串存好,平台部分暂时先这样,接下来转到C2   - 现在打开控制面板,看到应用编号和应用密钥,点一下显示应用密钥,输入登录密码,获得密钥,把这两个串存好,平台部分暂时先这样,接下来转到C2
   - 在C2中添加Facebook插件,Browser插件,在FB插件的属性栏中,填写刚才保存下来的编号和密钥   - 在C2中添加Facebook插件,Browser插件,在FB插件的属性栏中,填写刚才保存下来的编号和密钥
-  - 接下来是FB登录的部分,首先需要<wrap hi>在某个点击事件下</wrap>增加“Facebook-Log in”事件,<wrap hi>注意,一定要在点击事件下Login,否则无法在移动端调起FB的Login页(会被移动端浏览器阻止)</wrap>,<wrap hi>需要的权限为"email,public_profile,user_friends"</wrap>,如果你不需要在页面内静默分享Post,则不需要“publish_actions”权限 +  - 接下来是FB登录的部分,首先需要<wrap hi>在某个点击事件下</wrap>增加“Facebook-Log in”事件,注意,<wrap em>一定要在点击事件下Login</wrap><wrap hi>否则无法在移动端调起FB的Login页(会被移动端浏览器阻止)</wrap>,<wrap hi>需要的权限为"email,public_profile,user_friends"</wrap>,如果你不需要在页面内静默分享Post,则不需要“publish_actions”权限 
-  - 接下来要判断登录是否完成,添加Facebook-is user logged in事件,在不需要服务器端翻墙的情况下,可以取到UserIDStr,这个与之后取FB头像有关(<wrap hi>FB的头像保存位置在"http://graph.facebook.com/**你的UserIdStr**/picture?type=large"</wrap>),而FullName之类的属性,需要服务端在外才能取到<wrap hi>(事实上为了方便,建议在点击事件时做一些判定,如果判断到FB is user logged in,则直接跳游戏Layout,否则就先登录再去游戏)</wrap>+  - 接下来要判断登录是否完成,添加Facebook-is user logged in事件,在不需要服务器端FanWall的情况下,可以取到UserIDStr,这个与之后取FB头像有关(<wrap hi>FB的头像保存位置在"http://graph.facebook.com/**你的UserIdStr**/picture?type=large"</wrap>),而FullName之类的属性,需要服务端在Wall外才能取到<wrap hi>(事实上为了方便,建议在点击事件时做一些判定,如果判断到FB is user logged in,则直接跳游戏Layout,否则就先登录再去游戏)</wrap>
   - 游戏内的部分就不说了,注意自己保存好分数,如果要分享分数的话   - 游戏内的部分就不说了,注意自己保存好分数,如果要分享分数的话
-  - 游戏结束后,分数产生,这时候就可以用玩家的FB头像来合成分享时显示的图片了<wrap hi>(客户表示目前FB上这种带有用户头像的分享模式,最受用户欢迎)</wrap>。用AJAX去调取一个!!在外!!的动态服务器,把UserIdStr和得分传给后端php什么的,用GD库或者Imagick库做头像合成,并声称分享页面,注意事项如下:+  - 游戏结束后,分数产生,这时候就可以用玩家的FB头像来合成分享时显示的图片了<wrap hi>(客户表示目前FB上这种带有用户头像的分享模式,最受用户欢迎)</wrap>。用AJAX去调取一个!!在Wall外!!的动态服务器,把UserIdStr和得分传给后端php什么的,用GD库或者Imagick库做头像合成(网上教程很多,这里不赘述了),并生成分享页面,注意事项如下:
     - 图像合成的时候,建议分辨率为482×275,建议将玩家头像经过缩放合成到图片正中心(分享到移动端时图片会被画框裁剪,裁剪时会居中对齐)     - 图像合成的时候,建议分辨率为482×275,建议将玩家头像经过缩放合成到图片正中心(分享到移动端时图片会被画框裁剪,裁剪时会居中对齐)
     - FB创建分享图的机制是这样的,它会抓取被分享的页面,并读取页面上<meta>标签,获取og对象信息,拼合成一个分享的信息,因此,为了让每个玩家分享的页面都带有自己的信息,需要为每个玩家生成自己的独立页面,例如用户id.html,再配以合成后的用户id.png(Twitter也是采用同样的方式)然后把这个页面跳转到你的游戏页面,html的格式为<code><!DOCTYPE html>     - FB创建分享图的机制是这样的,它会抓取被分享的页面,并读取页面上<meta>标签,获取og对象信息,拼合成一个分享的信息,因此,为了让每个玩家分享的页面都带有自己的信息,需要为每个玩家生成自己的独立页面,例如用户id.html,再配以合成后的用户id.png(Twitter也是采用同样的方式)然后把这个页面跳转到你的游戏页面,html的格式为<code><!DOCTYPE html>
行 30: 行 35:
     - 这里略有小坑的是,需要判断一下是否在FB客户端自己的浏览器中,如果判定find(Browser.UserAgent,"FBA")>-1,则在FB客户端内,需要采用Browser Goto URL的方式或者Facebook Prompt to share的方式,而如果不在,则可以用Browser open url in new window的方式打开分享链接     - 这里略有小坑的是,需要判断一下是否在FB客户端自己的浏览器中,如果判定find(Browser.UserAgent,"FBA")>-1,则在FB客户端内,需要采用Browser Goto URL的方式或者Facebook Prompt to share的方式,而如果不在,则可以用Browser open url in new window的方式打开分享链接
     - 另外为了给只是打开页面没有玩游戏的用户一个默认分享页面,建议在C2打包生成后的页面中,也增加前面那些meta标签,og:image指定一张默认的分享图像     - 另外为了给只是打开页面没有玩游戏的用户一个默认分享页面,建议在C2打包生成后的页面中,也增加前面那些meta标签,og:image指定一张默认的分享图像
-  - 接下来,就可以将页面发布到服务器查看效果了,这时候需要又回到FB开发者页面去,到设置页,首先添加平台,增加一个<wrap hi>!!网页!!</wrap>平台,将你的地址填进去,注意,地址必须以/或者?参数结尾,也就是说,如果你的地址在OSS中,必须带上index.html才能访问,则需要在后面随便加个参数比如?a=1+  - 接下来,就可以将页面发布到服务器查看效果了,这时候需要又回到FB开发者页面去,到设置页,首先添加平台,增加一个<wrap em>!!网页!!平台</wrap>,将你的地址填进去,注意,地址必须以/或者?参数结尾,也就是说,如果你的地址在OSS中,必须带上index.html才能访问,则需要在后面随便加个参数比如?a=1
   - 然后,把你的域名填到上面的应用域名中,取一个名称空间名字填入,再准备一个1024*1024的巨大尺寸的图标,上传到图标处,在往上找一个隐私权政策文档和服务条款文档做成网页(比如本站这种:[[网站服务条款]],[[隐私权政策]]),地址填到相应位置,右下角保存修改   - 然后,把你的域名填到上面的应用域名中,取一个名称空间名字填入,再准备一个1024*1024的巨大尺寸的图标,上传到图标处,在往上找一个隐私权政策文档和服务条款文档做成网页(比如本站这种:[[网站服务条款]],[[隐私权政策]]),地址填到相应位置,右下角保存修改
   - 为了方便测试,可以到用户身份设置中,增加一些好友作为你的测试者,或者到测试用户页面,增加一些临时测试者账号,这样就可以自己测试了   - 为了方便测试,可以到用户身份设置中,增加一些好友作为你的测试者,或者到测试用户页面,增加一些临时测试者账号,这样就可以自己测试了
行 36: 行 41:
   - 这里又有一个小坑是……这个页面缩略图一旦生成,是不会主动刷新的,也就是说,你之前玩了20分,生成了一次缩略图,接下来玩了30分,想再生成一份,抱歉……人家还是20分……解决方案是,每次生成的页面文件名带上时间戳,也就是说每次生成的页面和图片都不同,但这样的话,对服务器来说,很废………… 另一个方法是,到我们刚才的调试页面,主动刷新缩略图   - 这里又有一个小坑是……这个页面缩略图一旦生成,是不会主动刷新的,也就是说,你之前玩了20分,生成了一次缩略图,接下来玩了30分,想再生成一份,抱歉……人家还是20分……解决方案是,每次生成的页面文件名带上时间戳,也就是说每次生成的页面和图片都不同,但这样的话,对服务器来说,很废………… 另一个方法是,到我们刚才的调试页面,主动刷新缩略图
   - 一切测试好之后,到开发者页面,应用审核那里,点对外公开,页面就可以被所有人访问了   - 一切测试好之后,到开发者页面,应用审核那里,点对外公开,页面就可以被所有人访问了
 +  - 注意,不要做多余的事,如果你之前添加平台的时候高逼格的选择了“游戏”,你就一定需要选一些其他权限去审核…… 审核的方法很有趣,除了要确认一步步的条款外,多半需要你拍摄视频说明操作步骤和效果……科科
  
 以上。。 以上。。
fb账号-设置-登录-分享.txt · 最后更改: 2020/07/15 12:44 由 Aven