Compartilhar no Stories

Você pode integrar o compartilhamento aos seus apps Android e iOS para que os usuários compartilhem o seu conteúdo como um story do Instagram. Para criar um novo app, consulte Introdução ao SDK do Facebook para Android e Introdução ao SDK do Facebook para iOS.

Desde janeiro de 2023, é preciso fornecer um ID do app do Facebook para compartilhar conteúdo no Instagram Stories. Para ver mais informações, consulte Introducing an important update to Instagram Sharing to Stories. Se você não fornecer um ID do app, os usuários verão a mensagem de erro "The app you shared from doesn't currently support sharing to Stories" (O app de origem não é compatível com o compartilhamento nos Stories) ao tentar compartilhar conteúdos no Instagram. Para encontrar o ID do app, consulte Obter o ID do aplicativo (Android) e Obter o ID do app (iOS).

Visão geral

Ao usar os intents implícitos do Android e os esquemas de URL personalizados do iOS, o app pode enviar fotos, vídeos e figurinhas para o app do Instagram. O app do Instagram recebe o conteúdo e faz o carregamento no Compositor de Stories para que o usuário possa publicá-lo no Instagram Stories.

O Compositor de Stories do app do Instagram é formado por uma camada de fundo e uma camada de figurinha.

Camada de fundo

A camada de fundo preenche a tela, e você pode personalizá-la com uma foto, um vídeo, uma cor sólida ou gradiente.

Camada de figurinha

A camada de figurinha pode conter uma imagem e pode ser ainda mais personalizada pelo usuário no Compositor de Stories.

Desenvolvedores do Android

As implementações do Android usam intents implícitos para iniciar o app do Instagram e transferir conteúdo para ele. Em geral, o fluxo de compartilhamento deve incluir estas ações:

  1. Instanciar um intent implícito com o conteúdo que você quer transferir para o app do Instagram.
  2. Iniciar uma atividade e verificar se ela pode resolver o intent implícito.
  3. Resolver a atividade, se ele puder.

Dados

Os dados a seguir são enviados quando você usa o Compartilhar no Stories.

ConteúdoTipoDescrição

ID do app do Facebook

String

Seu ID do app do Facebook

Ativo de plano de fundo

Uri

Uri para um ativo de imagem (JPG, PNG) ou de vídeo (H.264, H.265, WebM). Dimensões mínimas 720 x 1.280. As proporções de imagem recomendadas são 9:16 ou 9:18. Os vídeos podem ser de 1.080p e ter até 20 segundos de duração. O Uri precisa ser um Uri de conteúdo para um arquivo local do dispositivo. É preciso enviar um ativo de plano de fundo, um ativo de figurinha ou ambos.

Ativo de figurinha

Uri

Uri para um ativo de imagem (JPG, PNG). Dimensões recomendadas: 640 x 480. A imagem aparece como uma figurinha sobre o plano de fundo. O Uri precisa ser um Uri de conteúdo para um arquivo local do dispositivo. É preciso enviar um ativo de plano de fundo, um ativo de figurinha ou ambos.

Cor superior da camada de fundo

String

Um valor de cor de string hexadecimal usado em conjunto com o valor de cor inferior da camada de fundo. Caso os valores sejam iguais, a camada de fundo será uma cor sólida. Se forem diferentes, eles serão usados para criar um gradiente. Se você especificar um ativo de plano de fundo, o ativo será usado, e o valor será ignorado.

Cor inferior da camada de fundo

String

Um valor de cor de string hexadecimal usado em conjunto com o valor de cor superior da camada de fundo. Caso os valores sejam iguais, a camada de fundo será uma cor sólida. Se forem diferentes, eles serão usados para criar um gradiente. Se você especificar um ativo de plano de fundo, o ativo será usado, e o valor será ignorado.

Como compartilhar um ativo de fundo

O exemplo de código a seguir envia uma imagem ao Instagram para que o usuário possa publicá-la nos 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);
}  

Como compartilhar um ativo de figurinha

Este exemplo envia um ativo de imagem com camada de figurinha e um conjunto de cores de fundo para o Instagram. Caso você não especifique as cores da camada de fundo, o padrão 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);
}

Como compartilhar um ativo de plano de fundo e um ativo de figurinha

Este exemplo envia um ativo de imagem com camada de fundo e um com camada de figurinha para o 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);
}

Desenvolvedores do iOS

As implementações do iOS usam um esquema de URL personalizado para iniciar o app do Instagram e transferir conteúdo para ele. Em geral, o fluxo de compartilhamento deve incluir estas ações:

  1. Verificar se o seu app pode resolver o esquema de URL personalizada do Instagram.
  2. Atribuir o conteúdo que você deseja compartilhar com o pasteboard.
  3. Resolver o esquema de URL personalizada se o app puder fazer isso.

Dados

Os dados a seguir são enviados quando você usa o Compartilhar no Stories.

ConteúdoTipoDescrição

ID do app do Facebook

NSString *

Seu ID do app do Facebook

Ativo de imagem de plano de fundo

NSData *

Os dados para um ativo de imagem em formato compatível (JPG, PNG). Dimensões mínimas 720 x 1.280. As proporções de imagem recomendadas são 9:16 ou 9:18. É preciso transferir para o app do Instagram um ativo de plano de fundo (imagem ou vídeo), um ativo de figurinha ou ambos.

Ativo de plano de fundo de vídeo

NSData *

Os dados para o ativo de vídeo em um formato compatível (H.264, H.265, WebM). Os vídeos podem ser de 1.080p e ter até 20 segundos de duração. Recomenda-se que tenham menos de 50 MB. É preciso transferir para o app do Instagram um ativo de plano de fundo (imagem ou vídeo), um ativo de figurinha ou ambos.

Ativo de figurinha

NSData *

Os dados para um ativo de imagem em formato compatível (JPG, PNG). Dimensões recomendadas: 640 x 480. A imagem aparece como uma figurinha sobre o plano de fundo. É preciso transferir para o app do Instagram um ativo de plano de fundo (imagem ou vídeo), um ativo de figurinha ou ambos.

Cor superior da camada de fundo

NSString *

Um valor de cor de string hexadecimal usado em conjunto com o valor de cor inferior da camada de fundo. Caso os valores sejam iguais, a camada de fundo será uma cor sólida. Se forem diferentes, eles serão usados para criar um gradiente.

Cor inferior da camada de fundo

NSString *

Um valor de cor de string hexadecimal usado em conjunto com o valor de cor inferior da camada de fundo. Caso os valores sejam iguais, a camada de fundo será uma cor sólida. Se forem diferentes, eles serão usados para criar um gradiente.

Registrar esquema de URL personalizado do Instagram

É preciso registrar o esquema de URL personalizado antes que o app possa usá-lo. Adicione instagram-stories à chave LSApplicationQueriesSchemes no Info.plist do app.

Como compartilhar um ativo de fundo

O exemplo de código a seguir envia um ativo de imagem com camada de fundo ao Instagram para que o usuário possa fazer edições e publicá-lo nos 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
  }
} 

Como compartilhar um ativo de figurinha

Este exemplo de código mostra como transferir para o app do Instagram um ativo de imagem com camada de figurinha e um conjunto de cores de fundo. Caso você não especifique as cores da camada de fundo, o padrão 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
  }
}

Como compartilhar um ativo de fundo e um ativo de figurinha

Este exemplo de código mostra como transferir para o app do Instagram um ativo de imagem com camada de fundo e um com camada de figurinha.

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

Como compartilhar com o Facebook Stories

Você também pode permitir que os usuários do app compartilhem o seu conteúdo como uma história do Facebook. Para saber como fazer isso, consulte a documentação sobre Compartilhamento no Stories.