iOSおよびAndroid用Messengerへのシェア

バージョン4.29.0以降のiOSまたはAndroid用Facebook SDKを使用して開発する場合は、アプリからMessengerにリンクとメディアの両方をシェアできるよう設定できます。これらのシェアによって、アトリビューションリンクを介したチャットエクステンションをトリガーできます。また、シェアした人の[その他]ドロワーにチャットエクステンションを表示できます。

詳しくは、次のセクションをご覧ください。

ウェブ用Messengerへのシェアの実装については、「ウェブ用Messengerへのシェア」をご覧ください。

シェアタイプ

Facebook SDKには、アトリビューションありの4つのシェアタイプと、アトリビューションなしの1つのシェアタイプが用意されています。

次のテーブルには、Messengerにシェアする際にサポートされているすべてのシェアタイプ、ページIDまたはアプリIDの必要性、テンプレートの使用方法が記載されています。

シェアタイプ ページIDが必須かどうか 使用方法

一般テンプレート

任意

  • ボタンを使用した一般テンプレート
  • デフォルトアクションを使用した一般テンプレート
  • ボタンとデフォルトアクションを使用した一般テンプレート

メディアテンプレート

必須

  • 画像URIのメディアテンプレート
  • 画像添付IDのメディアテンプレート
  • 動画URLのメディアテンプレート
  • 動画添付IDのメディアテンプレート

Open Graph Music

必須

  • Open graph music

リンクシェア

任意

  • アトリビューションなしのリンク
  • アトリビューションありのリンク

写真

サポートされていません

  • 写真
  • ライブラリからの写真

アプリIDとページIDのリンク

開発者はシェアフローでページIDを指定できます。これにより、利用者がシェアSDKを経由してアプリからMessengerにコンテンツをシェアしたときに、そのコンテンツがページにアトリビューションされます。結果的に、ページ管理者は、ページでシェアアトリビューションを使用できるアプリを制御することによって、アトリビューションの誤りを回避できます。管理者は、アプリIDをページIDにリンクして、アプリにシェアアトリビューションを付与します。

アプリIDとページIDをリンクするには:

  1. ページの[設定]を開きます。
  2. [Messengerプラットフォーム]セクションをクリックします。
  3. [一般設定][アプリにリンク]セクションを開きます。
  4. アプリIDを入力し、[リンク]ボタンをクリックします。
  5. アプリが[リンクしたアプリ]の一覧に表示されていない場合は、「シェアアトリビューション」の役割が関連付けられた状態でテーブルに表示されます。アプリがすでにテーブルに表示されている場合は、そのアプリに新しい「シェアアトリビューション」の役割が追加されます。

ページ管理者は、アプリからシェアアトリビューションを使用する権限を削除することもできます。

指定したアプリの「シェアアトリビューション」の役割を削除するには:

  1. [リンクしたアプリ]テーブルで、アプリの「役割」列のドロップダウンをクリックします。
  2. [シェアアトリビューション]をクリックして役割の選択を解除します。
  3. アプリの役割が「シェアアトリビューション」のみであった場合は、テーブルからそのアプリの行が削除されます。他の役割がある場合は、引き続きテーブルに表示されますが、「シェアアトリビューション」列の選択は解除された状態になります。

ドメインのホワイトリスト登録

シェアSDKで[URL]ボタンを使用し、Messengerで開いたときにURLのMessengerエクステンションを有効にする場合は、正しくシェアできるようにURLをホワイトリストに登録する必要があります。

ドメインをホワイトリストに登録するには:

  1. ページの[設定]を開きます。
  2. [Messengerプラットフォーム]セクションをクリックします。
  3. [一般設定][アプリにリンク]セクションを開きます。
  4. [ホワイトリストに追加されたドメイン]フィールドにURLのドメインを入力し、[保存]をクリックします。

ホワイトリスト登録について詳しくは、「MessengerエクステンションSDK - 必須ドメインのホワイトリスト登録」をご覧ください。

IOS

前提条件

Messengerへのシェア機能をアプリに追加する前に、以下の手順を完了してください。

  • モバイル開発環境にiOS用Facebook SDKを追加します。
  • Messengerプラットフォームツールを使用して、FacebookアプリIDをページIDに設定、リンクします。
  • アプリの.plistファイルに、アプリID、表示名、写真へのアクセスの理由(人による判読が可能なもの)を追加します。
  • FBSDKShareKit.frameworkをプロジェクトにリンクします。

詳しくは、iOS用Facebook SDKスタートガイドをご覧ください。

また、アプリからFBSDKMessageDialogインスタンスでcanShowを呼び出し、利用者のデバイスに互換性のあるバージョンのMessengerがインストールされていることを確認するようにしてください。

一般テンプレートでのシェアの例

FBSDKShareMessengerURLActionButton *urlButton = [[FBSDKShareMessengerURLActionButton alloc] init];
urlButton.title = @"Visit Facebook";
urlButton.url = [NSURL URLWithString:@"https://www.facebook.com"];
    
FBSDKShareMessengerGenericTemplateElement *element = [[FBSDKShareMessengerGenericTemplateElement alloc] init];
element.title = @"This is a Cat Picture";
element.subtitle = @"Look at this cat, wow! Amazing.";
element.imageURL = [NSURL URLWithString:@"https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"];
element.button = urlButton;
    
FBSDKShareMessengerGenericTemplateContent *content = [[FBSDKShareMessengerGenericTemplateContent alloc] init];
content.pageID = // Your page ID, required for attribution
content.element = element;

FBSDKMessageDialog *messageDialog = [[FBSDKMessageDialog alloc] init];
messageDialog.shareContent = content;

if ([messageDialog canShow]) {
    [messageDialog show];
}

メディアテンプレートでのシェアの例

// Share with mediaURL
FBSDKShareMessengerURLActionButton *urlButton = [[FBSDKShareMessengerURLActionButton alloc] init];
urlButton.title = @"Visit Facebook";
urlButton.url = [NSURL URLWithString:@"https://www.facebook.com"];

NSURL *mediaURL = // Must be a Facebook URL, see media template documentation
FBSDKShareMessengerMediaTemplateContent *content = [[FBSDKShareMessengerMediaTemplateContent alloc] initWithMediaURL:mediaURL];
content.pageID = // Your page ID, required
content.mediaType = FBSDKShareMessengerMediaTemplateMediaTypeImage;
content.button = urlButton;

FBSDKMessageDialog *messageDialog = [[FBSDKMessageDialog alloc] init];
messageDialog.shareContent = content;

if ([messageDialog canShow]) {
    [messageDialog show];
}

------------------------------------------------------------------

// Share with attachmentID
FBSDKShareMessengerURLActionButton *urlButton = [[FBSDKShareMessengerURLActionButton alloc] init];
urlButton.title = @"Visit Facebook";
urlButton.url = [NSURL URLWithString:@"https://www.facebook.com"];

NSString *attachmentID = // attachmentID, see media template documentation for how to upload an attachment
FBSDKShareMessengerMediaTemplateContent *content = [[FBSDKShareMessengerMediaTemplateContent alloc] initWithAttachmentID:attachmentID];
content.pageID = // Your page ID, required
content.mediaType = FBSDKShareMessengerMediaTemplateMediaTypeImage;
content.button = urlButton;

FBSDKMessageDialog *messageDialog = [[FBSDKMessageDialog alloc] init];
messageDialog.shareContent = content;

if ([messageDialog canShow]) {
    [messageDialog show];
}

Open Graph Musicでのシェアの例

FBSDKShareMessengerURLActionButton *urlButton = [[FBSDKShareMessengerURLActionButton alloc] init];
urlButton.title = @"Visit Facebook";
urlButton.url = [NSURL URLWithString:@"https://www.facebook.com"];

FBSDKShareMessengerOpenGraphMusicTemplateContent *content = [[FBSDKShareMessengerOpenGraphMusicTemplateContent alloc] init];
content.pageID = // Your page ID, required
content.url = // open graph music url, see open graph music documentation
content.button = urlButton;

FBSDKMessageDialog *messageDialog = [[FBSDKMessageDialog alloc] init];
messageDialog.shareContent = content;

if ([messageDialog canShow]) {
    [messageDialog show];
}

Android

前提条件

Androidでのシェアに記載されている指示に従います。以下はその概要です。

また、アプリからMessageDialog.canshow({template})を呼び出し、利用者のデバイスに互換性のあるバージョンのMessengerがインストールされていることを確認するようにしてください。

一般テンプレートでのシェアの例

ShareMessengerURLActionButton actionButton =
    new ShareMessengerURLActionButton.Builder()
           .setTitle("Visit Facebook")
           .setUrl(Uri.parse("https://www.facebook.com"))
           .build();
ShareMessengerGenericTemplateElement genericTemplateElement =
    new ShareMessengerGenericTemplateElement.Builder()
           .setTitle("Visit Facebook")
           .setSubtitle("Visit Messenger")
           .setImageUrl(Uri.parse("heeps://Your/Image/Url"))
           .setButton(actionButton)
           .build();
ShareMessengerGenericTemplateContent genericTemplateContent = 
    new ShareMessengerGenericTemplateContent.Builder()
           .setPageId("Your Page Id") // Your page ID, required
           .setGenericTemplateElement(genericTemplateElement)
           .build();  
                 
if (MessageDialog.canShow(genericTemplateContent)) {
    MessageDialog.show(activityOrFragment, genericTemplateContent);
}

メディアテンプレートでのシェア

// Share with mediaURL
ShareMessengerMediaTemplateContent mediaTemplateContent =
    new ShareMessengerMediaTemplateContent.Builder()
            .setPageId("Your page ID") // Your page ID, required
            .setMediaType(MediaType.IMAGE)
            .setMediaUrl(Uri.parse("https://Facebook/Media/URL")) // Must be a Facebook URL, see media template documentation
            .setButton(actionButton)
            .build();
if (MessageDialog.canShow(mediaTemplateContent)) {
    MessageDialog.show(activityOrFragment, mediaTemplateContent);
}

// Share with attachmentID
ShareMessengerMediaTemplateContent mediaTemplateContent =
    new ShareMessengerMediaTemplateContent.Builder()
            .setPageId("Your page ID") // Your page ID, required
            .setMediaType(MediaType.IMAGE)
            .setAttachmentId("Attachment Id") // AttachmentID, see media template documentation for how to upload an attachment
            .setButton(actionButton)
            .build();
if (MessageDialog.canShow(mediaTemplateContent)) {
    MessageDialog.show(activityOrFragment, mediaTemplateContent);
}

Open Graph Musicでのシェアの例

ShareMessengerOpenGraphMusicTemplateContent musicTemplateContent =
    new ShareMessengerOpenGraphMusicTemplateContent.Builder()
                .setPageId("Your page ID") // Your page ID, required
                .setUrl(Uri.parse("https://Open/Graph/Music/URL")) // Open graph music url, see open graph music documentation
                .setButton(actionButton)
                .build();

if (MessageDialog.canShow(musicTemplateContent)) {
    MessageDialog.show(activityOrFragment, musicTemplateContent);
}