การแชร์ไปยังสตอรี่

คุณสามารถผสานการทำงานการแชร์เข้ากับแอพ Android และ iOS ของคุณเพื่อให้ผู้ใช้สามารถแชร์เนื้อหาของคุณเป็นสตอรี่บน Instagram ได้ หากต้องการสร้างแอพใหม่ โปรดดูที่การเริ่มต้นใช้งาน Facebook SDK สำหรับ Android และการเริ่มต้นใช้งาน Facebook SDK สำหรับ iOS

ภาพรวม

แอพของคุณสามารถส่งรูปภาพ วิดีโอ และสติกเกอร์ไปยังแอพ Instagram ได้โดยใช้ Implicit Intent ของ Android และแผน URL แบบกำหนดเองของ iOS แอพ Instagram จะได้รับเนื้อหานี้และโหลดลงในตัวปรับแต่งเรื่องราวเพื่อให้ผู้ใช้สามารถเผยแพร่เนื้อหาดังกล่าวไปยัง Instagram Stories ของตนได้

ตัวปรับแต่งสตอรี่ของแอพ Instagram ประกอบด้วยเลเยอร์พื้นหลังและเลเยอร์สติกเกอร์ เลเยอร์พื้นหลัง เลเยอร์พื้นหลังจะเติมเต็มหน้าจอและคุณจะสามารถปรับแต่งได้ด้วยรูปภาพ วิดีโอ สีทึบ หรือการไล่ระดับสีได้ เลเยอร์สติกเกอร์ เลเยอร์สติกเกอร์จะมีรูปภาพ และเลเยอร์นี้สามารถปรับแต่งเพิ่มเติมโดยผู้ใช้ภายในตัวปรับแต่งสตอรี่ได้

ผู้พัฒนา Android

การนำไปใช้งานของ Android นั้นใช้ Implicit Intent เพื่อเปิดใช้งานแอพ Instagram และส่งเนื้อหาไปยังแอพ โดยทั่วไป ขั้นตอนการแชร์ของคุณควรจะเป็นดังนี้

1. สร้างอินสแตนซ์ Implicit Intent ด้วยเนื้อหาที่คุณต้องการส่งไปยังแอพ Instagram
2. เริ่มกิจกรรมและตรวจสอบว่าสามารถแก้ไข Implicit Intent ได้
3. แก้ไขกิจกรรมหากสามารถทำได้

ข้อมูล

คุณส่งข้อมูลต่อไปนี้เมื่อคุณแชร์ไปยังสตอรี่

การแชร์องค์ประกอบพื้นหลัง

ตัวอย่างโค้ดต่อไปนี้จะส่งรูปภาพไปยัง Instagram เพื่อให้ผู้ใช้สามารถเผยแพร่ไปยัง Instagram Stories ของตนได้

// 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. ตรวจสอบว่าแอพของคุณสามารถแก้ไขแผน URL แบบกำหนดเองของ Instagram ได้
2. กำหนดเนื้อหาที่คุณต้องการแชร์ลงบนกระดานพักข้อมูล
3. แก้ไขแผน URL แบบกำหนดเองหากแอพของคุณสามารถทำได้

ข้อมูล

คุณส่งข้อมูลต่อไปนี้เมื่อคุณแชร์ไปยังสตอรี่

ลงทะเบียนแผน URL แบบกำหนดเองของ Instagram

คุณต้องลงทะเบียนแผน URL แบบกำหนดเองของ Instagram ก่อนที่แอพของคุณจะใช้แผนดังกล่าว เพิ่ม instagram-stories ไปยังคีย์ LSApplicationQueriesSchemes ใน Info.plist ของแอพ

การแชร์องค์ประกอบพื้นหลัง

ตัวอย่างโค้ดต่อไปนี้จะส่งองค์ประกอบที่เป็นรูปภาพเลเยอร์พื้นหลังไปยัง Instagram เพื่อให้ผู้ใช้สามารถแก้ไขและเผยแพร่ไปยัง Instagram Stories ของตนได้

- (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 Stories

คุณยังสามารถอนุญาตให้ผู้ใช้แอพแชร์เนื้อหาของคุณในรูปแบบสตอรี่บน Facebook ได้อีกด้วย โปรดเรียนรู้วิธีดำเนินการดังกล่าวนี้ที่เอกสารประกอบเกี่ยวกับการแชร์ไปยังสตอรี่ของ Facebook