Question

我想在我的网站上创建一个按钮，允许用户打开本机Facebook应用程序（如果已安装），否则打开Facebook网站。据我所知，我必须为此创建单独的html页面。

我尝试了facebook托管应用程序链接，以获得有用的App Links示例。以下代码由facebook生成，可以通过此url访问。

我尝试使用iOS（Safari，Chrome），Android（默认浏览器，Chrome）打开此链接。尽管我在两台设备上都安装了facebook app，但我被重定向到了facebook网站。

为什么会这样？我如何让它打开本机应用程序？

<html>
    <head>
        <title>App Link</title>
        <meta property="fb:app_id" content="505860159524932" />
        <meta property="al:ios:url" content="fb://profile/838619192839881" />
        <meta property="al:ios:app_name" content="Facebook" />
        <meta property="al:ios:app_store_id" content="284882215" />
        <meta property="al:android:package" content="com.facebook.katana" />
        <meta property="al:android:app_name" content="Facebook" />
        <meta property="al:android:url" content="fb://page/838619192839881" />
        <meta property="al:web:should_fallback" content="false" />
        <meta property="al:web:url" content="https://www.facebook.com/warpcompany" />
        <meta http-equiv="refresh" content="0;url=https://www.facebook.com/warpcompany" />
    </head>
    <body>Redirecting...</body>
</html>

Answer 1

AppLinks是一种只有Facebook原生支持的协议。这意味着只有适用于Android和iOS的Facebook原生应用才能正确解析元标记并采取措施。所有其他浏览器和平台都忽略它们。

为了在其他浏览器中正确处理链接，除了AppLink之外，还使用客户端JS重定向代码来支持其他浏览器中的重定向。如果您不想全力以赴，我构建了一个名为branch.io的免费工具，它将托管您与此客户端JS的链接，并自动配置您的AppLink。

如果您自己构建它，可以使用以下用于iOS Safari的代码：

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("l").src = "fb://page/838619192839881";

        setTimeout(function() {
            window.location = "itms-apps://itunes.apple.com/app/id284882215";
        }, 750);
    };
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>

对于Android，您可以使用此客户端JS代码段：

<script type="text/javascript">
    window.onload = function() {
        var method = 'iframe';
        var fallbackFunction = function() {
            if (method == 'iframe') {
                window.location = "market://details?id=com.facebook.katana";
            }
        };
        var addIFrame = function() {
            var iframe = document.createElement("iframe");
            iframe.style.border = "none";
            iframe.style.width = "1px";
            iframe.style.height = "1px";
            iframe.src = "fb://page/838619192839881";
            document.body.appendChild(iframe);
        };
        var loadChromeIntent = function() {
            method = 'intent';
            document.location = "intent://page/838619192839881#Intent;scheme=fb;package=com.facebook.katana;end";
        };
        if (navigator.userAgent.match(/Chrome/) && !navigator.userAgent.match("Version/")) {
            loadChromeIntent();
        }
        else if (navigator.userAgent.match(/Firefox/)) {
            window.location = "fb://page/838619192839881";
        }
        else {
            addIFrame();
        }
        setTimeout(fallbackFunction, 750);
    };
</script>

Answer 2

the Facebook Doc说

App Links是一种开放标准，可以深入链接到您应用中的内容。当有人使用您的应用程序通过Facebook（或其他支持应用程序链接的应用程序）共享内容时，您可以创建一个链接，以便从该内容中跳回您的应用程序。

所以我想@Ming Li说，它不支持Safari和Chrome。

您可以在时间轴上尝试，并使用Facebook应用程序打开它。

为什么facebook生成的深层链接（applink）不起作用？

2 个答案: