ストーリーズへのシェア

AndroidとiOSアプリにシェア機能を統合し、ユーザーがコンテンツをInstagramストーリーズにシェアできるようにします。新しいアプリを作成するには、Android用Facebook SDKスタートガイドとiOS用Facebook SDKスタートガイドをご覧ください。

概要

Androidの暗黙的インテントとiOSのカスタムURLスキームを使って、アプリから写真、動画やスタンプをInstagramアプリに送ることができます。Instagramアプリはコンテンツを受け取ってストーリーズコンポーザーに読み込み、ユーザーがInstagramストーリーズで公開できるようにします。

Instagramアプリのストーリーズコンポーザーは、バックグラウンドレイヤーとスタンプレイヤーで構成されています。 バックグラウンドレイヤー バックグラウンドレイヤーはスクリーンを埋めるもので、写真、動画、ソリッドカラーやグラデーションカラーでカスタマイズできます。 スタンプレイヤー スタンプレイヤーには画像を入れられます。ユーザーはストーリーズコンポーザー内でスタンプレイヤーをさらにカスタマイズすることができます。

Android開発者

Androidに実装する場合、暗黙的インテントを使ってInstagramアプリを起動し、コンテンツを渡します。通常のコンテンツ共有の流れは以下の通りです。

1. Instagramアプリに渡したいコンテンツで暗黙的インテントをインスタンス化する。
2. アクティビティを起動し、暗黙的インテントを処理できることを確認する。
3. 処理可能であればそのアクティビティを解決する。

データ

ストーリーズでシェアすると、以下のデータを送信します。

バックグラウンドアセットの共有

次のコードサンプルは、画像をInstagramに送信してユーザーが自分のInstagramストーリーズに公開できるようにするものです。

// Instantiate an intent
Intent intent = new Intent("com.instagram.share.ADD_TO_STORY");

// Attach your App ID to the intent
String sourceApplication = "1234567"; // This is your application's FB ID
intent.putExtra("source_application", sourceApplication);

// Attach your image to the intent from a URI
Uri backgroundAssetUri = Uri.parse("your-image-asset-uri-goes-here");
intent.setDataAndType(backgroundAssetUri, MEDIA_TYPE_JPEG);

// Grant URI permissions for the image
intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);

// Instantiate an activity
Activity activity = getActivity();

// Verify that the activity resolves the intent and start it
if (activity.getPackageManager().resolveActivity(intent, 0) != null) {
  activity.startActivityForResult(intent, 0);
}  

スタンプアセットの共有

このサンプルは、スタンプレイヤー画像アセットと一連のバックグラウンドレイヤーカラーをInstagramに送信します。バックグラウンドレイヤーカラーを指定しない場合、バックグラウンドレイヤーカラーは#222222になります。

// Instantiate an intent
Intent intent = new Intent("com.instagram.share.ADD_TO_STORY");

// Attach your App ID to the intent
String sourceApplication = "1234567"; // This is your application's FB ID
intent.putExtra("source_application", sourceApplication);

// Attach your sticker to the intent from a URI, and set background colors
Uri stickerAssetUri = Uri.parse("your-image-asset-uri-goes-here");
intent.setType(MEDIA_TYPE_JPEG);
intent.putExtra("interactive_asset_uri", stickerAssetUri);
intent.putExtra("top_background_color", "#33FF33");
intent.putExtra("bottom_background_color", "#FF00FF");

// Instantiate an activity
Activity activity = getActivity();

// Grant URI permissions for the sticker
activity.grantUriPermission(
    "com.instagram.android", stickerAssetUri, Intent.FLAG_GRANT_READ_URI_PERMISSION);

// Verify that the activity resolves the intent and start it
if (activity.getPackageManager().resolveActivity(intent, 0) != null) {
  activity.startActivityForResult(intent, 0);
}

バックグラウンドアセットとスタンプアセットの共有

このサンプルは、バックグラウンドレイヤー画像アセットとスタンプレイヤー画像アセットをInstagramに送信します。

// Instantiate an intent
Intent intent = new Intent("com.instagram.share.ADD_TO_STORY");

// Attach your App ID to the intent
String sourceApplication = "1234567"; // This is your application's FB ID
intent.putExtra("source_application", sourceApplication);

// Attach your image to the intent from a URI
Uri backgroundAssetUri = Uri.parse("your-background-image-asset-uri-goes-here");
intent.setDataAndType(backgroundAssetUri, MEDIA_TYPE_JPEG);

// Attach your sticker to the intent from a URI
Uri stickerAssetUri = Uri.parse("your-sticker-image-asset-uri-goes-here");
intent.putExtra("interactive_asset_uri", stickerAssetUri);

// Grant URI permissions for the image
intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);

// Instantiate an activity
Activity activity = getActivity();

// Grant URI permissions for the sticker
activity.grantUriPermission(
    "com.instagram.android", stickerAssetUri, Intent.FLAG_GRANT_READ_URI_PERMISSION);

// Verify that the activity resolves the intent and start it
if (activity.getPackageManager().resolveActivity(intent, 0) != null) {
  activity.startActivityForResult(intent, 0);
}

iOS開発者

iOSに実装する場合は、カスタムURLスキームを使ってInstagramアプリを起動し、コンテンツを渡します。通常のコンテンツ共有の流れは以下の通りです。

1. アプリでInstagramのカスタムURLスキームを処理できることを確認する。
2. 共有したいコンテンツをpasteboardに割り当てる。
3. アプリが対応している場合はカスタムURLスキームを処理する。

データ

ストーリーズでシェアすると、以下のデータを送信します。

InstagramのカスタムURLスキームを登録する

InstagramのカスタムURLスキームをアプリで使用するには、事前にスキームを登録する必要があります。アプリのInfo.plistのLSApplicationQueriesSchemesキーにinstagram-storiesを追加します。

バックグラウンドアセットの共有

次のコードサンプルは、バックグラウンドレイヤー画像アセットをInstagramに送信して、ユーザーが編集したり自分のInstagramストーリーズに公開したりできるようにします。

- (void)shareBackgroundImage
{
  // Identify your App ID
  NSString *const appIDString = @"1234567890";

  // Call method to share image
  [self backgroundImage:UIImagePNGRepresentation([UIImage imageNamed:@"backgroundImage"]) 
        appID:appIDString];
}


// Method to share image
- (void)backgroundImage:(NSData *)backgroundImage 
        appID:(NSString *)appID
{
  NSURL *urlScheme = [NSURL URLWithString:[NSString stringWithFormat:@"instagram-stories://share?source_application=%@", appID]];

  if ([[UIApplication sharedApplication] canOpenURL:urlScheme])
  {
    // Attach the pasteboard items
    NSArray *pasteboardItems = @[@{@"com.instagram.sharedSticker.backgroundImage" : backgroundImage}];

    // Set pasteboard options
    NSDictionary *pasteboardOptions = @{UIPasteboardOptionExpirationDate : [[NSDate date] dateByAddingTimeInterval:60 * 5]};

    // This call is iOS 10+, can use 'setItems' depending on what versions you support
    [[UIPasteboard generalPasteboard] setItems:pasteboardItems options:pasteboardOptions];
    
    [[UIApplication sharedApplication] openURL:urlScheme options:@{} completionHandler:nil];
  } 
  else
  {
      // Handle error cases
  }
} 

スタンプアセットの共有

このサンプルコードは、Instagramアプリにスタンプレイヤー画像アセットと一連のバックグラウンドレイヤーのカラーを渡す方法を示します。バックグラウンドレイヤーカラーを指定しない場合、バックグラウンドレイヤーカラーは#222222になります。

- (void)shareStickerImage
{
  // Identify your App ID
  NSString *const appIDString = @"1234567890";

  // Call method to share sticker
  [self stickerImage:UIImagePNGRepresentation([UIImage imageNamed:@"stickerImage"])
        backgroundTopColor:@"#444444"
        backgroundBottomColor:@"#333333"
        appID:appIDString];
}

// Method to share sticker
- (void)stickerImage:(NSData *)stickerImage 
        backgroundTopColor:(NSString *)backgroundTopColor 
        backgroundBottomColor:(NSString *)backgroundBottomColor
        appID:(NSString *)appID
{
  NSURL *urlScheme = [NSURL URLWithString:[NSString stringWithFormat:@"instagram-stories://share?source_application=%@", appID]];

  if ([[UIApplication sharedApplication] canOpenURL:urlScheme])
  {
    // Attach the pasteboard items
    NSArray *pasteboardItems = @[@{@"com.instagram.sharedSticker.stickerImage" : stickerImage,
                                   @"com.instagram.sharedSticker.backgroundTopColor" : backgroundTopColor,
                                   @"com.instagram.sharedSticker.backgroundBottomColor" : backgroundBottomColor}];

    // Set pasteboard options
    NSDictionary *pasteboardOptions = @{UIPasteboardOptionExpirationDate : [[NSDate date] dateByAddingTimeInterval:60 * 5]};

    // This call is iOS 10+, can use 'setItems' depending on what versions you support
    [[UIPasteboard generalPasteboard] setItems:pasteboardItems options:pasteboardOptions];

    [[UIApplication sharedApplication] openURL:urlScheme options:@{} completionHandler:nil];
  } 
  else
  {
      // Handle error cases
  }
}

バックグラウンドアセットとスタンプアセットの共有

このサンプルコードは、Instagramアプリにバックグラウンドレイヤーの画像アセットとスタンプレイヤーの画像アセットを渡す方法を示します。

- (void)shareBackgroundAndStickerImage
{
  // Identify your App ID
  NSString *const appIDString = @"1234567890";

  // Call method to share image and sticker
  [self backgroundImage:UIImagePNGRepresentation([UIImage imageNamed:@"backgroundImage"])
        stickerImage:UIImagePNGRepresentation([UIImage imageNamed:@"stickerImage"])
        appID:appIDString];
}


// Method to share image and sticker
- (void)backgroundImage:(NSData *)backgroundImage 
        stickerImage:(NSData *)stickerImage 
        appID:(NSString *)appID
{
  NSURL *urlScheme = [NSURL URLWithString:[NSString stringWithFormat:@"instagram-stories://share?source_application=%@", appID]];


  if ([[UIApplication sharedApplication] canOpenURL:urlScheme])
  {
    // Attach the pasteboard items
    NSArray *pasteboardItems = @[@{@"com.instagram.sharedSticker.backgroundImage" : backgroundImage,
                                   @"com.instagram.sharedSticker.stickerImage" : stickerImage}];

    // Set pasteboard options
    NSDictionary *pasteboardOptions = @{UIPasteboardOptionExpirationDate : [[NSDate date] dateByAddingTimeInterval:60 * 5]};

    // This call is iOS 10+, can use 'setItems' depending on what versions you support
    [[UIPasteboard generalPasteboard] setItems:pasteboardItems options:pasteboardOptions];

    [[UIApplication sharedApplication] openURL:urlScheme options:@{} completionHandler:nil];
  }
  else
  {
      // Handle error cases
  }
}

Facebookストーリーズへのシェア

アプリのユーザーにコンテンツをFacebookのストーリーズとしてシェアすることを許可することもできます。許可する方法については、Facebookのストーリーズへのシェアに関するドキュメントをご覧ください。