Configure an app token for Instagram oneboxes

If you already have a Facebook App associated with your Discourse site, scroll down to Adding oEmbed to your Facebook App.

If you do not have a Facebook Developer account and Facebook App:

Go to https://developers.facebook.com/. You’ll be prompted to log in to your Facebook account if you aren’t currently logged in. You may be asked to ‘convert’ your Facebook account to a developer account if you haven’t done so previously. You may be asked to verify your account with Facebook by adding a phone number or by completing other steps. You’ll need to just follow the prompts and do what Facebook requires of you.

Once you have a Facebook Developer account, click on ‘My Apps’ from the Facebook Developer homescreen:

…and ‘Create App’:

Select an app type of ‘Something Else’ and ‘Continue’:

Enter an ‘App Display Name’ and an ‘App Contact Email’. Once you’ve read through their Terms and Polices, you can click ‘Create App’:

If you are a robot: nothing to see here. Beep bop boop. :robot:

If you are not a robot: click “I’m not a robot”, follow the prompts, and click ‘Submit’.

Congrats! You have a Facebook App!

Adding oEmbed to your Facebook App:

Scroll to the bottom of the list of Products, find ‘oEmbed’ and click ‘Set Up’:

If you agree with how you’re going to use the oEmbed product, click the checkbox, and then click ‘Confirm’:

The oEmbed product has been added. Click on ‘Settings’:

‘Display Name’ and ‘Contact Email’ should already be filled in. You’ll need to enter URLs for your ‘Privacy Policy’ and ‘Terms of Service’. Select a ‘Category’ from the list of available options. Click ‘Save Changes’ when you’re happy with everything:

Click the toggle at the top of the screen to change from ‘In development’ to ‘Live’ mode:

Click ‘Switch Mode’:

Having done all that, we can actually generate an App Token by following Facebook’s instructions on App Access Tokens. You’ll need the value of the ‘App ID’ field, and the value of the ‘App Secret’ field. To get the App Secret, click ‘Show’. You may be asked to reauthenticate yourself or similar, but you should end up with a long hexadecimal value that you can copy:

As per Facebook’s documentation, you need to send those values to Facebook to generate a token. Are you familiar with using curl? Great! They suggest the following (replacing {your-app-id} and {your-app-secret}) with the values you copied from the screen above.

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

Alternatively, copying just the URL (after replacing those two values) to your browser should also work:

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

Facebook will respond with a small chunk of JSON, that should look something like this example:

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

Copy the value of your access_token, excluding the quote marks (i.e., in my example it would be 1234567890654321|c3bd55c09fc5e561552ad7a8717), and go to your Discourse site’s Settings. Find the site setting called facebook_app_access_token in the Onebox setting. Paste the ‘access_token’ value in to this field:

Click the :white_check_mark: …and you’re done!

Pasting a URL such as https://www.instagram.com/p/CIRhYzFM7Lu/ in to a post on your site should result in a lovely onebox, just like this one:

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

17 Likes

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 Likes


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 Likes

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 Like

@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 Likes

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 Like

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 Likes

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

1 Like

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 Likes

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 Likes

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 Likes

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 Like

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 Like

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 Like

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 Likes