Instagram is one of the most popular social media in the world, So people would love to show the Instagram feed on the website. Many people who use Facebook, use Instagram also. People post their pictures and short videos of a good and bad time.

We who are authors, bloggers, authors run our site to share our thoughts and information. We also seek to collect information, inspire people for their works. Occasionally we need to add our Instagram feed to our blog or web.

I will teach you how to bring Instagram feed to our blog, especially the ghost blog. Here is some method that you need to follow to reveal the feed in your website.

1. Create a Facebook app

First, you need to create a Facebook app linked to Instagram. If you have the app created already then just add product “Instagram Basic Display” into your Facebook app.  Here following the process to create a Facebook app.

  1. Login to your personal Facebook account.
  2. Then go to https://developers.facebook.com/ and click on My Apps and then Add a New App.

How to add Instagram feed on ghost theme?

You will get 3 options there, select the option For Everything Else

02 create an app id facebook Themeix

Now add App Display NameContact Email.

step by step instagram facebook app tutorial Themeix

Go to the Settings > Basic  and then add App Domain, Privacy Policy URL, Terms of Service URL, App Icon, Category etc.

facebook app Themeix

Finally set your APP live.  ( Note : Please add a platform to your app. You may add website there )

2. Create an access token

To create an Instagram access token you have to follow the below steps:

From the App Dashboard, find the products Insagram  Basic Display and click Setup.

instagram basic display product facebook Themeix

Click Basic Display, scroll to the bottom of the page, then click Create New App.

0 KGhGTarBiENfuNT0 Themeix

Now, inside Display Name field, enter the name of the Facebook app you just created.

Next fill up the  Valid OAuth Redirect URIs, Deauthorize Callback URL, Data Deletion Request URL.  If you unsure about that then just put your website URL there.

fb developer Themeix

Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.

0 0X1qHPDJ5jy2TYVO Themeix

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

instagram accept Themeix

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

To get your Access token Open Facebook Developer Dashboard once again, then Select Instagram Basic Display > Basic Display  and locate User Token Generator section. You will see Generate Token Buton there. Click Generate Token and type your Facebook password if required.  You will get your Instagram Access Token. Save that token for the future.

3. Setup Instafeed.js for Instagram Feed

Copy instafeed.min.js to your ghost theme js folder, and include the script tag in your theme. Normally js locates in theme default.hbs file in most of the ghost theme.

4.Display Usage

Replace your-token to your Instagram Access token

Now it will reveal the Instagram feed. This way, you’ll get the Instagram feed in any ghost theme.

This is it, guys! Now, you can enjoy your Instagram feeds onto your Ghost theme. The total process seems to look a bit complicated for the beginners / entry-level developer. But if you follow this tutorial carefully then you might get success.

If you face any problems, drop your comment in the comment section below or you can contact us for any other issues. We are available for custom web development work too. So feel free to share your ideas with us if you have any.

Leave a Comment

No Comment