Compartir en historias

Puedes integrar la función de compartir en tus apps para Android y iOS para permitir a los usuarios compartir tu contenido como historias de Instagram. Para crear una app nueva, consulta Primeros pasos con el SDK de Facebook para Android y Primeros pasos con el SDK de Facebook para iOS.

Información general

Gracias a los intents implícitos de Android y los esquemas de URL personalizadas, tu app puede enviar fotos, videos y stickers a la app de Instagram. La app de Instagram recibe este contenido y lo carga en el editor de historias para que el usuario pueda publicarlo en Instagram Stories.

El editor de historias de la app de Instagram está compuesto por una capa de fondo y una capa de sticker. Capa de fondo La capa de fondo cubre la pantalla y puedes personalizarla con una foto, un video, un color sólido o un degradado de color. Capa de sticker La capa de sticker puede contener una imagen, y el usuario puede personalizarla aún más mediante el editor de historias.

Desarrolladores de Android

Las implementaciones de Android utilizan intents implícitos para iniciar la app de Instagram y pasarle contenido. En general, los pasos del flujo para compartir son los siguientes:

1. Crear una instancia de un intent implícito con el contenido que quieres pasar a la app de Instagram.
2. Iniciar una actividad y comprobar que puede resolver el intent implícito.
3. Resolver la actividad, si es posible.

Datos

Los siguientes datos se envían cuando compartes contenido en historias.

Compartir un activo de fondo

El siguiente ejemplo de código envía una imagen a Instagram para que el usuario pueda publicarla en 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);
}  

Compartir un activo de sticker

Este ejemplo envía un activo de imagen de capa de sticker y un conjunto de colores de capas de fondo a Instagram. Si no especificas los colores de la capa de fondo, el color será #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);
}

Compartir un activo de fondo y un activo de sticker

Este ejemplo envía un activo de imagen de capa de fondo y un activo de imagen de capa de sticker a 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);
}

Desarrolladores de iOS

Las implementaciones de iOS utilizan un esquema de URL personalizada para iniciar la app de Instagram y pasarle contenido. En general, los pasos del flujo para compartir son los siguientes:

1. Verificar que la app pueda resolver el esquema de URL personalizada de Instagram.
2. Asignar el contenido que quieres compartir al área de pegado.
3. Resolver el esquema de URL personalizada, si la app tiene capacidad para hacerlo.

Datos

Los siguientes datos se envían cuando compartes contenido en historias.

Registrar el esquema de URL personalizada de Instagram

Debes registrar el esquema de URL personalizada de Instagram antes de que lo use la app. Agrega instagram-stories a la clave LSApplicationQueriesSchemes en la Info.plist de la app.

Compartir un activo de fondo

El siguiente ejemplo de código envía un activo de imagen de capa de fondo a Instagram para que el usuario pueda editarlo y publicarlo en 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
  }
} 

Compartir un activo de sticker

En este código de ejemplo, se muestra cómo pasar a la app de Instagram un activo de imagen de capa de sticker y un conjunto de colores de capa de fondo. Si no especificas los colores de la capa de fondo, el color será #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
  }
}

Compartir un activo de fondo y un activo de sticker

En este código de ejemplo, se muestra cómo pasar a la app de Instagram un activo de imagen de capa de fondo y un activo de imagen de capa de sticker.

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

Compartir en Facebook Stories

También puedes permitir que los usuarios de la app compartan contenido en una historia de Facebook. Para obtener información, consulta nuestra documentación sobre cómo compartir en Facebook Stories.