스토리에 공유하기

사용자가 Instagram 스토리로 콘텐츠를 공유할 수 있도록 Android와 iOS 앱에 공유를 통합합니다. 새 앱을 만들려면 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. 페이스트보드에 공유하고자 하는 콘텐츠를 할당합니다.
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 스토리에 공유하기 문서를 참조하세요.