For my website I wanted to show up my recent Instagram photo in the sidebar. There are a few plugins for WordPress, and I also tried a few, but they don't do what they should. So I made my own one with PHP and Bootstrap.

Step 1: Get an API key

First, we must register our application so we get an Instagram API key. On the Instagram Developer page, click on the register your application button and enter all needed data. After that, click on manage clients in the menu bar. There you can register your first client. At the end, you should get something like that:



There are only a few important aspects. The redirect url can also be your normal website url, you'll see why soon.

Step 2: The preparations

To use the API, we need the client id, the client secret and an auth token, which you can get by navigating to this site:

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URL&response_type=token

Click the green button and you will get redirected to your redirect url, but with your access token attatched! Also we need the user id, but that is simple. Jelled.com made a nice tool for it, check it out here. Just enter your username and it will output your user id. Save that, we will need it later.

Step 3: The code

I'm using curl for getting the data. First, we need the API url to get our data.

  1. $url = "https://api.instagram.com/v1/users/USER-ID/media/recent/?access_token=TOKEN&count=1";

Then, let's get the data with curl:

  1. $curl = curl_init();
  2. curl_setopt($curl, CURLOPT_URL, $url);
  3. curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  4. curl_setopt($curl, CURLOPT_TIMEOUT, 20);
  5. $result = curl_exec($curl);
  6. curl_close($curl);

Now we have the undecoded JSON code. Let's use JSONeditoronline.org to analyze the data. It looks like this:

For now, let's only take the image url to display it, the link to the photo on Instagram and the amount of likes.

  1. $json = json_decode($result, true); //decode the JSON code to an assoc array
  2. $likes = $json["data"][0]["likes"]["count"];
  3. $link = $json["data"][0]["link"];
  4. $image = $json["data"][0]["images"]["low_resolution"]["url"];

Okay. So now, let's output it in a nice way with Bootstrap and jQuery. I also used a bit of CSS and JS to let it look nicer.

CSS:

  1. .thumbnail {
  2. position:relative;
  3. overflow:hidden;
  4. }
  5. .caption {
  6. position:absolute;
  7. top:0;
  8. right:0;
  9. background: rgb(34,34,34);
  10. background: rgba(34,34,34,0.5);
  11. width:100%;
  12. height:100%;
  13. padding:2%;
  14. display: none;
  15. text-align:center;
  16. color:#fff !important;
  17. z-index:2;
  18. }

JS:

  1. $(document).ready(function() {
  2. $('[data-toggle="tooltip"]').tooltip();
  3. $('.thumbnail').hover(function() {
  4. $(this).find('.caption').slideDown(250)
  5. }, function() {
  6. $(this).find('.caption').slideUp(250)
  7. })
  8. });

And output it with PHP:

  1. echo '<div class="panel panel-default">
  2. <div class="panel-body">
  3. <h2 style="margin-top:0px; padding-top:0px;">Instagram</h2>
  4. <div class="thumbnail">
  5. <div class="caption">
  6. <table valign="middle" align="center" width="100%" height="100%">
  7. <tr valign="middle" align="center" width="100%" height="100%">
  8. <td valign="middle" align="center" width="100%" height="100%" style="font-size:3em; opacity:0.75; color:#ffffff;"><i class="fa fa-heart"></i> '.$likes.'<br><a class="btn btn-default btn-lg" target="_blank" href="'.$link.'"><i class="fa fa-instagram"></i> View</a></td>
  9. </tr>
  10. </table>
  11. </div>
  12. <img src="'.$image.'" alt="Latest Instagram photo">
  13. </div>
  14. </div>
  15. </div>';

So, the complete PHP file:

  1. $url = "https://api.instagram.com/v1/users/USER-ID/media/recent/?access_token=TOKEN&count=1";
  2. $curl = curl_init();
  3. curl_setopt($curl, CURLOPT_URL, $url);
  4. curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  5. curl_setopt($curl, CURLOPT_TIMEOUT, 20);
  6. $result = curl_exec($curl);
  7. $json = json_decode($result, true);
  8. $likes = $json["data"][0]["likes"]["count"];
  9. $link = $json["data"][0]["link"];
  10. $image = $json["data"][0]["images"]["low_resolution"]["url"];
  11. echo '<div class="panel panel-default">
  12. <div class="panel-body">
  13. <h2 style="margin-top:0px; padding-top:0px;">Instagram</h2>
  14. <div class="thumbnail">
  15. <div class="caption">
  16. <table valign="middle" align="center" width="100%" height="100%">
  17. <tr valign="middle" align="center" width="100%" height="100%">
  18. <td valign="middle" align="center" width="100%" height="100%" style="font-size:3em; opacity:0.75; color:#ffffff;"><i class="fa fa-heart"></i> '.$likes.'<br><a class="btn btn-default btn-lg" target="_blank" href="'.$link.'"><i class="fa fa-instagram"></i> View</a></td>
  19. </tr>
  20. </table>
  21. </div>
  22. <img src="'.$image.'" alt="Latest Instagram photo">
  23. </div>
  24. </div>
  25. </div>';
  26. curl_close($curl);

Step 4: Use it!

Just use the PHP include() function.

Download and demo


Code

Newsletter

Subscribe to my newsletter and stay tuned.