Imagine a small bakery owner, Anna, who wants to display her delicious creations directly on her website from her Instagram profile. Instead of manually uploading photos daily, she discovers the Instagram Basic Display API Integration PHP. With a seamless connection between Instagram and her website, Anna can now automatically showcase her latest posts, saving time and effort.
This guide walks you through the integration process step by step, helping you unlock the same potential for your website or project.
The Instagram Basic Display API Integration PHP allows developers to fetch user data like photos and profile information from Instagram using PHP. Whether you are creating a personal portfolio or a business website, this integration simplifies showcasing your Instagram content. This step-by-step guide covers everything from setting up your developer account to implementing API calls with examples in PHP.
Let’s explore how this powerful tool works and why it’s a must-have for seamless Instagram integration.
What is the Instagram Basic Display API?
The Instagram Basic Display API is a lightweight and simplified interface to access basic profile information and media data of Instagram users. Unlike the Instagram Graph API, which focuses on business accounts and deeper metrics, this API is designed for individual accounts, making it perfect for personal or small-scale projects.
Prerequisites for Integration
Before diving into the integration process, ensure you have the following:
- An Instagram Developer Account.
- A registered app on the Instagram Developer Platform.
- Basic knowledge of PHP.
- A local server or hosting environment to run PHP scripts.
Key Features of Instagram Basic Display API
- Access media objects (images, videos) with metadata.
- Fetch basic profile information.
- Simplify integration for individual users.
Instagram Basic Display API vs Instagram Graph API
Feature | Basic Display API | Graph API |
---|
User Type Supported | Individual Accounts | Business Accounts |
Data Access | Media, Profile Info | Posts, Insights, Ads |
Integration Complexity | Low | High |
Step-by-Step Integration Guide
Step 1 - Create an Instagram App
- Log in to your Instagram Developer Account.
- Click on "My Apps" at the top right corner of the page and create a new app.
- Add the "Instagram" product and configure the Basic Display.
Step 2 - Configure the 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 - Obtain Access Tokens
The API requires an access token to fetch data. Follow these steps:
- Use the authorization endpoint to get a temporary code.
- Exchange the code for a short-lived access token.
- Optionally, convert the short-lived token into a long-lived one.
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); ?>
- if (isset($instaFeed["data"])) { ?>
class
="container overflow-hidden mt-3"> -
Latest Insta Feed
-
class
="row gy-5"> - 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); ?>
-
class
="col mt-3"> -
class
="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm"> -
class
="list-image"> - "= $permalink ?>" class="text-dark">
-
class
="video"> - if ($media_type == "VIDEO") { ?> class="icofont-ui-play" id="playVideo">
- else { ?> "= $media_url ?>" class="img-fluid w-100">
-
class
="d-flex justify-content-between mt-2 px-3 mb-3"> -
class
="price m-0 text-success text-muted"> @= $username ?> - "= site_url('assets/ec/img/Instagram-logo-icon.svg') ?>" style="width: 25px;">
-
-
class
="mb-0 px-3 mb-2">class="text-dark">= $cap[0] ?>. -
-
Common Use Cases
- Portfolio Websites: Display your latest Instagram photos automatically.
- Small Businesses: Highlight your Instagram presence for increased engagement.
- Blogging Platforms: Showcase Instagram stories and posts directly on your site.
Helpful Resources
Conclusion
Integrating the Instagram Basic Display API Integration PHP enables seamless content sharing between Instagram and your website, boosting engagement and efficiency. With the steps outlined here, even beginners can implement the integration effectively. Whether you’re a developer or a business owner, this API unlocks endless possibilities for showcasing Instagram content dynamically.
Author
Aditya Rai
Full Stack Development | IT I am a PHP developer proficient in CodeIgniter framework. I leverage jQuery for dynamic frontend interactions, enhancing user experience. With expertise in both technologies, I craft robust web applications seamlessly blending backend logic with responsive frontend designs."
Explore Me