Configurar um token de aplicativo para oneboxes do Instagram

:warning: Atualizações importantes desde que este guia foi escrito originalmente:

  1. A Revisão de Aplicativos agora é obrigatória. Desde setembro de 2021, a Meta exige que seu aplicativo passe pela Revisão de Aplicativos e seja aprovado para a permissão oEmbed Read (agora chamada Meta oEmbed Read para aplicativos criados após 8 de abril de 2025). Sem isso, as chamadas da API oEmbed falharão. Consulte as orientações de envio para Revisão de Aplicativos da Meta para obter dicas sobre como ser aprovado.

  2. Os oneboxes do Instagram podem não ser renderizados corretamente. A partir de 3 de novembro de 2025, a Meta removeu os campos thumbnail_url, thumbnail_width, thumbnail_height e author_name das respostas oEmbed do Instagram. O código onebox do Instagram do Discourse depende atualmente desses campos (lib/onebox/engine/instagram_onebox.rb), o que pode resultar em embeds quebrados ou vazios.

  3. Apenas URLs de postagens e IGTV são suportadas. O Discourse atualmente só gera oneboxes para URLs de postagens /p/ (post) e /tv/ (IGTV) do Instagram. URLs de Reels (/reel/) não são suportadas.

  4. A interface do Console de Desenvolvedor do Facebook mudou significativamente desde que as capturas de tela abaixo foram tiradas em dezembro de 2020. As etapas gerais permanecem semelhantes, mas as telas e opções exatas podem parecer diferentes.


Se você já tem um Aplicativo do Facebook associado ao seu site Discourse, role para baixo até Adicionando o oEmbed ao seu Aplicativo do Facebook.

Se você não tem uma conta de Desenvolvedor do Facebook e um Aplicativo do Facebook:

Acesse https://developers.facebook.com/. Você será solicitado a fazer login em sua conta do Facebook se não estiver logado. Você pode ser solicitado a ‘converter’ sua conta do Facebook para uma conta de desenvolvedor se não o fez anteriormente. Você pode ser solicitado a verificar sua conta com o Facebook adicionando um número de telefone ou concluindo outras etapas. Você precisará apenas seguir as instruções e fazer o que o Facebook exigir de você.

Depois de ter uma conta de Desenvolvedor do Facebook, clique em ‘Meus Aplicativos’ na tela inicial do Desenvolvedor do Facebook:

…e em ‘Criar Aplicativo’:

Selecione um tipo de aplicativo ‘Outro’ (Something Else) e clique em ‘Continuar’ (Continue):

Insira um ‘Nome de Exibição do Aplicativo’ (App Display Name) e um ‘Email de Contato do Aplicativo’ (App Contact Email). Depois de ler os Termos e Políticas deles, você pode clicar em ‘Criar Aplicativo’ (Create App):

Se você for um robô: não há nada para ver aqui. Bip bop boop. :robot:

Se você não for um robô: clique em “Não sou um robô” (I’m not a robot), siga as instruções e clique em ‘Enviar’ (Submit).

Parabéns! Você tem um Aplicativo do Facebook!

Adicionando o oEmbed ao seu Aplicativo do Facebook:

Role até o final da lista de Produtos, encontre ‘oEmbed’ e clique em ‘Configurar’ (Set Up):

Se você concorda com a forma como usará o produto oEmbed, marque a caixa de seleção e clique em ‘Confirmar’ (Confirm):

O produto oEmbed foi adicionado. Clique em ‘Configurações’ (Settings):

‘Nome de Exibição’ (Display Name) e ‘Email de Contato’ (Contact Email) já devem estar preenchidos. Você precisará inserir URLs para sua ‘Política de Privacidade’ (Privacy Policy) e ‘Termos de Serviço’ (Terms of Service). Selecione uma ‘Categoria’ (Category) na lista de opções disponíveis. Clique em ‘Salvar Alterações’ (Save Changes) quando estiver satisfeito com tudo:

Clique no botão de alternância na parte superior da tela para mudar de ‘Em desenvolvimento’ (In development) para o modo ‘Ao vivo’ (Live):

Clique em ‘Mudar Modo’ (Switch Mode):

Envie seu aplicativo para Revisão de Aplicativos (obrigatório desde 2021):

Antes que seu aplicativo possa acessar a API oEmbed em produção, você deve enviá-lo para Revisão de Aplicativos e solicitar a permissão oEmbed Read (ou Meta oEmbed Read para aplicativos criados após 8 de abril de 2025).

  1. No painel do seu aplicativo, vá para Revisão de Aplicativos (App Review) → Permissões e Recursos (Permissions and Features).
  2. Encontre oEmbed Read (ou Meta oEmbed Read) e clique em Solicitar (Request).
  3. Você pode precisar primeiro fazer uma chamada de teste de API bem-sucedida antes que o botão de solicitação fique ativo. Pode levar até 24 horas após sua primeira chamada de API.
  4. Ao enviar, forneça um URL no seu site Discourse que contenha um embed do Instagram e explique que seu site usa o software de fórum Discourse para incorporar posts do Instagram usando a API oEmbed.

Consulte a documentação do oEmbed da Meta para obter orientações detalhadas de envio.

Gere seu Token de Acesso ao Aplicativo:

Tendo feito tudo isso, podemos gerar um Token de Aplicativo seguindo as instruções do Facebook sobre Tokens de Acesso ao Aplicativo. Você precisará do valor do campo ‘ID do Aplicativo’ (App ID) e do valor do campo ‘Segredo do Aplicativo’ (App Secret). Para obter o Segredo do Aplicativo, clique em ‘Mostrar’ (Show). Você pode ser solicitado a se reautenticar ou algo semelhante, mas deverá obter um longo valor hexadecimal que poderá copiar:

Conforme a documentação do Facebook, você precisa enviar esses valores ao Facebook para gerar um token. Você está familiarizado com o uso do curl? Ótimo! Eles sugerem o seguinte (substituindo {your-app-id} e {your-app-secret} pelos valores que você copiou da tela acima).

curl -X GET "https://graph.facebook.com/oauth/access_token?client_id={your-app-id}&client_secret={your-app-secret}&grant_type=client_credentials"

Alternativamente, copiar apenas o URL (após substituir esses dois valores) para o seu navegador também deve funcionar:

https://graph.facebook.com/oauth/access_token?client_id={your-app-id}&client_secret={your-app-secret}&grant_type=client_credentials

O Facebook responderá com um pequeno bloco de JSON, que deve se parecer com este exemplo:

{"access_token":"1234567890654321|c3bd55c09fc5e561552ad7a8717","token_type":"bearer"}

Copie o valor do seu access_token, excluindo as aspas (ou seja, no meu exemplo seria 1234567890654321|c3bd55c09fc5e561552ad7a8717), e vá para as Configurações do seu site Discourse. Encontre a configuração do site chamada facebook_app_access_token nas configurações do Onebox. Cole o valor do ‘access_token’ neste campo:

Clique no :white_check_mark: …e pronto!

Colar um URL como https://www.instagram.com/p/CIRhYzFM7Lu/ em uma postagem no seu site deve resultar em um onebox adorável, assim como este:

https://www.instagram.com/p/CIRhYzFM7Lu/

17 curtidas

New oEmbed Read Feature and App Review Requirements

Today, June 8, 2021, we announced v11.0 of the Graph API and Marketing APIs. With this update, there are new requirements to be able to access oEmbed APIs . Some of your apps currently access the oEmbed APIs and might be affected by these changes.

To continue accessing the oEmbed APIs, you will have to submit your apps for review by September 6th, 2021 . If you want to request new access to the oEmbed APIs, you will also need to submit your app(s) for review.

To learn more, please review the updated requirements. If your apps haven’t been reviewed for the oEmbed API feature by September 6, 2021, your apps will lose access to this feature. To avoid disruption to your apps’ oEmbed access, please submit for App Review as soon as possible.

New rules from our Facebook overlords, I’ve just submitted both of my apps for review. I found a public post with an Instagram embed and linked directly to show how the integration works. Hopefully this is sufficient.

8 curtidas


womp womp, review failed.

here’s what i submitted

Your submission details

Is a Facebook reviewer able to access or login to your app to verify you’re using permissions or features according to Facebook Platform Policy?

Yes

Platform Settings

Desktop

Site URL:https://fixed.org.au/

No account needed

  1. Visit The 'what you've done to your bike today' thread - #10218 by jaseyjase - Post your ride - FOA
  2. The instagram post is embeded in the page. The site is running Discourse forum software (https://discourse.org/)

Oembed Read

Tell us how you’re using this permission or feature

Discourse (https://discourse.org/) can embed Instagram and Facebook posts in community posts, it keeps people on our website while richly embedding content

Oembed URL

The 'what you've done to your bike today' thread - #10218 by jaseyjase - Post your ride - FOA

I just resubmitted (had some extra text in Oembed URL) and it’s been approved!!! :smiley: waiting for my second app to be…

3 curtidas

The text looks the same as in your initial review submit. Can you elaborate on what extra information you provided compared to the failed review?

In addition: Did you pass FB login data to the forum or not?

1 curtida

@znedw my question still stands, if you can help everyone with some insight on this please?

The first review failed because I had some extra text in the Oembed URL field and the form removes spaces onsubmit, so the URL didn’t work… That’s the only difference between attemps

Nope, in the Platform section (I had to add a platform in the wizard), I just wrote

No account needed

I didn’t really want to setup a discourse account just for FB review, so I just found a post on our forum that was public, and had an Instagram image embedded. I thought this would show how the integration functions well enough. I guess FB could read the discourse source and work it out themselves :man_shrugging:

Sorry I missed this. I literally did no changes to either forum, just found a forum post with an instagram pic embedded as mentioned above and then walked through the app review wizard on FB

3 curtidas

Hi @znedw, I followed your guide and got our app review approved 24 hours later.

Although, I had to enter the direct link to the embedded Instagram post into the oEmbed-URL field as the form did not accept the link to the topic on our domain in that field. Maybe they changed that part.

For the rest, I followed exactly your wording. And it worked.

1 curtida

Pergunta Rápida: O processo mudou para ser “Instagram Basic Display” ou eu estou muito, muito cego? Porque não consigo ver a opção oEmbed, o mais próximo por definição que eu suponho que seja o Instagram Basic Display.

Citando:

O Instagram Basic Display permite que os aplicativos acessem a API do Instagram Basic Display, que fornece acesso somente leitura a dados básicos nas contas do Instagram dos usuários do aplicativo.

Use esta guia para configurar a janela de autorização da API para que você possa obter permissões dos usuários e para enviar seu aplicativo para Revisão de Aplicativo quando estiver pronto para mudar para o Modo Ativo.

Observe que o Basic Display não é uma ferramenta de autenticação. Os dados retornados pela API não podem ser usados para autenticar os usuários do seu aplicativo ou fazer login neles. Se o seu aplicativo usar dados da API para autenticar usuários, ele será rejeitado durante a Revisão de Aplicativo. Se você precisar de uma solução de autenticação, use o Login do Facebook em vez disso.

Ele, no entanto, requer outras URLs que não estão listadas aqui, então não tenho certeza, por exemplo:

Configuração OAuth do Cliente

URL de Callback de Desautorização


(Também talvez algo tenha mudado porque não funciona aqui, eu acho?)

https://www.instagram.com/p/CIRhYzFM7Lu

3 curtidas

pelo que posso dizer, ainda é oEmbed read com acesso avançado

1 curtida

Entendi. Há uma diferença em relação ao tutorial, então.

Em vez de ser adicionado como qualquer outro recurso (chamado de "Produtos" na interface do usuário) no Painel, agora ele é solicitado na seção "Solicitar" do menu "Revisão do aplicativo". Você seleciona o recurso e o envia para revisão.

O que torna o processo meio que uma brecha, porque eles solicitam um link com um oEmbed válido para aprová-lo… mas não funciona porque o recurso não foi aprovado… :sweat:

4 curtidas

Agora funciona na minha conta. Tentarei resumir o que você precisa. Não sou particularmente entendido em tecnologia, então não tenho certeza se consigo responder a muitas perguntas, mas suponho que você possa copiar minhas configurações o mais próximo possível para verificar se tudo funciona.

Você precisa de login do Facebook (não sei se a API do Instagram Graph é realmente necessária). Verifique se o login do Facebook funciona na sua instalação do Discourse

Configurações de login do Facebook:

Configurações básicas:

Configurações avançadas:

3 curtidas

Olá a todos, queria avisar que a partir de hoje, a descrição do @Iceman permanece precisa.

Alguns layouts de página foram modificados em relação ao guia (:point_up:), mas a principal diferença é que o oEmbed deve ser solicitado depois que seu aplicativo for aprovado na Revisão do Aplicativo.

No menu “Revisão do Aplicativo”, você pode fazer solicitações:

Meu aplicativo ainda não passou pela Revisão do Aplicativo, mas o @undasein conseguiu fazê-lo funcionar recentemente, com a ajuda deste guia e conselhos de https://stackoverflow.com/questions/67998234/starting-using-instagram-oembed-feature.


Boa sorte compartilhando seus `grams, pessoal! :slight_smile:

3 curtidas

Na minha solicitação, não fiz nada elaborado. Apenas escrevi “Gostaria de incorporar posts do Instagram no meu fórum” e foi aprovado em um dia.

1 curtida

Como posso acessar o oembed read avançado? Nem consigo solicitá-lo porque o botão está desativado. Fiz algumas chamadas de API no gráfico, mas nada acontece mesmo após 24 horas

Alguns usuários contornaram isso enviando o aplicativo para revisão por um motivo diferente (como login do Facebook) e, uma vez aprovado, alguns recursos podem ser solicitados, como “Oembed Read”.

Você pode querer entrar em contato com os canais de suporte da plataforma para entender o que está acontecendo com sua conta. :+1:

1 curtida

[quote=“Jamie Wilson, post:1, topic:223548, username:jamie.wilson”]noEmbed
[/quote]

oEmbed não existe mais, em que devo colocá-lo em vez disso?

[quote=“Iceman, post:10, topic:223548, username:Iceman”]Instagram Basic Display
[/quote]

Não consigo ver a opção oEmbed, qual você escolheu?

Seu aplicativo já passou na Revisão de Aplicativos, @danielabc?

1 curtida

quando vou para a opção, o botão está desativado e não consigo clicar

quando vou para a opção, o botão está desativado e não consigo clicar

Meu acesso foi revogado porque não foi usado por 90 dias. O que significa, acho, que ninguém no meu fórum postou um link do Instagram recentemente.

Então, aqui está o status atual da permissão de Leitura oEmbed:

Para solicitar acesso avançado a esta permissão, você precisa fazer uma chamada de API de teste bem-sucedida. Pode levar até 24 horas após a primeira chamada de API para que este botão fique ativo. Saiba mais sobre testes

Como, na prática, fazemos uma chamada de API com Discourse neste contexto para solicitar acesso avançado novamente? :thinking:

2 curtidas