Instagram Feed Block

This block display your Instagram Feed as beautiful Gallery.

Create Access Token: #

First of all you need to create access token to display Instagram feed in your page.

Create Account & App: #

Make sure you have a Facebook developer account. If you don’t have a developer account please create a new one.

Also you have to create an app from developer account.

Configure Basic Display: #

In your app dashboard, click on Set up button of Instagram Basic Display.

Instagram Feed- Setup Basic Display
Instagram Feed- Setup Basic Display

After click on Set up button and scroll down to the very bottom of the page, you can see Create New App button. Click on the button, you will see a popup, Enter App ID name and click on Create App.

Instagram Feed- Create Basic Display App
Instagram Feed- Create Basic Display App
Instagram Feed- Create Basic Display App ID
Instagram Feed- Create Basic Display App ID

Get Access Token #

Now you have to add tester user and generate access token.

Go to Basic Display and scroll, after some scroll you will see Add or Remove Instagram Testers button under user Token Generator area.

Click on that button.

Instagram Feed- Add Testers
Instagram Feed- Add Testers

After clicking Button you will moved to Roles option. Here scroll down to the bottom and you will see Add Instagram Testers Button under Instagram Testers.

Click on that button, enter your username and select your account as tester user and submit.

Instagram Feed- Add Testers
Instagram Feed- Add Testers
Instagram Feed- Add Tester User
Instagram Feed- Add Tester User

Now login to your Instagram account and Navigate to Settings->Apps and Websites. Also go to the Tester Invites.

Accept the tester invite from your app.

Instagram Feed- Accept Tester Invites
Instagram Feed- Accept Tester Invites

Go back to your App Dashboard then Basic Display. And scroll, after some scroll you will see Generate Token button under User Token Generator.

Instagram Feed- Generate Token
Instagram Feed- Generate Token

Copy the access token or store it.

Instagram Feed- Copy Token
Instagram Feed- Copy Token

Add Instagram Feed Block: #

In your Gutenberg editor, find the Instagram Feed block and insert, just like others block.

Add Instagram Feed
Add Instagram Feed

Settings/Options: #

Sidebar Settings: #

Select the block, you will see the settings option in the right sidebar. There are the settings.

Instagram Feed- Sidebar Settings
Instagram Feed- Sidebar Settings

Instagram Settings: #

You have to enter the access token that you have generated.

Also you can set the time for cache the data.

Instagram Feed- Instagram Settings
Instagram Feed- Instagram Settings

Feed Settings: #

Here you can set the number of item visible.

And also can show/hide profile, upload profile image, show/hide follow button, enable/disable link, set link opening tab, show/hide caption and load more.

Instagram Feed- Feed Settings
Instagram Feed- Feed Settings

Layout Settings: #

In Layout settings, you can set the column number for difference devices. Define gap between column and row.

Instagram Feed- Layout Settings
Instagram Feed- Layout Settings

Feed Style: #

Switch to Style Tab and you can see the Feed Style Options.

You can change the background, padding and border of the Feed.

Instagram Feed- Feed Style
Instagram Feed- Feed Style

Image & Caption Style: #

In Image style you can change different effect in hover.

And in Caption style you can change style/type, background overlay, typography and color of caption.

Instagram Feed- Image & Caption Style
Instagram Feed- Image & Caption Style

Powered by BetterDocs

Leave Reply Comments

Your email address will not be published.

  • X