游戏如何分享到Facebook点击链接启动游戏

文章目录

1 需求描述
2 系统分享
- 2.1 Html关键代码
- 2.2 JavaScript脚本关键代码
- 2.3 界面效果
3 FaceBook分享
- 3.1 多语言配置
- 3.2 后台关键代码
- 3.3 参数约定
- 3.4 数据落地
- 3.5 测试地址
- 3.6 分享效果
4 如何跳转APP内

1 需求描述

A用户分享游戏链接给B用户，B用户如果已经下载该游戏则唤醒app,没有则会根据不同的机型跳到不同的商店如安卓进入安卓应用商店，ios进入app store 。因为浏览器和app没有通信协议，所以h5不知道用户的手机释放安装了app，只能是h5去尝试唤起app，若不能唤起，引导用户去下载我们的app。具体需求如下：

系统分享页面加载完后直接跳转到下载链接。
UGC相关分享先试图打开游戏跳转到对应的关卡但是用户不一定安装游戏，所以接下来跳转下载链接。
统计PV和Click事件。

2 系统分享

系统分享页面加载完后直接跳转相应的下载链接。

2.1 Html关键代码

<!DOCTYPE html>
<html>
<head><title>Bricks Ball Crusher</title><meta name='description' content='Bricks Ball Crusher'/><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/><meta name='viewport'content='width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1'/><meta property='og:locale' content='en_US'/><meta property='og:type' content='website'/><meta property='og:image' content='img/edit.png'/><meta property='og:image:type' content='image/jpeg'/><meta property='og:url' content='/'/><meta property='og:site_name' content='Bricks Ball Crusher'/><meta property='fb:app_id' content=''/><meta property='og:title' content="I've created an interesting level.Come and have a try."/><meta property='og:description' content="Try the level I created."/><script src='js/jquery.min.js'></script><link rel='stylesheet' href='css/bootstrap.min.css'><style>* {margin: 0;padding: 0;font-family: '微软雅黑'}body {background: url(img/bg.png);background-size: cover;background-attachment: fixed;}</style>
</head>
<body>
<div class='container'><!--标题 开始 --><div class='row'><img src='img/title.png' class='img-responsive center-block'/></div><!--标题 开始 --><!--主宣传图 开始 --><div class='row' style='margin-top: -110px'><img src='img/main.png' class='img-responsive center-block'/></div><!--主宣传图 开始 --><!--副标题 开始 --><div class='row' style='margin: 30px 30px 10px 10px'><img src='img/subtitle.png' class='img-responsive center-block'></div><!--副标题 开始 --><!--下载按钮 开始 --><table class='table table-no-bordered' style='border:0px;'><tr><td style='border:0px'><img src='img/goole.png' class='img-responsive center-block download '></td><td style='border:0px'><img src='img/appstore.png' class='img-responsive center-block download ' style='padding-left:10px'></td></tr></table><!--下载按钮 结束 -->
</div>
</body>
</html>

2.2 JavaScript脚本关键代码

<script type='text/javascript'>function openApp(which, arg) {//此处以打开淘宝为例jumpApp('taobao://');noApp();}function jumpApp(t) {window.location.href = t;}var timer = null;function noApp() {var t = Date.now(),timer = setTimeout(function() {return Date.now() - t > 2200? (clearTimeout(timer), !1): !document.webkitHidden && !document.hidden && void (location.href = "下载链接");}, 2000);}$('.download').click(function () {//向后台发送请求$.get('http://ip:port/share/click?type=find');noApp();});  noApp();
</script>

2.3 界面效果

3 FaceBook分享

Facebook分享需要按照他们的要求填写一些Meta信息具体如下：

<meta property='og:site_name' content='Bricks Ball Crusher' />
<meta property='fb:app_id' content='' />
<meta property='og:title' content="I've created an interesting level.Come and have a try." />
<meta property='og:description' content="Try the level I created." />
<meta property='og:url' content='/' />
<meta property='og:image' content='' />
<meta property='og:image:type' content='image/jpeg' />
<meta property='og:locale' content='en_US' />
<meta property='og:type' content='website' />

不同场景下：图片不同则需要修改og:image的值；标题不同需要修改og:title的值；描述不同需要修改og:description的值。

3.1 多语言配置

游戏中语言肯定不止一种，玩家分享时需要根据系统语言获取相应的分享内容。

## 英文结果页分享
en_invite_title=Come and play bricks in the Bricks Ball Crusher with me！
en_invite_description=Come and play bricks in the Bricks Ball Crusher with me！
en_invite_img_url=img/invite.png
## 英文UGC创造分享
en_edit_title=I've created an interesting level.Come and have a try.
en_edit_description =Try the level I created.
en_edit_img_url=img/edit.png
## 英文UGC分享别人关卡
en_find_title=Let's try this interesting level together.
en_find_description =Click here to join us
en_find_img_url=img/find.png
## 中文结果页分享
zh_cn_invite_title=全民消砖块
zh_cn_invite_description=快来和我一起在全民消砖块里一起打砖块吧
zh_cn_invite_img_url=img/invite.png
## 中文UGC创造分享
zh_cn_edit_title=和我一起体验创造关卡的乐趣
zh_cn_edit_description =我在全民消砖块创建了一个有趣的关卡，快来试试吧
zh_cn_edit_img_url=img/edit.png
## 中文UGC分享别人关卡
zh_cn_find_title=这是一个有趣的关卡
zh_cn_find_description =我在全民消砖块发现了一个有趣的关卡，快来和我一起挑战一下吧
zh_cn_find_img_url=img/find.png
## 中文繁体结果页分享
zh_tw_invite_title=全民消磚塊
zh_tw_invite_description=快來和我一起在全民消磚塊裏一起打磚塊吧
zh_tw_invite_img_url=img/invite.png
## 中文繁体UGC创造分享
zh_tw_edit_title=和我一起體驗創造關卡的樂趣
zh_tw_edit_description =我在全民消磚塊創建了一個有趣的關卡，快來試試吧
zh_tw_edit_img_url=img/invite.png
## 中文繁体UGC分享别人关卡
zh_tw_find_title=這是一個有趣的關卡
zh_tw_find_description =我在全民消磚塊發現了一個有趣的關卡，快來和我一起挑戰一下吧
zh_tw_find_img_url=img/find.png
## 日文结果页分享
jp_invite_title=是非、レンガボール粉砕機で私と一緒にレンガをプレイ！
jp_invite_description=是非、レンガボール粉砕機で私と一緒にレンガをプレイ！
jp_invite_img_url=img/invite.png
## 日文UGC创造分享
jp_edit_title=私は面白いを作成しました来てください試してみてください。
jp_edit_description =私が作成したレベルをお試しください。
jp_edit_img_url=img/edit.png
## 日文UGC分享别人关卡
jp_find_title=一緒にこの面白いレベルを試してみましょう。
jp_find_description=ここをクリック
jp_find_img_url=img/find.png
## 俄文结果页分享
ru_invite_title=Давай поиграем со мной в кирпичную дробилку
ru_invite_description=Давай поиграем со мной в кирпичную дробилку
ru_invite_img_url=img/invite.png
## 俄文UGC创造分享
ru_edit_title=Я создал веселье.уровень, давайПопробуй.
ru_edit_description =попробуйте создать заставу.
ru_edit_img_url=img/edit.png
## 俄文UGC分享别人关卡
ru_find_title=Давайте попробуем этот интересный пункт.
ru_find_description =Нажмите здесь чтобы добавить нас
ru_find_img_url=img/find.png
## 韩文结果页分享
kr_invite_title=나 랑 같이 벽돌공 파 쇄 기 하 자.
kr_invite_description=나 랑 같이 벽돌공 파 쇄 기 하 자.
kr_invite_img_url=img/invite.png
## 韩文UGC创造分享
kr_edit_title=제 가 재 밌 는 걸 만 들 었 어 요.수준.해 봐.
kr_edit_description =내 가 세운 관문 을 시험 해 봐.
kr_edit_img_url=https:img/edit.png
## 韩文UGC分享别人关卡
kr_find_title=우리 함께 이 재 미 있 는 관문 을 시험 해 봅 시다.
kr_find_description =여기에 가입 하려 면 누 르 십시오
kr_find_img_url=img/find.png

3.2 后台关键代码

该功能为根据不同的分享内容，动态的修改og:image、og:title、og:description的值；当type为invite时访问该链接页面加载完后跳转下载地址，否则先试图启动游戏再跳转到下载地址；统计PV和click事件。

import com.pusidun.common.utils.DateUtils;
import com.pusidun.common.utils.IPUtils;
import com.pusidun.common.utils.StringUtils;
import com.pusidun.modules.generator.entity.ShareEntity;
import com.pusidun.modules.generator.service.ShareService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.env.Environment;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Date;
@RestController
public class ShareController {@Autowiredprivate Environment env; //读取环境变量@Autowiredprivate ShareService shareService;/*** 分享功能* @param  type 三种分享类型分别为： invite edit find* @param  hl 六种语言分别为：en zh_cn zh_tw jp ru kr* @param  id  当type=create或者find时，该参数必传* @param  res 响应*/@RequestMapping(value = "/share/{type}",  produces={"application/json; charset=UTF-8"})public void sharePage( HttpServletRequest request, HttpServletResponse res,@PathVariable String type, @RequestParam String hl,String id) throws UnsupportedEncodingException{saveShareData(request,"show",type);//数据上报if(StringUtils.isEmpty(type))   type="invite";if(StringUtils.isEmpty(hl)) hl="en";String urlSchema = "taobao://";if(StringUtils.isNotEmpty(id))  urlSchema = "bxb://level="+id;String titleKey=  hl+"_"+type+"_title";String descriptionKey= hl+"_"+type+"_description";String imgUrlKey = hl+"_"+type+"_img_url";String title=  new String(env.getProperty(titleKey.toLowerCase()).getBytes("ISO8859-1"),"UTF-8");String description= new String(env.getProperty(descriptionKey.toLowerCase()).getBytes("ISO8859-1"),"UTF-8");String img_url = new String(env.getProperty(imgUrlKey.toLowerCase()).getBytes("ISO8859-1"),"UTF-8");try {res.setContentType("text/html; charset=UTF-8");//注意text/html，和application/htmlString html ="<!DOCTYPE html>\n" +"<html>\n" +"<head>\n" +"<title>Bricks Ball Crusher</title>\n" +"<meta name='description' content='Bricks Ball Crusher' />\n" +"<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />\n" +"<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1' />\n" +"<meta property='og:locale' content='en_US' />\n" +"<meta property='og:type' content='website' />\n" +"<meta property='og:image' content='"+img_url+"' />\n" +"<meta property='og:image:type' content='image/jpeg' />\n" +"<meta property='og:url' content='/' />\n" +"<meta property='og:site_name' content='Bricks Ball Crusher' />\n" +"<meta property='fb:app_id' content='' />\n" +"<meta property='og:title' content=\""+title+"\" />\n" +"<meta property='og:description' content=\""+description+"\" />\n" +"<script src='js/jquery.min.js'></script>\n" +"<link rel='stylesheet' href='css/bootstrap.min.css'>\n" +"<style>\n" +"* {margin:0; padding:0;font-family:'微软雅黑'}\n" +"body {background:url(img/bg.png); background-size:cover; background-attachment: fixed;}\n" +"</style>\n" +"</head>\n" +"<body >\n" +"<div class='container' >\n" +"<!--标题 开始 -->\n" +"<div class='row' >\n" +"<img src='img/title.png'  class='img-responsive center-block' />\n" +"</div>\n" +"<!--标题 开始 -->\n" +"<!--主宣传图 开始 -->\n" +"<div class='row' style='margin-top: -110px'>\n" +"<img src='img/main.png'  class='img-responsive center-block' />\n" +"</div>\n" +"<!--主宣传图 开始 -->\n" +"<!--副标题 开始 -->\n" +"<div class='row' style='margin: 30px 30px 10px 10px'>\n" +"<img src='img/subtitle.png' class='img-responsive center-block'>\n" +"</div>\n" +"<!--副标题 开始 -->\n" +"<!--下载按钮 开始 -->\n" +"<table   class='table table-no-bordered' style='border:0px;' >\n" +"<tr>\n" +"<td style='border:0px' ><img src='img/goole.png'    class='img-responsive center-block download ' ></td>\n" +"<td style='border:0px' ><img src='img/appstore.png' class='img-responsive center-block download ' style='padding-left:10px'></td>\n" +"</tr>\n" +"</table>\n" +"<!--下载按钮 结束 -->\n" +"</div>\n" +"<script type='text/javascript'>\n" +"function openApp(which, arg) {\n" +"    jumpApp('"+urlSchema+"');\n" +"    noApp();\n" +"}\n" +"function jumpApp(t) {\n" +"  window.location.href = t;\n" +"}\n" +"var timer = null;\n" +"function noApp() {\n" +"  var t = Date.now(),\n" +"  timer = setTimeout(function() {\n" +"    return Date.now() - t > 2200\n" +"      ? (clearTimeout(timer), !1)\n" +"      : !document.webkitHidden && !document.hidden && void (location.href = '下载地址');\n" +"  }, 2000);\n" +"}\n" +"$('.download').click(function () {\n" +"//向后台发送请求\n" +"$.get('http://ip:port/share/click?type="+type+"');\n" +"noApp();\n" +"}); ";if("invite".equals(type)){html += " noApp();</script> </body> </html>";}else {html += " openApp();</script> </body> </html>";}res.getWriter().print(html);res.getWriter().close();} catch (IOException e) {e.printStackTrace();}}/*** 分享点击按钮* @param request 请求*/@RequestMapping(value = "share/click",  produces={"application/json; charset=UTF-8"})public void shareClick(HttpServletRequest request,String type){saveShareData(request,"click",type);}/*** 写入数据库* @param request 请求* @param eventName 事件名*/private void saveShareData(HttpServletRequest request,String eventName,String uri){ShareEntity entity = new ShareEntity();entity.setIp(IPUtils.getIpAddr(request));entity.setEventName(eventName);entity.setSessionId(request.getRequestedSessionId());entity.setTime(DateUtils.format(new Date(),DateUtils.DATE_TIME_PATTERN));entity.setUri(uri);shareService.save(entity);}
}

3.3 参数约定

参数约定
type: invite edit find
hl:系统语言，统一小写 en zh_cn zh_tw jp ru kr
id：关卡id

3.4 数据落地

3.5 测试地址

https://developers.facebook.com/tools/debug

3.6 分享效果

4 如何跳转APP内

URL Scheme就是一个可以让app相互之间可以跳转的对外接口。通过给APP定义一个唯一的URL路径来从外部快速的打开这个指定的APP，每个app的URL Scheme都是不一样的，如果存在一样的URL Scheme，那么系统就会响应先安装那个app的URL Scheme，因为后安装的app的URL Scheme被覆盖掉了，是不能被调用的。URL scheme的格式是 :

[scheme] ://[host]/[path]?[query]

介绍几个常用的URL Scheme平台：

QQ： mqq://
微信： weixin://
腾讯微博： TencentWeibo://
淘宝： taobao://
支付宝： alipay://
微博： sinaweibo://