Teilen in Stories

Du kannst die Möglichkeit zum Teilen in deine Android- und iOS-Apps integrieren, sodass Nutzer*innen deine Inhalte als Instagram Story teilen können. Informationen zum Erstellen einer neuen App findest du unter Erste Schritte mit dem Facebook-SDK für Android und Erste Schritte mit dem Facebook-SDK für iOS.

Übersicht

Deine App kann mit impliziten Intents unter Android und individuellen URL-Schemata unter iOS Fotos, Videos und Sticker an die Instagram-App senden. Die Instagram-App empfängt diese Inhalte und lädt sie in das Story-Eingabefeld, sodass der*die Nutzer*in sie in seinen*ihren Instagram-Stories veröffentlichen kann.

Das Story-Eingabefeld der Instagram-App besteht aus einer Hintergrundebene und einer Sticker-Ebene. Hintergrundebene Die Hintergrundebene füllt den Bildschirm aus. Sie kann mit einem Foto, Video, einer Farbe oder einem Farbverlauf individuell gestaltet werden. Sticker-Ebene Die Sticker-Ebene kann ein Bild enthalten. Außerdem kann die Ebene durch den Nutzer im Story-Eingabefeld weiter angepasst werden.

Android-Entwickler*innen

Android-Implementierungen verwenden implizite Intents zum Starten der Instagram-App und Weitergeben von Inhalten. Grundsätzlich sollte dein Teilen-Vorgang Folgendes bewirken:

1. Instanziieren eines impliziten Intents mit dem Content, der an die Instagram-App übergeben werden soll
2. Starten einer Aktivität und Prüfen, ob sie den impliziten Intent auflösen kann
3. Auflösen der Aktivität, sofern möglich

Daten

Beim Teilen in Stories sendest du folgende Daten:

Teilen eines Hintergrundelements

Der folgende Beispielcode sendet ein Bild an Instagram, sodass der*die Nutzer*in es in seinen*ihren Instagram Stories veröffentlichen kann.

// 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);
}  

Teilen eines Sticker-Elements

Dieser Beispielcode sendet ein Stickerebenen-Bildelement und diverse Farben der Hintergrundebene an Instagram. Wenn du die Farben für die Hintergrundebene nicht angibst, hat die Hintergrundebene die Farbe #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);
}

Teilen eines Hintergrundelements und eines Sticker-Elements

Dieser Beispielcode sendet ein Hintergrundebenen-Bildelement und ein Stickerebenen-Bildelement an 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-Entwickler*innen

iOS-Implementierungen verwenden ein individuelles URL-Schema zum Starten der Instagram-App und Weitergeben von Inhalten. Grundsätzlich sollte dein Teilen-Vorgang Folgendes bewirken:

1. Prüfen, ob deine App das individuelle URL-Schema von Instagram auflösen kann
2. Zuweisen des Contents, der mit dem Pasteboard geteilt werden soll
3. Auflösen des individuellen URL-Schemas, sofern möglich

Daten

Beim Teilen in Stories sendest du folgende Daten:

Registrieren des individuellen URL-Schemas von Instagram

Du musst das individuelle URL-Schema von Instagram registrieren, damit deine App es nutzen kann. Füge instagram-stories dem Schlüssel LSApplicationQueriesSchemes in der Info.plist deiner App hinzu.

Teilen eines Hintergrundelements

Der folgende Beispielcode sendet ein Hintergrundebenen-Bildelement an Instagram, sodass der*die Nutzer*in es bearbeiten und in seinen*ihren Instagram Stories veröffentlichen kann.

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

Teilen eines Sticker-Elements

Dieser Beispielcode zeigt, wie das Bildelement einer Sticker-Ebene und diverse Farben der Hintergrundebene an die Instagram-App übergeben werden. Wenn du die Farben für die Hintergrundebene nicht angibst, hat die Hintergrundebene die Farbe #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
  }
}

Teilen eines Hintergrundelements und eines Sticker-Elements

Dieser Beispielcode zeigt, wie das Bildelement einer Hintergrundebene und das Bildelement einer Sticker-Ebene an die Instagram-App übergeben werden.

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

Teilen in Facebook Stories

Du kannst den Nutzer*innen deiner App auch erlauben, deine Inhalte als Facebook-Story zu teilen. Weitere Informationen dazu findest du in unserer Facebook-Dokumentation zum Thema Teilen in Stories.