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.

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.

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.

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.

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.

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

Copy the access token or store it.

Add Instagram Feed Block: #

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

Settings/Options: #

Sidebar Settings: #

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

Instagram Settings: #

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

Also you can set the time for cache the data.

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.

Layout Settings: #

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

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.

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.