Product Launch Event - 20% Off for 500 Early Birds

Instagram Feed

This feature will be optimized the next time

In this tutorial, you will learn how to add an Instagram feed to your Bricks Website which will sync with Instagram each time you upload anything to Instagram it will automatically show up on your WordPress Bricks Website

Demonstration

Tutorials

Make sure that you use different Facebook and Instagram accounts during this integration.

For instance:

The Facebook account was created by the email address: abc@gmail.com

The Instagram account was created by the email address: example@gmail.com

Step 1: Configure Instagram Basic Display

Log in and create an App on Meta for Developer URL: https://developers.facebook.com/

 

Click on “My Apps” > “Create Apps

 

Choose the Consumers option for “Select Application Type“.

Currently, this feature just works for only this type.

Add Instagram Basic Display product

 

Afterward, click on “Create New App” to activate the Instagram Basic Display.

Open simultaneously another Browser Tab.

Go to Dashboard > Piotnet Bricks Panel > Settings > Integration > Instagram Integration

Copy the Authorized redirect URL.

After creating an app, click on Instagram Basic Display > Basic Display tab to get your IDs.

There are three essential elements to connect Piotnet Bricks Settings.

  1. Instagram App ID corresponds to the Client ID (You should save it)
  2. Instagram App Secret Key corresponds to the Client Secret (You should save it)
  3. Valid OAuth Redirect ULR (App OAuth Settings): Embed the Authorized Redirect URL of Piotnet Bricks Integration Settings. For example, https://piotnetbricks.com/wp-admin/admin.php

Then fill out other required fields:

  • Deauthorize the callback URL (Deauthorize): for example, https://piotnetbricks.com/wp-admin
  • Data Deletion Request URL (Data Deletion Requests): for example, https://piotnetbricks.com/wp-admin

> Click on Save changes.

Step 2: Implement Instagram Tester

Scroll to the User Token Generator > Create a new one by clicking on “Add or Remove Instagram Tester“, the Profile page will be redirected immediately.

In the Role tab > Instagram Trial User > Add Instagram Testers > fill out your Username here.

Enter the username of the Instagram account you want to add

Then you need to verify the access by logging in Instagram URL: https://www.instagram.com/accounts/manage_access/

Step 3: Finalize Instagram Integration

Embed the Client ID and Client Secret (in the first above step) to PAFE Instagram Integration Settings > Save Settings

Click on Authorize button > confirm the integration allowance.

Step 4: Customize in the Editor

In the Search box, find the Instagram Feed element, drop and drag to the Editor Area.

You can easily customize the detail elements of the Instagram Feed feature by editing it > Content/Style Tab.

  • LAYOUT
  • LIGHTBOX STYLE
  • BUTTON STYLE
  • ICONS STYLE
  • STYLE TAB