In a previous post of ours, we mentioned the changes that Instagram had brought to their API and how we were adopting the changes. In this article, we’re going to provide a detailed process on how one can display Instagram feed via tags with our Catch Instagram Feed Gallery & Widget Pro plugin on your website.
First of all, in order to display the Instagram feed via tags, you need to own a Facebook page and you need to switch your Instagram account into a Business account. You need to link both of these accounts. After linking both accounts, it is now time to register your Facebook App. In order to set up your own Facebook app, follow the below-mentioned steps.
Head over to developers.facebook.com and log in using your personal Facebook credentials. Note that you cannot log in to the Developer site using a Facebook page or a Business account.
And if you’re visiting the developer section for the first time, then make sure you register yourself first. Accept the Facebook terms, select your country and enter your phone number. Facebook, then, will send you a confirmation code to verify your account.
Once you’ve been registered as a developer, head over to ‘My Apps’ section and click on ‘Add a New App’.
Enter your Display Name, provide a contact email address and click on the ‘Create App ID’ button.
Now, it is time to get your App ID. Clicking on the ‘Basic’ tab via Settings drop down will take you to a section where you will be provided with you App ID and App Secret.
Enter your email address, a link to your website terms or privacy policy and select a category. Hit the ‘Save Changes’ button once you’re done.
Now click on Add product button, click on Facebook Login Setup, following screen will show up then select Web. After that go to added Facebook Login product’s settings and here paste in the Instagram settings page full URL of your website in Valid OAuth Redirect URIs and click Save.
Similarly, add Instagram product, and go to Instagram settings, in App Review Section there are four different permissions. The first one instagram_basic – click Add to Submission and click Save.
Head back to the app Dashboard and click on the ‘Off’ button in the top right in order to switch your app from developer mode to live. Setting your app live is a completely optional step. You can just leave the app in developer mode if you don’t want to set it live.
Your app is officially live now, next, visit the settings page and copy your app information, i.e. App ID and App Secret.
Now, visit our Catch Instagram Feed Gallery & Widget Pro plugin’s setting page and enter your App ID and App Secret into the required field.
Once you’ve submitted the App ID and App Secret, you will now have to log in with Facebook. Click the ‘Log in with Facebook’ button.
A pop up will appear in order to grant your Facebook App to access profile and posts from the Instagram business connected to your page. Click on the ‘Ok’ but
Then, you will be taken back to Catch Instagram Feed Gallery & Widget Pro plugin’s setting page. There, you will see all the information provided—your App ID, App Secret, and your Business Access Token.
Now, click on your page to continue. After selecting your page, you will then be provided with your Instagram Business Account ID.
It is now time to display Instagram feed via tags on your website. Head over to Appearance > Widgets and drag-and-drop the Catch Instagram widget to the place where you want your Instagram feed to be displayed.
In the ‘Show Feed By’ drop down tab, select Tags and enter the tags that you want to display. You can also enter multiple tags and separate them with commas.
Save the widget once you’re done customizing.
Now that you know how, go ahead and update your Catch Instagram Feed Gallery & Widget Pro plugin to its latest version. Display Instagram feed via tags elegantly on your website with Catch Instagram Feed Gallery and Widget Pro plugin and make your website engaging and interesting!
If you have any questions, please feel free to drop us a line in the comments section below.