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.
- Login to your personal Facebook account.
- Then go to https://developers.facebook.com/ and click on My Apps and then Add a New App.
You will get 3 options there, select the option For Everything Else
Now add App Display Name, Contact Email.
Go to the Settings > Basic and then add App Domain, Privacy Policy URL, Terms of Service URL, App Icon, Category etc.
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.
Click Basic Display, scroll to the bottom of the page, then click Create New App.
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.
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.
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.
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.
No Comment