Integrating Instagram with your website or application can significantly boost user engagement by displaying dynamic content directly from Instagram profiles. This guide will walk you through the process of setting up and implementing the Instagram Basic Display API using Facebook for Developers.
Step 1: Log in to Facebook for Developers
To get started, visit Facebook for Developers and log in with your Facebook credentials.
Step 2: Create a New App
Navigate to the My Apps section:
- Click on "My Apps" at the top right corner of the page.
Create a new app:
- Click the "Create App" button.
- When prompted, select "Other" as the use case for your app.
- Choose either "Business" or "Consumer" depending on your target audience.
- Enter a suitable "App Name" and click "Create App ID."
Step 3: Add Instagram Basic Display
Once your app is created, you need to add the Instagram Basic Display product.
- Add Instagram Basic Display to your app:
- In your newly created app dashboard, go to the "Add a Product" section in the left sidebar.
- Locate "Instagram" and click "Set Up" under "Instagram Basic Display."
Step 4: Configure App Settings
You need to configure the basic and advanced settings for your app.
- Basic settings configuration:
- Navigate to "Settings" -> "Basic" in the left sidebar.
- Fill in the necessary details such as App Domain, Privacy Policy URL, Terms of Service URL, and other required fields.
- Save your changes.
Step 5: Set Up Instagram Basic Display
Now, you need to set up the Instagram Basic Display product within your app.
- Configure Instagram Basic Display:
- Go to the "Instagram Basic Display" section in the left sidebar.
- Click "Create New App" if prompted.
- Follow the prompts to configure the display settings and ensure you have the necessary permissions.
Step 6: Generate a User Token
The User Token Generator allows you to generate tokens that you can use to make API requests on behalf of users.
- Generate a user token:
- Navigate to "Instagram Basic Display" -> "User Token Generator."
- Generate a token to use in API requests to access user data.
Step 7: Add Instagram Tester
You need to add testers to your app to test the integration before going live.
- Add testers to your app:
- Go to the "Roles" section on the left sidebar.
- Click on "Add People" and enter the Instagram username or email of the person you want to add as a tester.
- The invited tester will receive an email notification.
Step 8: Tester Accepts Invitation
The tester needs to accept your invitation to complete the setup.
- Tester accepts the invitation:
- The tester should log in to Instagram.
- Navigate to "Settings" -> "Apps and Websites."
- Accept the invitation from your app.
Step 9: Generate Final Token
After the tester has accepted the invitation, finalize the token generation.
- Finalize token generation:
- Return to "Instagram Basic Display" -> "User Token Generator."
- Generate the token again if necessary to ensure all permissions are correctly set up.
Free PHP Script To Connect To Instagram basic display API
- $fields = "id,caption,media_type,media_url,permalink,thumbnail_url,timestamp,username";
- $token = INSTOKEN;
- $limit = 5;
- $feed_url = "https://graph.instagram.com/me/media?fields={$fields}&access_token={$token}&limit={$limit}";
- $json_feed = @file_get_contents($feed_url);
- $instaFeed = json_decode($json_feed, true, 512, JSON_BIGINT_AS_STRING); ?>
- <?php if (isset($instaFeed["data"])) { ?>
- <div class="container overflow-hidden mt-3">
- <h2>Latest Insta Feed</h2>
- <div class="row gy-5">
- <?php foreach ($instaFeed["data"] as $insta) {
- $username = isset($insta["username"]) ? $insta["username"] : "";
- $caption = isset($insta["caption"]) ? $insta["caption"] : "";
- $media_url = isset($insta["media_url"]) ? $insta["media_url"] : "";
- $permalink = isset($insta["permalink"]) ? $insta["permalink"] : "";
- $media_type = isset($insta["media_type"]) ? $insta["media_type"] : "";
- $pattern = '/[.@]/';
- $cap = preg_split($pattern, $caption); ?>
- <div class="col mt-3">
- <div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
- <div class="list-image">
- <a href="<?= $permalink ?>" class="text-dark">
- <div class="video">
- <?php if ($media_type == "VIDEO") { ?> <video src="<?= $media_url ?>" class="img-fluid w-100"></i></video> <i class="icofont-ui-play" id="playVideo"></i>
- <?php } else { ?> <img src="<?= $media_url ?>" class="img-fluid w-100"> <?php } ?> </div> </a>
- <div class="d-flex justify-content-between mt-2 px-3 mb-3">
- <p class="price m-0 text-success text-muted"> @<?= $username ?> </p>
- <img src="<?= site_url('assets/ec/img/Instagram-logo-icon.svg') ?>" style="width: 25px;">
- </div>
- <p class="mb-0 px-3 mb-2"><span class="text-dark"><?= $cap[0] ?>.</p>
- </div> </div> </div>
- <?php } ?> </div> </div><?php } ?>
Conclusion
By following these steps, you will have successfully set up and implemented the Instagram Basic Display API on your website or application. This integration allows you to access and display Instagram user data, enriching your content and enhancing user engagement. For more detailed information and additional configuration options, refer to the Instagram Basic Display API documentation.
Author
Hemant Sharma
Manager | Owner | IT Proficient in a wide range of programming languages including Java, Kotlin, PHP, and Flutter, among others. Demonstrated ability to design, develop, and implement robust and scalable solutions for diverse projects.
Explore Me 
