In this video we learn how to connect to the Instagram API. We get an access token, connect to the user/self endpoint, and display the user data in the browser.
Step 1: Setup and App on Instagram
Head over to https://www.instagram.com/developer/ and click on the “Manage Clients” tab in the header. Create an app and make note of the Client ID, Client Secret, and Redirect URI. When the user gets to your website, you will give them a link to click on that sends them to Instagram. You will pass along your Client ID and Redirect URI when the user clicks on this link. If those two things do not match, the user will fail to authenticate with your app.
Step 2: index.php Get an Access Token
This file will contain code we need in order to get an access token. When the user is redirected back from Instagram to the Redirect URI in your app, Instagram will tag on a “code” GET variable to the url. This $_GET[‘code’] variable is what we will use to generate an access token through Instagram.
This is the curl call we will use to hit Instagram’s access_token endpoint, with all of our app credentials and the $_GET[‘code’] variable we have received from Instagram. If all credentials are correct, we will get back an access token.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$params = array( // post parmas 'client_id' => IG_CLIENT_ID, 'client_secret' => IG_CLIENT_SECRET, 'grant_type' => 'authorization_code', 'redirect_uri' => IG_REDIRECT_URI, 'code' => $_GET['code'] ); // call IG access_token endpoint with params to get a valid access token $ch = curl_init( 'https://api.instagram.com/oauth/access_token' ); curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true ); curl_setopt( $ch, CURLOPT_CUSTOMREQUEST, 'POST' ); curl_setopt( $ch, CURLOPT_POSTFIELDS, $params ); curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, FALSE ); $response_raw = curl_exec( $ch ); $response = json_decode( $response_raw, true ); curl_close( $ch ); // display our repsonse from IG echo '<pre>'; print_r( $response ); echo '</pre>'; |
The access token will be displayed in the response in the browser if all credentials check out.
If there is no “code” in the URL, the user is not being redirected from Instagram. In this case the need to see a link that will direct them to Instagram allowing them to authorize with our app. The link below will send the user to Instagram. We pass along our Client ID and Redirect URI so Instagram knows the user is trying to authenticate with our app.
|
1 2 3 4 5 |
<!-- We need to go to IG, authorize user and redirect back to this page for a code --> <h1>Instagram</h1> <a href="https://api.instagram.com/oauth/authorize/?client_id=<?php echo IG_CLIENT_ID; ?>&redirect_uri=<?php echo IG_REDIRECT_URI; ?>&response_type=code"> GET CODE </a> |
Step 3: user_info.php Display User Info from Instagram
This file will use our access token from step 1. We pass along that access token to Instagram’s “users/self” endpoint. If the access token is valid, the info for our user will be returned. We will be able to get profile pic, username, posts, followers, following, and more. Here is the curl call we make to the “users/self” endpoint in order to retrieve a users info.
|
1 2 3 4 5 6 7 8 9 10 11 |
// hit the users/self endpoint with our valid access token to get info on our user $ch = curl_init( 'https://api.instagram.com/v1/users/self/?access_token=' . IG_ACCESS_TOKEN ); curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true ); curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, FALSE ); $response_raw = curl_exec( $ch ); $response = json_decode( $response_raw, true ); curl_close( $ch ); echo '<pre>'; print_r( $response ); echo '</pre>'; |
If all is well, we will get a response back formatted just like Instagram’s documentation said we would here https://www.instagram.com/developer/endpoints/users/.
Now, lets display our user info to the browser with HTML. In the HTML below we simply access data from the response we got back from Instagram. Just like it said in the documentation, we display the users profile image, username, posts, followers, and following.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- display users info via html --> <img src="<?php echo $response['data']['profile_picture']; ?>" /> <br /> <b>User Name: <?php echo $response['data']['username']; ?></b> <br /> <b>Posts: <?php echo $response['data']['counts']['media']; ?></b> <br /> <b>Followers: <?php echo $response['data']['counts']['followed_by']; ?></b> <br /> <b>Following: <?php echo $response['data']['counts']['follows']; ?></b> <br /> |
Links
The full code example can be found in the GitHub link above. The video tutorial for this can also be found in the YouTube link above. That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!