Compartir en historias

Puedes integrar el uso compartido en tus aplicaciones para iOS y Android a fin de que los usuarios puedan compartir tu contenido como una historia de Instagram. Para crear una nueva aplicación, consulta Introducción al SDK de Facebook para Android e Introducción al SDK de Facebook para iOS.

Información general

Si usas los intentos implícitos de Android y los esquemas de URL personalizados de iOS, tu aplicación puede enviar fotos, vídeos y stickers a la aplicación de Instagram. La aplicación 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 aplicación de Instagram está formado por una capa de fondo y una capa de sticker. Capa de fondo La capa de fondo rellena la pantalla y se puede personalizar con una foto, un vídeo, un color sólido o un gradiente de color. Capa de sticker La capa de sticker puede contener una imagen y el usuario puede personalizarla más en el editor de historias.

Desarrolladores de Android

Las implementaciones de Android utilizan los intentos implícitos para iniciar la aplicación Instagram y pasarle contenido. En general, el proceso de compartir debe ser el siguiente:

1. Crea una instancia de un intento implícito con el contenido que quieres pasar a la aplicación Instagram.
2. Inicia una actividad y comprueba que puede resolver el intento implícito.
3. Resuelve la actividad si es posible.

Datos

Al compartir contenido en historias, envías los siguientes datos.

Compartir un activo de fondo

En el siguiente ejemplo de código, se 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

En este ejemplo, se envía un activo de imagen de capa de sticker y un conjunto de colores de capa de fondo a Instagram. Si no especificas los colores de la capa de fondo, el color de la capa de fondo es #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

En este ejemplo, se 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 personalizado para iniciar la aplicación de Instagram y pasar contenido. En general, el proceso para compartir contenido debe ser el siguiente:

1. Comprueba que tu aplicación pueda resolver el esquema de URL personalizado de Instagram.
2. Asigna el contenido que quieres compartir en el pasteboard.
3. Resuelve el esquema de URL personalizado si tu aplicación puede hacerlo.

Datos

Al compartir contenido en historias, envías los siguientes datos.

Registrar el esquema de URL personalizado de Instagram

Tienes que registrar el esquema de URL personalizado de Instagram antes de que la aplicación lo utilice. Añade instagram-stories a la clave LSApplicationQueriesSchemes en el archivo Info.plist de tu aplicación.

Compartir un activo de fondo

En el siguiente ejemplo de código, se 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 ejemplo de código, se muestra cómo pasar a la aplicación 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 de la capa de fondo es #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 ejemplo de código, se muestra cómo pasar a la aplicación 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 tu aplicación compartan tu contenido como una historia de Facebook. Para obtener información sobre cómo hacerlo, consulta nuestra documentación sobre la función Compartir en historias de Facebook.