Настройка токена приложения для Instagram oneboxes

:warning: Важные обновления с момента написания этого руководства:

  1. Теперь требуется проверка приложения. С сентября 2021 года Meta требует, чтобы ваше приложение прошло проверку приложения и было одобрено для разрешения oEmbed Read (теперь называемого Meta oEmbed Read для приложений, созданных после 8 апреля 2025 года). Без этого вызовы API oEmbed не будут работать. См. руководство Meta по подаче заявки на проверку приложения для советов по получению одобрения.

  2. Onebox для Instagram может отображаться некорректно. По состоянию на 3 ноября 2025 года Meta удалила поля thumbnail_url, thumbnail_width, thumbnail_height и author_name из ответов Instagram oEmbed. Код onebox для Instagram в Discourse в настоящее время зависит от этих полей (lib/onebox/engine/instagram_onebox.rb), что может привести к неработающим или пустым вставкам.

  3. Поддерживаются только URL-адреса постов и IGTV. В настоящее время Discourse поддерживает создание onebox только для URL-адресов Instagram /p/ (пост) и /tv/ (IGTV). URL-адреса Reels (/reel/) не поддерживаются.

  4. Интерфейс консоли разработчика Facebook значительно изменился с момента создания скриншотов ниже в декабре 2020 года. Общие шаги остаются похожими, но точные экраны и параметры могут выглядеть иначе.


Если у вас уже есть приложение Facebook, связанное с вашим сайтом Discourse, прокрутите страницу вниз до раздела Добавление oEmbed в ваше приложение Facebook.

Если у вас нет учетной записи разработчика Facebook и приложения Facebook:

Перейдите на https://developers.facebook.com/. Если вы не вошли в систему, вам будет предложено войти в свою учетную запись Facebook. Вас могут попросить «преобразовать» вашу учетную запись Facebook в учетную запись разработчика, если вы этого еще не сделали. Вас могут попросить подтвердить свою учетную запись Facebook, добавив номер телефона или выполнив другие действия. Вам нужно просто следовать инструкциям и делать то, что требует Facebook.

После создания учетной записи разработчика Facebook нажмите «Мои приложения» на домашней странице разработчика Facebook:

…и «Создать приложение»:

Выберите тип приложения «Что-то другое» и нажмите «Продолжить»:

Введите «Отображаемое имя приложения» и «Контактный email приложения». После прочтения их Условий использования и Политики конфиденциальности вы можете нажать «Создать приложение»:

Если вы робот: здесь нечего смотреть. Бип боп буп. :robot:

Если вы не робот: нажмите «Я не робот», следуйте инструкциям и нажмите «Отправить».

Поздравляем! У вас есть приложение Facebook!

Добавление oEmbed в ваше приложение Facebook:

Прокрутите список продуктов вниз, найдите «oEmbed» и нажмите «Настроить»:

Если вы согласны с тем, как вы будете использовать продукт oEmbed, установите флажок, а затем нажмите «Подтвердить»:

Продукт oEmbed добавлен. Нажмите «Настройки»:

«Отображаемое имя» и «Контактный email» уже должны быть заполнены. Вам нужно будет ввести URL-адреса для вашей «Политики конфиденциальности» и «Условий использования». Выберите «Категорию» из списка доступных параметров. Нажмите «Сохранить изменения», когда будете довольны всем:

Переключите переключатель в верхней части экрана, чтобы изменить режим с «В разработке» на «В эфире»:

Нажмите «Переключить режим»:

Отправьте свое приложение на проверку (требуется с 2021 года):

Прежде чем ваше приложение сможет получить доступ к API oEmbed в рабочей среде, вы должны отправить его на проверку приложения и запросить разрешение oEmbed Read (или Meta oEmbed Read для приложений, созданных после 8 апреля 2025 года).

  1. В панели управления вашим приложением перейдите в раздел Проверка приложенияРазрешения и функции.
  2. Найдите oEmbed Read (или Meta oEmbed Read) и нажмите Запросить.
  3. Возможно, вам сначала нужно будет выполнить успешный тестовый вызов API, прежде чем кнопка запроса станет активной. Это может занять до 24 часов после вашего первого вызова API.
  4. При отправке укажите URL-адрес на вашем сайте Discourse, содержащий вставку Instagram, и объясните, что ваш сайт использует программное обеспечение форума Discourse для вставки постов Instagram с помощью API oEmbed.

См. документацию Meta по oEmbed для подробных инструкций по подаче заявки.

Сгенерируйте токен доступа вашего приложения:

Сделав все это, мы можем сгенерировать токен приложения, следуя инструкциям Facebook по токенам доступа приложения. Вам понадобятся значения полей «ID приложения» и «Секрет приложения». Чтобы получить секрет приложения, нажмите «Показать». Вас могут попросить повторно пройти аутентификацию или выполнить аналогичные действия, но в итоге вы получите длинное шестнадцатеричное значение, которое можно скопировать:

Согласно документации Facebook, вам нужно отправить эти значения в Facebook для генерации токена. Вы знакомы с использованием curl? Отлично! Они предлагают следующее (замените {your-app-id} и {your-app-secret} на значения, скопированные с экрана выше).

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

Альтернативно, копирование только URL-адреса (после замены этих двух значений) в ваш браузер также должно сработать:

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

Facebook ответит небольшим фрагментом JSON, который должен выглядеть примерно так:

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

Скопируйте значение вашего access_token, исключив кавычки (т. е. в моем примере это было бы 1234567890654321|c3bd55c09fc5e561552ad7a8717), и перейдите к настройкам вашего сайта Discourse. Найдите настройку сайта с именем facebook_app_access_token в настройках Onebox. Вставьте значение access_token в это поле:

Нажмите :white_check_mark: …и готово!

Вставка URL-адреса, такого как https://www.instagram.com/p/CIRhYzFM7Lu/, в сообщение на вашем сайте должна привести к появлению красивого onebox, точно так же, как этот:

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

17 лайков

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 лайков


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 лайка

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 лайк

@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 лайка

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 лайк

Quick Question: Did the process change to be “Instagram Basic Display” or I’m very very blind? Because I can’t see the oEmbed option, the closest by definition I’m supposing it’s the Instagram Basic Display.

Quoting:

Instagram Basic Display allows apps to access the Instagram Basic Display API, which provides read-only access to basic data in app users’ Instagram accounts.

Use this tab to configure the API’s authorization window so you can get permissions from users, and to submit your app for App Review when you are ready to switch it to Live Mode.

Note that Basic Display is not an authentication tool . Data returned by the API cannot be used to authenticate your app users or log them into your app. If your app uses API data to authenticate users, it will be rejected during App Review. If you need an authentication solution, use Facebook Login instead.

It, whoever, requires other URLs that are not listed here so I’m not sure, ie:

Client OAuth Setting

Deauthorize Callback URL


(Also maybe there is something that changed because it doesn’t work here I think?)

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

3 лайка

far as i can tell it’s still oEmbed read with advanced access

1 лайк

I see. There is a difference with the tutorial, then.

Instead of being added like any other feature (called “Products” in the UI) from the Dashboard it is now requested from the “Request” section of the “App Review” menu. You select the feature and submit it to review.

Which makes the process kind of loophole-ish because they request a link with a valid oEmbed to approve it… but it doesn’t work because the feature isn’t approved… :sweat:

4 лайка

It works on my account now. I’ll try to summarise with what you need. I’m not particularly techie so I’m not sure I can answer many questions, but I suppose just copy my settings as close as possible to check it all works.

You need both facebook login (I don’t know if instagram graph API is actually needed). Check facebook login works on your discourse installation

Facebook login settings:

Basic settings:

Advanced settings:

3 лайка

Heya folks, wanted to let ya’ll know that as of today, @Iceman’s description remains accurate.

Some of the page layouts have been modified from the guide (:point_up:), but the primary different is oEmbed must be requested after your app has passed the App Review.

From the “App Review” menu, you may make requests:

Screenshot from 2022-04-05 10-52-19

My app hasn’t passed App Review, but @undasein was able to get it working recently, with help from this guide and advice from facebook graph api - Starting using Instagram oEmbed feature - Stack Overflow.


Good luck sharing your `grams, folks! :slight_smile:

3 лайка

In my request, I did nothing elaborate. I just wrote “I’d like to embed Instagram posts on my forum” and it was approved in one day.

1 лайк

How can i access the advanced oembed read? i am not even able to request it because the button is disabled. I did some api on the graph, but the nothing happens even with the 24 hours

Some users have gotten around this by submitting the app for review for a different reason (such as Facebook login), and once it is approved some features are able to be requested, such as “Oembed Read”.

You may want to reach out to the platform support channels to understand what is happening with your account. :+1:

1 лайк

oEmbed no longer exists, what do I put it in instead?

I can’t see the Oembed option, which one did you choose?

Has your app passed the App Review yet @danielabc?

1 лайк

when I go to the option, the button is off, and I can’t click

when I go to the option, the button is off, and I can’t click

My access was revoked because it wasn’t used for 90 days. Which means, I think, that nobody on my forum posted an Instagram link recently.

So, here’s the current status of the oEmbed Read permission:

image

To request advanced access to this permission, you need to make a successful test API call. It may take up to 24 hours after the first API call for this button to become active. Learn about testing

How in practice do we do an API call with Discourse in this context to request advanced access again? :thinking:

2 лайка