FacebookのURLクリックでアプリを開く

5月 18, 2022

クラウドソーシングの依頼ネタです。

FacebookグループへのURLをクリックした相手が、アプリで開けるようにしたいようです。

URLスキームを使用してFacebookアプリを開く

Facebookには、"fb"というURLスキームが用意されているようです。

よって、スマホのFacebookへのリンクを、「fb:〜」のように Javascript で差し替えれば良いことになります。

URLスキームを利用して、アプリが入ってたらアプリ起動、入ってなかったらストアへ

    <div style="width: 0; height: 0; overflow: hidden;">
        <iframe id="launch_frame" name="launch_frame"> </iframe>
    </div>

    <a href="https://www.facebook.com/Facebookページ固有の文字列/">サイトを開く</a>

    <script>
        // アプリを開く。アプリがインストールされていなければサイトを開く。
        function launchApp() {
            var IOS_SCHEME = 'fb://page?id=FacebookページID';
            var IOS_STORE = 'https://apps.apple.com/jp/app/facebook/id284882215';
            var ANDROID_SCHEME = 'fb://page/FacebookページID';
            var ANDROID_PACKAGE = 'https://play.google.com/store/apps/details?id=com.facebook.katana&hl=ja&gl=US';
            var PC_SITE = 'https://www.facebook.com/Facebookページ固有の文字列/'

            var userAgent = navigator.userAgent.toLowerCase();
            // iPhone端末ならアプリを開くかApp Storeを開く。
            if (userAgent.search(/iphone|ipad|ipod/) > -1) {
                launch_frame.location.href = IOS_SCHEME + '://';
                setTimeout(function() {
                    location.href = IOS_STORE;
                }, 500);
            }
            // Android端末ならアプリを開くかGoogle Playを開く。
            else if (userAgent.search(/android/) > -1) {
                document.location = 'intent://#Intent;scheme=' + ANDROID_SCHEME
                        + ';package=' + ANDROID_PACKAGE + ';end';
            }
            // その他・不明・PCなどの場合はサイトを開く。
            else {
                document.location = PC_SITE;
            }
        }

        // ページ読み込み時に実行
        window.onload = function() {
            launchApp();
        }
    </script>

参考

• Facebookページをスマホアプリで直接開くリンクの仕込み方 [SNS]
  https://16deza.com/open-facebookpage-in-app-directly/
• Web側から特定アプリがインストールされているか判定・処理する方法 #魔法のランプ編
  https://qiita.com/oigus-k/items/03044da9a9f7f1754346
• URLスキームを利用して、アプリが入ってたらアプリ起動、入ってなかったらストアへ！を実現。
  https://qiita.com/tarusawa_ken/items/9d9a8b7b6ca8b6984eb9
• スマホからURLスキームでfbアプリを呼び出す方法について