Membagikan ke Cerita

Anda dapat mengintegrasikan bagikan ke aplikasi Android dan iOS Anda sehingga pengguna dapat membagikan konten video ke Instagram Stories. Untuk membuat aplikasi baru, lihat Memulai Facebook SDK untuk Android dan Memulai Facebook SDK untuk iOS.

Mulai Oktober 2022, Anda harus menyediakan ID Aplikasi Facebook untuk membagikan konten ke Instagram Stories. Untuk informasi selengkapnya, lihat Memperkenalkan pembaruan penting untuk Membagikan ke Cerita di Instagram. Jika Anda tidak menyediakan ID Aplikasi, pengguna Anda melihat pesan kesalahan "Aplikasi yang Anda bagikan saat ini tidak mendukung membagikan ke Cerita" ketika mereka mencoba membagikan konten mereka ke Instagram. Untuk menemukan ID Aplikasi Anda, lihat <Mendapatkan ID Aplikasi Anda (Android) dan Mendapatkan ID Aplikasi Anda (iOS).

Ringkasan

Dengan menggunakan Niat Implisit Android dan Skema URL Khusus iOS, aplikasi dapat mengirimkan foto, video, dan stiker ke aplikasi Instagram. Aplikasi Instagram menerima konten ini dan memuatnya dalam komposer cerita agar Pengguna dapat menerbitkannya ke Instagram Stories.

Komposer cerita aplikasi Instagram terdiri dari layer latar belakang dan layer stiker.

Layer Latar Belakang

Layer latar belakang mengisi layar dan Anda dapat menyesuaikannya dengan foto, video, warna solid, atau gradasi warna.

Layer Stiker

Layer stiker dapat berisi gambar dan dapat disesuaikan lebih lanjut oleh Pengguna dalam penulis cerita.

Developer Android

Implementasi Android menggunakan niat implisit untuk meluncurkan aplikasi Instagram dan meneruskan konten. Secara umum, alur bagikan harus:

  1. Menginstansiasikan niat implisit dengan konten yang ingin diteruskan ke aplikasi Instagram.
  2. Memulai aktivitas dan memastikan dapat menyelesaikan niat implisit.
  3. Menyelesaikan aktivitas jika mampu.

Data

Anda mengirimkan data berikut saat Anda membagikan ke Cerita.

KontenJenisDeskripsi

ID Aplikasi Facebook

String

ID Aplikasi Facebook Anda.

Aset latar belakang

URI

URI ke aset gambar (JPG, PNG) atau aset video (H.264, H.265, WebM). Dimensi minimal 720x1280. Rekomendasi rasio gambar: 9:16 atau 9:18. Video bisa 1080p dan durasinya maksimal 20 detik. URI harus berupa URI konten untuk file lokal di perangkat. Anda harus mengirimkan aset latar belakang, aset stiker, atau keduanya.

Aset stiker

URI

URI ke aset gambar (JPG, PNG). Rekomendasi dimensi: 640x480. Gambar ini akan muncul sebagai stiker di latar belakang. URI harus berupa URI konten untuk file lokal di perangkat. Anda harus mengirimkan aset latar belakang, aset stiker, atau keduanya.

Warna teratas layer latar belakang

String

Nilai warna string hex yang digunakan bersama dengan nilai warna bawah layer latar belakang. Jika kedua nilai ini sama, layer latar belakang adalah warna solid. Jika berbeda, kedua nilai ini akan digunakan untuk membuat gradasi. Jika Anda menentukan aset latar belakang, aset tersebut digunakan dan nilai ini diabaikan.

Warna bawah layer latar belakang

String

Nilai warna string hex yang digunakan bersama dengan nilai warna teratas layer latar belakang. Jika kedua nilai ini sama, layer latar belakang adalah warna solid. Jika berbeda, kedua nilai ini akan digunakan untuk membuat gradasi. Jika Anda menentukan aset latar belakang, aset tersebut digunakan dan nilai ini diabaikan.

Membagikan Aset Latar Belakang

Contoh kode berikut mengirimkan aset gambar ke Instagram sehingga pengguna dapat menerbitkannya ke 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);
}  

Membagikan Aset Stiker

Contoh ini mengirimkan aset gambar layer stiker dan satu set warna layer latar belakang ke Instagram. Jika Anda tidak menentukan warna layer latar belakang, warna layer latar belakang adalah #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);
}

Membagikan Aset Latar Belakang dan Aset Stiker

Contoh ini mengirimkan aset gambar layer latar belakang dan aset gambar layer stiker ke 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);
}

Developer iOS

Implementasi iOS menggunakan skema URL khusus untuk meluncurkan aplikasi Instagram dan meneruskan konten. Secara umum, alur bagikan harus:

  1. Periksa bahwa aplikasi Anda dapat menyelesaikan skema URL khusus Instagram.
  2. Menetapkan konten yang ingin dibagikan ke papan tempel.
  3. Menyelesaikan skema URL khusus jika aplikasi mampu.

Data

Anda mengirimkan data berikut saat Anda membagikan ke Cerita.

KontenJenisDeskripsi

ID Aplikasi Facebook

NSString *

ID Aplikasi Facebook Anda.

Aset gambar latar belakang

NSData *

Data untuk aset gambar pada format yang didukung (JPG, PNG). Dimensi minimal 720x1280. Rekomendasi rasio gambar: 9:16 atau 9:18. Anda harus meneruskan aset latar belakang (gambar atau video), aset stiker, atau keduanya ke aplikasi Instagram.

Aset video latar belakang

NSData *

Data untuk aset video dalam format yang didukung (H.264, H.265, WebM). Video bisa 1080p dan durasinya maksimal 20 detik. Rekomendasi: di bawah 50 MB. Anda harus meneruskan aset latar belakang (gambar atau video), aset stiker, atau keduanya ke aplikasi Instagram.

Aset stiker

NSData *

Data untuk aset gambar pada format yang didukung (JPG, PNG). Rekomendasi dimensi: 640x480. Gambar ini akan muncul sebagai stiker di latar belakang. Anda harus meneruskan aset latar belakang (gambar atau video), aset stiker, atau keduanya ke aplikasi Instagram.

Warna teratas layer latar belakang

NSString *

Nilai warna string hex yang digunakan bersama dengan nilai warna bawah layer latar belakang. Jika kedua nilai ini sama, layer latar belakang adalah warna solid. Jika berbeda, kedua nilai ini akan digunakan untuk membuat gradasi.

Warna bawah layer latar belakang

NSString *

Nilai warna string hex yang digunakan bersama dengan nilai warna bawah layer latar belakang. Jika kedua nilai ini sama, layer latar belakang adalah warna solid. Jika berbeda, kedua nilai ini akan digunakan untuk membuat gradasi.

Mendaftarkan Skema URL Khusus Instagram

Anda perlu mendaftarkan skema URL khusus Instagram sebelum aplikasi Anda menggunakannya. Tambahkan instagram-stories ke kode LSApplicationQueriesSchemes di Info.plist aplikasi Anda.

Membagikan Aset Latar Belakang

Contoh kode berikut mengirimkan aset gambar layer latar belakang ke Instagram sehingga pengguna dapat mengedit dan menerbitkannya ke 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
  }
} 

Membagikan Aset Stiker

Contoh kode ini menunjukkan cara meneruskan aset gambar layer stiker dan satu set warna layer latar belakang ke aplikasi Instagram. Jika Anda tidak menentukan warna layer latar belakang, warna layer latar belakang adalah #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
  }
}

Membagikan Aset Latar Belakang dan Aset Stiker

Contoh kode ini menunjukkan cara meneruskan aset gambar layer latar belakang dan aset gambar layer stiker ke aplikasi 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
  }
}

Membagikan ke Facebook Stories

Anda juga dapat mengizinkan Pengguna aplikasi membagikan konten Anda sebagai Facebook Stories. Untuk mempelajari cara melakukannya, baca Dokumentasi Bagikan ke Cerita di Facebook.