2

I want to make a button on my website, that will allow user to open native facebook app (if it is installed), or open facebook website otherwise. As i understood, i have to create separate html page for that.

I tried facebook hosted app links to get working App Links example. Following code was generated by facebook, it can be accessed by this url.

I have tried to open this link with iOS (Safari, Chrome), Android (default browser, Chrome). Despite i have facebook app installed on both devices, i am redirected to facebook website.

Why does it happen? How i can make it open native apps?

<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>
avasin
  • 9,186
  • 18
  • 80
  • 127

2 Answers2

3

AppLinks are a protocol that only Facebook native supports. This means that only the Facebook native apps for Android and iOS will properly parse the metatags and take action. All other browsers and platforms ignore them.

In order to properly handle linking in other browsers, you use the client side JS redirection code in addition to AppLinks to support redirection in other browsers. If you don't want to build this all out, I built a free tool called branch.io that will host your links with this client side JS plus auto-configure your AppLinks.

If you'd rather build it yourself, here's the code you can use for 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>

And for Android, you can use this client side JS code snippet:

<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>
Alex Austin
  • 1,142
  • 8
  • 11
0

the Facebook Doc says

App Links is an open standard that makes it possible to deep link to content in your app. When someone using your app shares content via Facebook (or another App Links-enabled app) you can create a link that makes it possible to jump back into your app from that piece of content.

so I think like @Ming Li said, it not support on Safari and Chrome.

You can try it on your timeline, and use Facebook app to open it.

funclosure
  • 498
  • 6
  • 15