スマホからURLスキームでfbアプリを呼び出す方法について

  • T

    facebookページの運用をしており、wordpressからfacebookページに誘導し、イイね！を集めたいと考えています。
    スマホからのアクセスの場合、ブラウザのfacebookへアクセスをすると、ユーザーはイイね！をするのに再ログインを
    しなければなりません。一方、facebookアプリで開くと、基本的にログイン状態が維持されているので、すぐにいいね！が出来、ユーザーのハードルを下げることが出来ると考えています。

    例えば、下記のURLスキームをスマホよりクリックすると、
    指定のfacebookページをブラウザではなくアプリにて開かせることが出来ます。
    fb://profile/738797092917629/
    ※飛び先のページは適当に用意しました。

    このURLスキームをJINのスマホ固定フッターに使用したいと考えているのですが、これが上手くいきません。
    カスタムリンクからURLの箇所に上記のURLスキームを入力すると「無効な URL です」と表示されます。

    質問①「上記URLスキームを固定フッターに設定する方法を知っている方がいたらご教示ください」
    質問②「自動でPC・スマホを判別し、PCは通常通りのページ遷移、スマホからのアクセスのみURLスキームでアプリに飛ばすといった方法をご存知でしたらご教示ください。」

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :

    0 1 件の返信
  • administrators

    @tetsutetsu さん

    こんにちは！ JIN運営チームのりょうたです。

    詳しいPHPやJavascriptの詳しい内容をお伝えはできませんが、質問①と②を合わせてこうじゃないか？という方法を１つご紹介いたします。
    ※確認はしておりません
    ※カスタマイズは自己責任でお願い致します。

    【必要なもの】
    ・子テーマ（バージョンアップで消えないように）
    ・エディター（コードを書く専用のアプリです。）

    【大前提として・・・】
    URLスキームを導入するにあたって考えなければいけないことは、もちろんアプリにきちんと繋がることももちろんですが

    ・ユーザーがFacebookアプリを持っていない場合
    　┗持っていない場合ストアに遷移させる
    ・ユーザーがAndroidの場合
    ・ユーザーがiOSの場合

    上記の場合もきちんと考える必要がございます。
    URLスキームを導入すれば上記が解決されるわけではないので、
    挙動もプログラムもそれぞれの媒体できちんと動作するようにしなければいけません。

    【手順】
    ①まずはカスタムリンクにURLスキーマを使えるようにする
    ⑴通常、WordPressのカスタムリンクでは「http://」や「https://」で始まるリンクじゃないと挿入できないように仕組みになっております。
    ですのでまずこれをなんとかします。

    手っ取り早いのは、
    「Javascriptでaタグ内のリンクを取得しURLスキームと変更する」というものがあります。

    要するにカスタムリンクのリンクに適当なリンク（http://等から始まるリンク）を用意し、それを取得、予め用意していたURLスキームと変更するJavascriptを書けば
    WordPressのシステムを介することなくURLを書き換えれます。

    ▼参考記事
    https://www.ipentec.com/document/javascript-change-link-destination-dynamically

    http://www.db.gs/article/402042301.html

    上記の記事を参考にしていただければと思います。

    ⑵ユーザーエージェントでリンクを切り替える
    スマホ時とPC時でリンク先を変えるのであれば、ユーザーのデバイスによって変更するリンクを変えるのが良いかと思います。

    https://hacknote.jp/archives/3414/

    https://hacknote.jp/archives/5877/

    上記を参考に⑴で作ってjsを書き換えれば問題なくできるようになるかと思います。

    ②ユーザの条件に応じてURLの遷移先を変更する

    これでカスタムリンクにURLスキームを導入することはできました。
    ここからそれぞれの条件に置いて、どのような動作をさせるかを考えていきます。

    アプリを持っている場合と持っていない場合、使っているOSによって挙動が違うので

    https://qiita.com/oigus-k/items/03044da9a9f7f1754346

    https://qiita.com/kenguy/items/9d9a8b7b6ca8b6984eb9

    この辺りを参考に子テーマのjsファイルに記述していただくと早いかと思います。

    ③それぞれのパターンで挙動がうまくいっているか確認する

    URLスキームが正常に起動しているかはそれぞれのデバイスで確認する必要がございます。
    ログインしている状態やログアウトしている状態での挙動、iOSやAndroidでアプリがない場合ストアに飛ぶかどうか等確認作業は大切です。。

    ざっと説明したので割愛している部分もあります。
    上記の流れはあくまでも1案ですので他のやり方もあるかもしれませんが、
    僕が考え付くのはこれくらいしかないです。。

    また、すべてのカスタマイズは子テーマで行い、Javascriptはすべて子テーマのファイルを使うことをお勧めします！
    親テーマに書くとアップデートですべて消されてしまいますので。。

    よかったら参考にしてみてください！！

    1