Showcase Your Instagram Feed on Your Website with Instapeat.js Version 2

Showcase Your Instagram Feed on Your Website with Instapeat.js Version 2

Table of Contents

1. Introduction
2. Step 1: Creating an Initial Token from Facebook
3. Step 2: Setting Up Instagram Basic Display API
4. Step 3: Adding Instagram Testers
5. Step 4: Generating the Initial Token
6. Step 5: Deploying the Instagram Token Agent on Heroku
7. Step 6: Adding the Instagram Token to Your Website
8. Step 7: Basic Setup of the Instafeed
9. Customizing the Instafeed Template
10. Conclusion

Article Title: How to Use Instapeat.js Version 2 for Instagram Basic Display API

Introduction

In this guide, we will walk you through the process of using Instapeat.js version 2, which supports the new Instagram Basic Display API. We will cover each step, from creating an initial token to deploying the Instagram token agent on Heroku and integrating it into your website. By the end of this tutorial, you will be able to display your Instagram feed on your website with ease.

Step 1: Creating an Initial Token from Facebook

To start, you need to obtain an initial token from Facebook. Go to developer.facebook.com and create a Facebook Developer account if you don't have one already. Once you've created your account and verified it with your mobile number, click on "My Apps" and then "Create App." Give your app a unique name and click on "Create App ID."

Next, go to the Settings > Basic section and scroll down to find the "Add Platform" option. Choose "Website" and provide your website URL. Save the changes and proceed to the "Products" section.

Scroll down to find "Instagram Basic Display" and click on "Setup." Create a new app and fill in the required client settings, including the website URL. Save the changes.

To test your app, you need to add Instagram testers. Click on "Add or Remove Instagram Testers" and provide the usernames of the testers. Once added, the status will show as pending.

Now, log in to your Instagram account on instagram.com. Go to your profile, click on the settings icon, and choose "Apps and Websites." In the Test Invites section, accept the invite. Then, go back and click on "Instagram Basic Display."

Please note that you need to have a public Instagram account for this to work. It won't work with a private account. Click on "Generate Token," log in again, and authorize the app. Copy the initial token provided.

Step 2: Setting Up Instagram Basic Display API

The next step is to deploy the Instagram token agent on Heroku. Go to the provided link in the description and create a Heroku account if you don't have one. Verification requires a credit card, but running the agent is free.

Click on "Deploy to Heroku" and give your app a unique name. Choose your website, and make sure to add your website URL. Copy the app name as well.

Next, provide the token that you obtained from Facebook. Click on "Deploy app" and wait for the deployment to complete. You can find your app on your Heroku page. Open the app.

If you need to edit the values you have given, go to Settings and reveal the config variables. Here, you can edit the necessary information. Once done, go back to your app.

If everything was done correctly, you should see a script tag provided by the Heroku app. The token will be stored in a global constant called "instagram_token."

Step 3: Adding Instagram Testers

Before proceeding with the integration, you may want to add testers to ensure everything is working properly. To add Instagram testers, follow the previous step under "Step 1: Creating an Initial Token from Facebook."

Step 4: Generating the Initial Token

Now that you have your initial token, you can start integrating it into your website. The token will allow you to access your Instagram feed and display it on your website.

Step 5: Deploying the Instagram Token Agent on Heroku

To deploy the Instagram token agent on Heroku, refer to "Step 2: Setting Up Instagram Basic Display API" for detailed instructions and the provided link.

Step 6: Adding the Instagram Token to Your Website

To add the Instagram token to your website, you need to include the provided script and the Instafeed.min.js file in your project folder. The basic setup involves creating a div with the id "insta_feed" where your Instagram posts will be displayed.

In the script section, copy and paste the access token you obtained from Step 1. Replace it with the "instagram_token" constant in your webpage file. You can also customize the maximum number of posts displayed and the template.

Step 7: Basic Setup of the Instafeed

The basic setup for Instafeed involves adding the script provided by the Heroku app and the Instafeed.min.js file to your project. Create a div with the id "insta_feed" to contain your Instagram posts. Follow the detailed instructions in the previous step.

Customizing the Instafeed Template

You can customize the Instafeed template to match your website's design. By default, the template includes an anchor tag with the image and a div for the image overlay and title. You can modify the template to display captions and descriptions from your Instagram account.

Conclusion

By following these steps, you can easily use Instapeat.js version 2 with the Instagram Basic Display API to showcase your Instagram feed on your website. Remember to create an initial token, set up the Instagram Basic Display API, deploy the Instagram token agent on Heroku, and customize the Instafeed template to match your website's look and feel.

Highlights

• Easily display your Instagram feed on your website using Instapeat.js version 2
• Create an initial token from Facebook to access the Instagram Basic Display API
• Set up the Instagram Basic Display API and deploy the Instagram token agent on Heroku
• Customize the Instafeed template to match your website's design
• Showcase your Instagram posts with captions and descriptions

FAQ

Q: Can I use Instapeat.js version 2 with a private Instagram account? A: No, Instapeat.js version 2 only works with public Instagram accounts.

Q: Are there any costs associated with deploying the Instagram token agent on Heroku? A: No, the deployment of the Instagram token agent on Heroku is free.

Q: Can I customize the number of posts displayed on my website? A: Yes, you can customize the maximum number of posts displayed in the Instafeed script.

Q: Can I modify the template to include additional information from my Instagram account? A: Yes, you can modify the template to display captions and descriptions from your Instagram account.

Q: Is it possible to add multiple Instagram testers during the setup process? A: Yes, you can add multiple Instagram testers to ensure everything is working correctly before integrating it into your website.