シェアダイアログ

シェアダイアログを使用すると、利用者は個々の記事を自分のタイムライン、友達のタイムライン、グループに向けて投稿したり、Messengerで非公開のメッセージとして送信したりできます。シェアダイアログはFacebookログインや追加のアクセス許可を必要とせず、ウェブでのシェアを非常に簡単に実現します。

Cookieでログインしていないブラウザを使用している場合、シェアする相手を選択するドロップダウンリストは表示されません。アプリがシェアダイアログではなくフィードダイアログを使用している場合や、iframeウェブビューを使用している場合も、このメッセージフィールドは表示されません。

ネイティブのモバイルアプリにシェアダイアログを実装する方法については、「iOS」および「Android」セクションをご覧ください。

統合

シェアダイアログはJavaScript用Facebook SDKで使用できます。シェアダイアログを開くには、次のコードスニペットを使用します。URLへのリダイレクトも使用できます。詳しくは「Advanced Topics (詳細情報が記載されたトピック)」をご覧ください。

JavaScript用Facebook SDK

FB.ui関数shareメソッドパラメータを使ってシェアダイアログを表示し、リンクをシェアします。

リンクをシェアするには、次のように指定します。

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/',
}, function(response){});
試してみてください。

このURLのページにOpen Graphメタタグを追加し、Facebookにシェアする記事をカスタマイズします。

response.error_messageは、アプリの利用者がFacebookログインでアプリを認証したときのみ表示されます。

パラメータ

共通パラメータ

JS SDKでは、次のパラメータが自動的に提供されます。

パラメータ説明

app_id

アプリの固有のID。必須です。

redirect_uri

利用者がダイアログでボタンをクリックした後にリダイレクトするURL。URLリダイレクトを使用する場合は必須です。

display

ダイアログをどのように表示するかを指定します。

  • URLリダイレクトダイアログを実装する場合は、Facebook.com内でフルページ表示になります。この表示タイプがpageです。
  • iOS SDKまたはAndroid SDKを使用してダイアログを呼び出すと、デバイスに対して適切な表示タイプが自動的に指定、選択されます。
  • JavaScript用Facebook SDKを使用するのであれば、アプリにログインしている利用者向けのモーダルiframeタイプ、Facebook.com上のゲームで使用されるasync、その他の場合のpopupウィンドウがそれぞれデフォルトとなります。JavaScript用Facebook SDKを使用する際、必要に応じて、popupタイプを強制することもできます。
  • モバイルウェブアプリの場合はtouchの表示タイプが常にデフォルトです。

shareパラメータ

パラメータ説明デフォルト

href

投稿に添付されたリンク。shareメソッドを使用する場合は必須です。このURLのページにOpen Graphメタタグを追加し、シェアする記事をカスタマイズします。

現在のURLです。

hashtag

シェアコンテンツに追加するハッシュタグで、開発者が指定します。利用者は、ダイアログでこのハッシュタグを削除することもできます。ハッシュタグにはハッシュマーク(#facebookなど)を含めてください。

null

quote

リンクと共にシェアするクオートで、記事のプルクオートと同様に、利用者がハイライト表示したり、開発者が事前に定義できます。

null

mobile_iframe

trueに設定すると、シェアボタンによってウェブサイト上部のiframe内にシェアダイアログが開きます(詳しくは「モバイルウェブシェアダイアログ」をご覧ください)。このオプションはモバイルでのみ使用できます。デスクトップでは使用できません。

false


応答データ

パラメータ 説明

post_id

利用者がFacebookを使用してアプリにログインしており、publish_actionsを許可したときにのみ利用できます。存在する場合、これが、公開されたOpen Graph storyのIDとなります。

error_message

利用者が、Facebookログインを使用してアプリにログインしているときにのみ利用できます。

詳細情報が記載されたトピック

次のような高度な機能も利用できるようになりました。

モバイルウェブシェアダイアログ

モバイルウェブシェアダイアログには、コンテンツの上部のiFrameに表示する機能があります。利用者がシェアフローを完了させると、ダイアログが閉じます。利用者は元のコンテンツに戻るため、引き続きコンテンツを利用できます。

コードサンプル

iframeでモバイルウェブシェアダイアログを有効にするには、mobile_iframe属性をtrueに設定します。

FB.ui({
  method: 'share',
  mobile_iframe: true,
  href: 'https://developers.facebook.com/docs/',
}, function(response){});
試してみてください。

URLリダイレクト

リンクをシェアするには、次のように指定します。

https://www.facebook.com/dialog/share?
  app_id=145634995501895
  &display=popup
  &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

注: このコードをテストするときは、改行を削除してください。削除しないとエラーが発生します。

Open Graph action

FB.ui関数share_open_graphメソッドパラメータを使用して、Open Graph storyをシェアするシェアダイアログを呼び出します。

ダイアログでOpen Graph storyをシェアするには、次のように指定します。

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.likes',
  action_properties: JSON.stringify({
    object:'https://developers.facebook.com/docs/',
  })
}, function(response){});

URLのリダイレクトは、標準のリンクシェアと同様に機能します。

share_open_graphパラメータ

標準のリンクのシェアと同じパラメータを使用しますが、次のパラメータを追加します。

パラメータ 説明

action_type

どのOpen Graph actionタイプを公開するかを指定する文字列。たとえば、組み込み型の「いいね!」タイプの場合はog.likesです。ダイアログは、承認されたカスタムのタイプもサポートします。share_open_graphメソッドを使用する場合は必須です。

action_properties

キー/値ペアのJSONオブジェクトであり、使用されるaction_typeに対応するパラメータを指定するものです。有効なキー/値ペアは、APIを使用してOpen Graph Actionを公開するときに使用できるパラメータと同じです。share_open_graphメソッドを使用する場合は必須です。

share_open_graphダイアログはmobile_iframe: trueをサポートしません。