Brilliant Instagram Feed Synchronization

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

Detailed Tutorials to sync Instagram Feed

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 Feed Display

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

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 1

Click on “My Apps” > “Create Apps”

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 2

Choose the “Consumers” option for “Select Application Type”.

*Currently, this feature just works for only this type.

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 3

Add “Instagram Basic Display” product in the next step.

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 4
Add Instagram Basic Display

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

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 5

Open simultaneously another Browser Tab.

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

Copy the “Authorized redirect URL”

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 6
Instagram Integration of Piotnet Bricks

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 store it)
  2. “Instagram App Secret Key” corresponds to the “Client Secret” (You should store 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
how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 7

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”

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 8

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.

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 9

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

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 10

Enter the username of the Instagram account you want to add

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 11

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

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 12

Step 3: Finalize Instagram Feed Integration

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

Click on Authorize button > confirm the integration allowance.

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 15
how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 15
Confirmation notification of Instagram

Step 4: Customize in the Editor

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

how to sync Instagram feed with Piotnet Bricks Addons Plugin illustration 16

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

Related Addons Elements

Recommendation:

To diversify query or apply filters, you can refer to Piotnet Grid. It possibly fulfills your advanced Grid Layout or combine Facets to filter Bricks Query Loop.