Loading...

Instructions

To begin, you'll need to create a Facebook App linked to Instagram and add yourself as a test user. Here's how to get started:

  1. Create a Facebook Account: Ensure you have an active Facebook account.
  2. Register as a Meta Developer: Visit Meta Developer (https://developers.facebook.com) and register as a developer.

Follow the instructions in the Facebook Meta documentation to complete your registration. Once registered, you'll gain access to the App Dashboard, along with various products, SDKs, APIs, development tools, and developer documentation.

After registering as a Meta developer, log in to your Meta Developer account. From the main navigation menu, select "MyApp" to access your App Dashboard.

You will need to create a Facebook App linked to Instagram, and add yourself as a test user. Start by clicking the "Create App" green button.

You should see a new screen with the question What do you want your app to do? Select "Other" and click the "Next" button:

In the "Select an app type" screen, select "Consumer" and click "Next".

Add some details about your app.

  1. Add an app name that will appear in the app dashboard.
  2. Add a contact email that Meta will use to contact you about your app.
  3. Click the "Create App" button. You will be redirected to the app dashboard.

Add the Instagram product to your app by following these steps:

  1. Scroll until you see the Instagram Basic Display product. Instagram Basic Display will allow your Meta App to access the Instagram Basic Display API, which provides read-only access to basic data from your Instagram account.
  2. Click the "Set up" button.

Instagram Basic Display is added to the left-side menu under Products:

Scroll to the bottom of the page and click Create New App. In the form that appears, complete each section using the guidelines below.

  • Display Name: Enter the name of the Facebook app you just created (Astral Memories Widget Feed). Then click Create app.
  • Valid OAuth Redirect URIs: https://instafeedwidget.freewebtools.net/authenticate_generate_token.php
  • Deauthorize Callback URL: https://instafeedwidget.freewebtools.net
  • Data Deletion Request Callback URL: https://instafeedwidget.freewebtools.net

Click the "Save changes" button.

Navigate to App roles > Roles and click the "Add People" button.

Under the "Additional roles for this app" section, select the "Instagram Tester" option and enter your Instagram account's username.

Click the "Add" button to send the invitation. You should see the word "Pending" next to the Instagram Tester.

Open a new web browser and go to www.instagram.com and sign into your Instagram account that you just invited. Navigate to (Profile Icon) > Edit Profile > Website permissions -> Apps and Websites > Tester Invites and accept the invitation.

Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode.

To authenticate the Test User, you will need to construct the Authorization Window URL below, replacing {app-id} with your Instagram app's ID (from the App Dashboard > Products > Instagram > Basic Display > Instagram App ID field) and {redirect-uri} with your website URL that you provided in the "Valid OAuth Redirect URIs" field. The URL must be exactly the same.

For example:

https://api.instagram.com/oauth/authorize
?client_id=684477648739411
&redirect_uri=https://instafeedwidget.freewebtools.net/authenticate_generate_token.php
&scope=user_profile,user_media
&response_type=code

Use the form below to easily generate an Authorization Window URL.

Use this form to easily generate an Authorization Window URL. Provide your Instagram App ID (from the App Dashboard > Products > Instagram > Basic Display > Instagram App ID field) and submit the form, a new browser window will open with the generated Authorization Window URL. This window will display your Instagram username, the app's name, and a description of the permissions being requested by the app.


After submitting your Instagram App ID, an Authorization Window will open in a new tab requesting permission for your Facebook application to access your Instagram profile information and content. Simply click "Allow" to proceed.


If the authorization is successful, the Authorization Window will redirect you to the specified redirect URI (instafeedwidget.freewebtools.net/authenticate_generate_token.php), passing the generated Authorization Code via the code query string parameter. The Authenticate Generate Token page will capture this code and use it to exchange for a short-lived Instagram User Access Token, which is essential for generating the Instagram Widget Embed code.

Once you've granted permission for your Facebook application to access your Instagram profile information and content, you'll be redirected to the “Token Generator” page in a new tab (instafeedwidget.freewebtools.net/authenticate_generate_token.php). The generated Authorization Code will be passed via the code query string parameter. The “Token Generator” page will automatically capture the authorization code and append it to the form on the page, which you will then use to exchange for a short-lived Instagram User Access Token.

To generate your Short-lived Access Token, complete the form by entering your Instagram App ID and Instagram App Secret, which can be found under App Dashboard > Products > Instagram > Basic Display > Instagram App ID and Instagram App Secret. Then, click the “Generate Short-lived Access Token” button.

Now you can relax while the process is handled automatically!

The Token Generator page will first exchange your Authorization Code for a Short-Lived Instagram User Access Token. Once completed, you'll see the message "The request was successful," along with your User ID and the newly generated Short-Lived Instagram User Access Token.

Next, the Token Generator page will use your User ID to retrieve your Instagram account username. You'll see the message "The request was successful," along with your User ID and Instagram username.

Now with your Instagram account username and the generated Short-Lived Instagram User Access Token, the Token Generator page is ready to exchange your Short-Lived Token for a Long-Lived Token.

You'll see the message "The request was successful," along with the new generated Long-Lived Access Token.

This Long-Lived Access Token is valid for 60 days. After this period, you'll need to repeat the process to obtain a new Long-Lived Access Token.


After saving your Instagram account username and Long-Lived Access Token, you're all set to generate the embed code for your Instagram Feed Widget.

Click the “Go to the Embed Code Generator” button to be redirected to the Embed Code page, where your Long-Lived Access Token will be automatically added to the form.

You're just one click away from getting your Insta Feed Widget Embed Code. Your Long-Lived Access Token is already set in the form—simply click the "Generate Embed Code" button to proceed.

Head to the Embed Code section of the page to grab your Insta Feed Widget Embed Code!

Click the “Copy embed code to Clipboard” button, and you're all set to embed your Instagram posts on your website. The code includes HTML and CSS styles, which you can easily customize to match your website's design.

Don't forget to scroll down to view a live demo of your new Insta Feed Widget in action!

For users who donate $5 or more, I offer an automatic token management service. With my custom script, I'll ensure your unexpired Long-Lived Instagram User Access Token is refreshed before it expires, keeping your Insta Feed Widget running smoothly. This service covers a full year, so you won't have to worry about manually renewing tokens. Once you've donated, I'll add your token to my automated script, and it will be refreshed seamlessly throughout the year.

To get started, scan the QR code or click the button to visit my PayPal donation page. In the "Message to recipient" field, be sure to include your Instagram username and your unexpired Long-Lived Instagram User Access Token. I'll take care of the rest, ensuring your token is refreshed automatically for a full year!

View Example
Donate

Copyright © 2024 Insta Feed Widget
Designed By HTML Codex
Distributed By: ThemeWagon