MessengerエクステンションSDKの追加

MessengerエクステンションSDKを使用すると、Messengerウェブビューで開かれるウェブサイトやウェブアプリで、Messenger独自の便利な機能を利用できるようになります。このSDKにより、ウェブビューを開いた利用者に関する情報を取得したり、コンテンツをMessengerのスレッドにシェアしたり、スムーズにMessenger UIと統合したりすることができます。

利用可能な機能

MessengerエクステンションSDKを組み込むと、以下の機能がMessengerウェブビューで利用可能になります。ただし、実際に機能を利用できるかどうかは、Messengerとデバイスのバージョンによって異なる場合があります。

関数	説明
getContext()	ウェブビューを開いた利用者のPSIDなど、スレッドのコンテキストを取得します。
requestCloseBrowser()	ウェブビューを閉じ、Messengerスレッドに戻ります。
askPermission()	利用者のプロフィール情報の取得などを行うアクセス許可を要求します。
getGrantedPermissions()	現在付与されているアクセス許可を確認します。
getSupportedFeatures	現在のデバイスのウェブビューでサポートされている機能(シェアなど)を確認します。

これらの機能の使用方法について詳しくは、MessengerエクステンションSDKリファレンスをご覧ください。

SDKのインストール

1. ドメインをホワイトリストに追加する

Messengerエクステンションをボットで使用するには、まずページのドメインをホワイトリストに追加します。セキュリティ上の理由で、ウェブページのすべてのドメインをホワイトリストに追加する必要があります。詳しくは、ホワイトリストへの追加に関するリファレンスドキュメントを参照してください。

次のAPIを使うと、プログラムで簡単にドメインをホワイトリストに追加できます。

 
curl -X POST -H "Content-Type: application/json" -d '{
  "whitelisted_domains":[
    "https://petersfancyapparel.com"
  ]
}' "https://graph.facebook.com/v21.0/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

成功すると、MessengerプロフィールAPIは次のように応答します。

{"result":"success"}

2. MessengerエクステンションJS SDKを組み込む

次のコードを使って、ウェブビューに読み込まれるページにMessengerエクステンションJavascript SDKを追加します。次のように、読み込む各ページの body タグを開始した直後に挿入しなければなりません。

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/messenger.Extensions.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));

3. SDK読み込みイベントを待機する

window.extAsyncInit() は、MessengerエクステンションJS SDKが読み込みを終えると呼び出されます。これをトリガーとして使って、SDKで利用可能な他の関数を呼び出すこともできます。

window.extAsyncInit = function() {
  // the Messenger Extensions JS SDK is done loading 
};

MessengerウェブクライアントでのSDKの使用

MessengerエクステンションSDKは、モバイルとデスクトップ両方のMessengerクライアントで使用できます。ただし、場合によっては、適切に動作させるために以下について考慮する必要があります。

また、 window.name プロパティを使用して、クライアント側のコードからiframeの位置をチェックすることもできます。

Messengerウェブでiframeがトリガーされたら、 window.name が "messenger_ref"に設定されます。設定されない場合は、Facebookのチャットタブを読み込むとき、 window.name は "facebook_ref"になります。

サポートされていない機能

次の設定や機能は、Messengerウェブクライアントではサポートされていません。Messengerモバイルクライアントでは正常に機能します。

webview_height_ratio
webview_share_button
戻るボタン
ダイアログタイトル
URLリダイレクトでウェブビューを閉じる

トラブルシューティング

MessengerエクステンションSDKをページから呼び出せない場合は、以下の点を考慮してください。

ウェブビューを固定メニューまたはボタンから開いている場合は、 messenger_extensions パラメーターが trueに設定されていることを確認します。ウェブビューがシェアされたメッセージから開かれている場合、Messengerエクステンションを機能させるのにボットとのスレッドが必要なわけではありません。
ページをホストしているドメインがホワイトリストに追加されていることを確認します。
エクステンションを使用するすべてのページにJS SDKが含まれていることを確認してください。
SDKが読み込みを完了する前に関数の呼び出しを行わないでください。上述の window.extAsyncInit(ここで説明されています)を使用して、読み込みが完了した時点で通知されるようにします。
ページがHTTPSで保存されており、標準以外のポートを含んでいないか確認します。