facebook App links 接入

最新推荐文章于 2024-05-16 03:29:34 发布

固执的毛毛虫

最新推荐文章于 2024-05-16 03:29:34 发布

阅读量9.9k

点赞数

分类专栏： Android 疑难杂症

本文链接：https://blog.csdn.net/u010479969/article/details/90486576

版权

Android 疑难杂症专栏收录该内容

2 篇文章 1 订阅

订阅专栏

背景：游戏产品需要接入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=%7B%22user_agent%22%3A%22Bolts%20iOS%201.0.0%22%2C%22target_url%22%3A%22http%3A%5C%2F%5C%2Fexample.com%5C%2Fapplinks%22%2C%22extras%22%3A%7B%22myapp_token%22%3A%22t0kEn%22%7D%7D

参考：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>