Configurer un jeton d'application pour les oneboxes Instagram

:warning: Mises à jour importantes depuis la rédaction de ce guide :

  1. La révision de l’application est désormais requise. Depuis septembre 2021, Meta exige que votre application passe par la Révision de l’application et soit approuvée pour l’autorisation oEmbed Read (maintenant appelée Meta oEmbed Read pour les applications créées après le 8 avril 2025). Sans cela, les appels à l’API oEmbed échoueront. Consultez les instructions de soumission pour la révision de l’application de Meta pour obtenir des conseils sur la façon d’être approuvé.

  2. Les oneboxes Instagram pourraient ne pas s’afficher correctement. Depuis le 3 novembre 2025, Meta a supprimé les champs thumbnail_url, thumbnail_width, thumbnail_height et author_name des réponses oEmbed d’Instagram. Le code de onebox Instagram de Discourse dépend actuellement de ces champs (lib/onebox/engine/instagram_onebox.rb), ce qui pourrait entraîner des intégrations cassées ou vides.

  3. Seules les URL de publication et d’IGTV sont prises en charge. Discourse ne gère actuellement les oneboxes que pour les URL Instagram /p/ (publication) et /tv/ (IGTV). Les URL Reels (/reel/) ne sont pas prises en charge.

  4. L’interface utilisateur de la console des développeurs Facebook a changé considérablement depuis que les captures d’écran ci-dessous ont été prises en décembre 2020. Les étapes générales restent similaires, mais les écrans et les options exacts peuvent sembler différents.


Si vous avez déjà une application Facebook associée à votre site Discourse, faites défiler jusqu’à Ajouter oEmbed à votre application Facebook.

Si vous n’avez pas de compte développeur Facebook ni d’application Facebook :

Rendez-vous sur https://developers.facebook.com/. Vous serez invité à vous connecter à votre compte Facebook si vous ne l’êtes pas actuellement. Il vous sera peut-être demandé de « convertir » votre compte Facebook en compte développeur si vous ne l’avez pas fait auparavant. Il vous sera peut-être demandé de vérifier votre compte auprès de Facebook en ajoutant un numéro de téléphone ou en effectuant d’autres étapes. Vous devrez simplement suivre les instructions et faire ce que Facebook vous demande.

Une fois que vous avez un compte développeur Facebook, cliquez sur « Mes applications » depuis l’écran d’accueil des développeurs Facebook :

…et « Créer une application » :

Sélectionnez un type d’application « Autre chose » et cliquez sur « Continuer » :

Entrez un « Nom d’affichage de l’application » et une « Adresse e-mail de contact de l’application ». Une fois que vous avez lu leurs conditions et politiques, vous pouvez cliquer sur « Créer une application » :

Si vous êtes un robot : rien à voir ici. Bip bop boup. :robot:

Si vous n’êtes pas un robot : cliquez sur « Je ne suis pas un robot », suivez les instructions et cliquez sur « Soumettre ».

Félicitations ! Vous avez une application Facebook !

Ajouter oEmbed à votre application Facebook :

Faites défiler jusqu’au bas de la liste des produits, trouvez « oEmbed » et cliquez sur « Configurer » :

Si vous êtes d’accord avec la façon dont vous allez utiliser le produit oEmbed, cochez la case, puis cliquez sur « Confirmer » :

Le produit oEmbed a été ajouté. Cliquez sur « Paramètres » :

Le « Nom d’affichage » et l’« E-mail de contact » devraient déjà être remplis. Vous devrez saisir les URL de votre « Politique de confidentialité » et de vos « Conditions d’utilisation ». Sélectionnez une « Catégorie » dans la liste des options disponibles. Cliquez sur « Enregistrer les modifications » lorsque vous êtes satisfait de tout :

Cliquez sur le commutateur en haut de l’écran pour passer du mode « En développement » au mode « Live » :

Cliquez sur « Changer de mode » :

Soumettre votre application pour la révision de l’application (obligatoire depuis 2021) :

Avant que votre application puisse accéder à l’API oEmbed en production, vous devez la soumettre à la Révision de l’application et demander l’autorisation oEmbed Read (ou Meta oEmbed Read pour les applications créées après le 8 avril 2025).

  1. Dans le tableau de bord de votre application, accédez à Révision de l’applicationAutorisations et fonctionnalités.
  2. Trouvez oEmbed Read (ou Meta oEmbed Read) et cliquez sur Demander.
  3. Vous pourriez avoir besoin d’effectuer d’abord un appel d’API de test réussi avant que le bouton de demande ne devienne actif. Cela peut prendre jusqu’à 24 heures après votre premier appel d’API.
  4. Lors de la soumission, fournissez une URL sur votre site Discourse qui contient une intégration Instagram, et expliquez que votre site utilise le logiciel de forum Discourse pour intégrer des publications Instagram à l’aide de l’API oEmbed.

Consultez la documentation oEmbed de Meta pour obtenir des instructions détaillées sur la soumission.

Générer votre jeton d’accès à l’application :

Après tout cela, nous pouvons réellement générer un jeton d’application en suivant les instructions de Facebook sur les jetons d’accès aux applications. Vous aurez besoin de la valeur du champ « ID de l’application » et de la valeur du champ « Secret de l’application ». Pour obtenir le Secret de l’application, cliquez sur « Afficher ». Il vous sera peut-être demandé de vous réauthentifier ou autre, mais vous devriez obtenir une longue valeur hexadécimale que vous pouvez copier :

Conformément à la documentation de Facebook, vous devez envoyer ces valeurs à Facebook pour générer un jeton. Êtes-vous familier avec l’utilisation de curl ? Excellent ! Ils suggèrent ce qui suit (remplacez {your-app-id} et {your-app-secret} par les valeurs que vous avez copiées depuis l’écran ci-dessus).

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

Alternativement, copier simplement l’URL (après avoir remplacé ces deux valeurs) dans votre navigateur devrait également fonctionner :

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

Facebook répondra avec un petit morceau de JSON, qui devrait ressembler à cet exemple :

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

Copiez la valeur de votre access_token, sans les guillemets (c’est-à-dire que dans mon exemple, ce serait 1234567890654321|c3bd55c09fc5e561552ad7a8717), et accédez aux Paramètres de votre site Discourse. Trouvez le paramètre de site appelé facebook_app_access_token dans les paramètres Onebox. Collez la valeur de l’« access_token » dans ce champ :

Cliquez sur la :white_check_mark: …et vous avez terminé !

Coller une URL telle que https://www.instagram.com/p/CIRhYzFM7Lu/ dans une publication sur votre site devrait donner une jolie onebox, comme celle-ci :

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

17 « J'aime »

Nouvelle fonctionnalité de lecture oEmbed et exigences de révision des applications

Aujourd’hui, le 8 juin 2021, nous avons annoncé la v11.0 des API Graph et Marketing. Avec cette mise à jour, de nouvelles conditions s’appliquent pour accéder aux APIs oEmbed . Certaines de vos applications accèdent actuellement aux APIs oEmbed et pourraient être affectées par ces modifications.

Pour continuer à accéder aux APIs oEmbed, vous devrez soumettre vos applications pour révision d’ici le 6 septembre 2021. Si vous souhaitez demander un nouvel accès aux APIs oEmbed, vous devrez également soumettre votre(s) application(s) pour révision.

Pour en savoir plus, veuillez consulter les exigences mises à jour. Si vos applications n’ont pas été révisées pour la fonctionnalité API oEmbed d’ici le 6 septembre 2021, elles perdront l’accès à cette fonctionnalité. Pour éviter toute interruption de l’accès oEmbed de vos applications, veuillez soumettre une demande de révision de l’application dès que possible.

Nouvelles règles émanant de nos seigneurs de Facebook ; je viens de soumettre mes deux applications pour révision. J’ai trouvé un post public contenant une intégration Instagram et j’ai lié directement pour montrer comment l’intégration fonctionne. J’espère que cela sera suffisant.

8 « J'aime »


Oups, la révision a échoué.

Voici ce que j’ai soumis :

Détails de votre soumission

Un examinateur de Facebook peut-il accéder ou se connecter à votre application pour vérifier que vous utilisez les autorisations ou les fonctionnalités conformément à la Politique de la plateforme Facebook?

Oui

Paramètres de la plateforme

Bureau

URL du site : https://fixed.org.au/

Aucun compte requis

  1. Visitez The 'what you've done to your bike today' thread - #10218 by jaseyjase - Post your ride - FOA
  2. La publication Instagram est intégrée dans la page. Le site utilise le logiciel de forum Discourse (https://discourse.org/)

Lecture Oembed

Expliquez comment vous utilisez cette autorisation ou fonctionnalité

Discourse (https://discourse.org/) permet d’intégrer des publications Instagram et Facebook dans les messages de la communauté, ce qui permet de garder les utilisateurs sur notre site tout en intégrant richement du contenu.

URL Oembed

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

Je viens de le renvoyer (il y avait du texte supplémentaire dans l’URL Oembed) et il a été approuvé !!! :smiley: en attente de mon deuxième dépôt…

3 « J'aime »

Le texte semble identique à celui de votre première soumission de critique. Pouvez-vous préciser quelles informations supplémentaires vous avez fournies par rapport à la critique ayant échoué ?

De plus : Avez-vous transmis ou non les données de connexion Facebook au forum ?

1 « J'aime »

@znedw ma question reste en suspens ; si vous pouvez aider tout le monde en apportant un éclairage sur ce sujet, je vous en prie ?

La première revue a échoué car j’avais du texte supplémentaire dans le champ Oembed URL et le formulaire supprime les espaces lors de la soumission, ce qui a rendu l’URL inutilisable… C’est la seule différence entre les tentatives.

Non, dans la section Plateforme (j’ai dû ajouter une plateforme dans l’assistant), j’ai simplement écrit :

Aucun compte nécessaire

Je ne voulais pas vraiment configurer un compte Discourse juste pour une revue Facebook, alors j’ai trouvé un post public sur notre forum contenant une image Instagram intégrée. Je pensais que cela suffirait à montrer comment l’intégration fonctionne. Je suppose que Facebook pourrait lire le code source de Discourse et le comprendre lui-même :man_shrugging:

Désolé, j’ai manqué cette question. Je n’ai littéralement apporté aucun changement à l’un ou l’autre des forums. J’ai simplement trouvé un post de forum avec une photo Instagram intégrée, comme mentionné ci-dessus, puis j’ai suivi l’assistant de revue d’application sur Facebook.

3 « J'aime »

Bonjour @znedw, j’ai suivi votre guide et notre demande de révision d’application a été approuvée 24 heures plus tard.

Cependant, j’ai dû saisir le lien direct vers le post Instagram intégré dans le champ « oEmbed-URL », car le formulaire n’acceptait pas le lien vers le sujet sur notre domaine dans ce champ. Peut-être ont-ils modifié cette partie.

Pour le reste, j’ai suivi exactement vos formulations. Et cela a fonctionné.

1 « J'aime »

Question rapide : Le processus a-t-il été modifié pour devenir « Instagram Basic Display » ou suis-je très très aveugle ? Parce que je ne vois pas l’option oEmbed, le plus proche par définition que je suppose est l’Instagram Basic Display.

En citant :

Instagram Basic Display permet aux applications d’accéder à l’API Instagram Basic Display, qui fournit un accès en lecture seule aux données de base des comptes Instagram des utilisateurs de l’application.

Utilisez cet onglet pour configurer la fenêtre d’autorisation de l’API afin d’obtenir les autorisations des utilisateurs, et pour soumettre votre application à App Review lorsque vous êtes prêt à la passer en mode Live.

Notez que Basic Display n’est pas un outil d’authentification. Les données renvoyées par l’API ne peuvent pas être utilisées pour authentifier vos utilisateurs ou les connecter à votre application. Si votre application utilise les données de l’API pour authentifier les utilisateurs, elle sera rejetée lors de l’examen de l’application. Si vous avez besoin d’une solution d’authentification, utilisez Facebook Login à la place.

Il, cependant, nécessite d’autres URL qui ne sont pas listées ici, donc je ne suis pas sûr, par exemple :

Paramètres OAuth du client

URL de rappel de désautorisation


(Peut-être aussi que quelque chose a changé car cela ne fonctionne pas ici, je pense ?)

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

3 « J'aime »

pour autant que je sache, il s’agit toujours de lecture oEmbed avec un accès avancé

1 « J'aime »

Je vois. Il y a donc une différence avec le tutoriel.

Au lieu d’être ajouté comme n’importe quelle autre fonctionnalité (appelée « Produits » dans l’interface utilisateur) depuis le Tableau de bord, il est maintenant demandé depuis la section « Demande » du menu « Examen de l’application ». Vous sélectionnez la fonctionnalité et la soumettez à l’examen.

Ce qui rend le processus un peu bancal car ils demandent un lien avec un oEmbed valide pour l’approuver… mais cela ne fonctionne pas car la fonctionnalité n’est pas approuvée… :sweat:

4 « J'aime »

Ça fonctionne maintenant sur mon compte. Je vais essayer de résumer ce dont vous avez besoin. Je ne suis pas particulièrement calé en technologie, donc je ne suis pas sûr de pouvoir répondre à de nombreuses questions, mais je suppose qu’il suffit de copier mes paramètres aussi fidèlement que possible pour vérifier que tout fonctionne.

Vous avez besoin de la connexion Facebook (je ne sais pas si l’API Instagram Graph est réellement nécessaire). Vérifiez que la connexion Facebook fonctionne sur votre installation Discourse.

Paramètres de connexion Facebook :

Paramètres de base :

Paramètres avancés :

3 « J'aime »

Salut tout le monde, je voulais vous informer qu’à partir d’aujourd’hui, la description de @Iceman reste exacte.

Certaines mises en page ont été modifiées par rapport au guide (:point_up:), mais la principale différence est que oEmbed doit être demandé après que votre application ait passé l’examen de l’application.

Depuis le menu « Examen de l’application », vous pouvez faire des demandes :

Mon application n’a pas encore passé l’examen de l’application, mais @undasein a réussi à la faire fonctionner récemment, avec l’aide de ce guide et des conseils de https://stackoverflow.com/questions/67998234/starting-using-instagram-oembed-feature.


Bonne chance pour le partage de vos `grams, tout le monde ! :slight_smile:

3 « J'aime »

Dans ma requête, je n’ai rien fait d’élaboré. J’ai juste écrit « J’aimerais intégrer des publications Instagram sur mon forum » et cela a été approuvé en un jour.

1 « J'aime »

Comment puis-je accéder à l’oembed read avancé ? Je ne peux même pas le demander car le bouton est désactivé. J’ai fait une API sur le graph, mais rien ne se passe même après 24 heures

Certains utilisateurs ont contourné ce problème en soumettant l’application à l’examen pour une autre raison (telle que la connexion Facebook), et une fois approuvée, certaines fonctionnalités peuvent être demandées, telles que « Oembed Read ».

Vous voudrez peut-être contacter les canaux de support de la plateforme pour comprendre ce qui se passe avec votre compte. :+1:

1 « J'aime »

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

oEmbed n’existe plus, par quoi dois-je le remplacer ?

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

Je ne vois pas l’option Oembed, laquelle avez-vous choisie ?

Votre application a-t-elle déjà passé l’examen de l’application @danielabc ?

1 « J'aime »

lorsque je vais dans l’option, le bouton est désactivé et je ne peux pas cliquer

lorsque je vais dans l’option, le bouton est désactivé et je ne peux pas cliquer

Mon accès a été révoqué car il n’a pas été utilisé pendant 90 jours. Ce qui signifie, je pense, que personne sur mon forum n’a récemment posté de lien Instagram.

Voici donc l’état actuel de la permission oEmbed Read :

Pour demander un accès avancé à cette permission, vous devez effectuer un appel API de test réussi. Il peut s’écouler jusqu’à 24 heures après le premier appel API pour que ce bouton devienne actif. En savoir plus sur les tests

Comment, en pratique, faisons-nous un appel API avec Discourse dans ce contexte pour demander à nouveau un accès avancé ? :thinking:

2 « J'aime »