facebook App links 接入

    xiaoxiao2022-07-13  159

    背景:游戏产品需要接入facebook分享,这就要使用到facebook的App links功能,查看官方网站,遇到了一些坑,发现国内很少有人有这方面的介绍,记录下来供后来人使用。

     

    首先了解一下:facebook的App links与Deep links不是一个东东,

    Deep Link 是facebook专门为广告提供的

    参考:https://developers.facebook.com/docs/app-ads/deep-linking/

    而App links是我们想在facebook上,分享我们自己的应用,别人点击的时候,如果已经安装跳转到指定页面,没有安装则到下载页面,下面进入正题:

    1.App links 分为两个部分:

            1)当已经安装的时候,我们需要让facebook识别我们的scheme,跳转到我们指定的页面。这个配置就让android和ios都支持了,

    <html> <head> <meta property="al:ios:url" content="applinks://docs" /> //ios的scheme地址,在plist中配置 <meta property="al:ios:app_store_id" content="12345" /> //ios的应用商店id <meta property="al:ios:app_name" content="App Links" /> //ios应用名字 <meta property="al:android:url" content="applinks://docs" /> //android的scheme地址 <meta property="al:android:app_name" content="App Links" /> //android应用名字 <meta property="al:android:package" content="org.applinks" /> 应用包名 <meta property="al:web:url" content="http://applinks.org/documentation" /> //web端的,我直接干掉了 </head> <body> Hello, world! //这个不需要,我们想直接跳转 </body> </html>

    对于android我们需要在一个activity中配置scheme让facebook能找到我们

    <activity android:name=".MainActivity" android:label="@string/app_name" > ... <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <data android:scheme="sharesample" /> </intent-filter> </activity>

    ios则需要在plist中配置:

    applinks://docs?al_applink_data={"user_agent":"Bolts iOS 1.0.0","target_url":"http:\/\/example.com\/applinks","extras":{"myapp_token":"t0kEn"}}

    参考:https://developers.facebook.com/docs/applinks/metadata-reference/ 2)当应用没有安装的时候,我们需要跳转到应用商店,一种比较好的用户体验就是直接配置refresh,这个的含义就是自动跳转到一个员工商店。

    <html> <head> <meta property="al:ios:url" content="applinks://docs" /> //ios的scheme地址,在plist中配置 <meta property="al:ios:app_store_id" content="12345" /> //ios的应用商店id <meta property="al:ios:app_name" content="App Links" /> //ios应用名字 <meta property="al:android:url" content="applinks://docs" /> //android的scheme地址 <meta property="al:android:app_name" content="App Links" /> //android应用名字 <meta property="al:android:package" content="org.applinks" /> 应用包名 <meta http-equiv="refresh" content="0;url=https://play.google.com/store/apps/details?id=com.machsystem.amrsh"> <meta property="al:web:url" content="http://applinks.org/documentation" /> //web端的,我直接干掉了 </head> <body> Hello, world! //这个不需要,我们想直接跳转 </body> </html> 这种体验很好,当有应用的时候,跳转到指定页面,没有的时候,直接跳转到应用商店,但是问题出现了,android和ios对应两个应用商店,这里只能配置一个,一开始打算通过js判断android和ios来修改refresh的content,但是这种方案不生效。

    前端并不是我的专长,所以我想到了折中方案,就是修改location进行二次跳转。

    <script> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 var refer = getQueryVariable("referrer"); if(isAndroid){ location.href='https://play.google.com/store/apps/details?id=com.machsystem.amrsh' } else { location.href='https://itunes.apple.com/cn/app/amo-rush/id1454089647?l=zh&ls=1&mt=8' } </script>

    这样就实现了我们的需求。

     

    接下来就是丰富完善的过程了,

    例如:我们需要定制我们分享的内容:(下面这几个配置是让facebook显示我们的指定样式,不至于只显示一个url)

    <meta property="og:type" content="article" /> 类型 <meta property="og:title" content="Amo jump" /> 显示的名字 <meta property="og:description" content="Amo jump 游戏更精彩" /> 显示的描述 <meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />显示的图片

    下面我们还想将一些信息传给应用市场,这样就可以知道用户之间的推荐关系了,

     

    所以最终的app links配置如下:

    <html prefix="og: http://ogp.me/ns#"> <head> <title>gamecenter</title> <meta property="og:type" content="article" /> <meta property="og:title" content="Amo jump" /> <meta property="og:description" content="Amo jump 游戏更精彩" /> <meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" /> <meta property="al:android:url" content="machbird://story/1234"> <meta property="al:android:package" content="com.sdfh.min"> <meta property="al:android:app_name" content="gomining"> <meta property="al:ios:url" content="machbird://applinks" /> <meta property="al:ios:app_store_id" content="1454089647" /> <meta property="al:ios:app_name" content="Amo rush" /> <script> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 var refer = getQueryVariable("referrer"); if(isAndroid){ location.href='https://play.google.com/store/apps/details?id=com.machsystem.amrsh&referrer='+refer } else { location.href='https://itunes.apple.com/cn/app/amo-rush/id1454089647?l=zh&ls=1&mt=8&referrer='+refer } function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } </script> </head> </html>

     

    最新回复(0)