Blog | Tutorials

How To Embed The Latest Instagram Image Into Your Website

01/06/2015

Retrieving images out of Instagram needn’t be the headache it often becomes. All it takes is a bit of designer know-how.

I am in absolute awe of our designers at Spiral Media.

They are the ones who make our websites look visually amazing in a way that I wish I could. My skills appear to lie in the more greyscale end of computer systems; moving data around from one place to another.

Imagine my delight when I was tasked to embed the latest instagram image from a user’s Instagram account into a website. Finally, I could step into the shoes of a designer!

The first job was to investigate the Instagram API (Application Programming Interface). They have one and it’s very powerful.

However, it does make use of the OAuth2.0 specification – while secure it’s very time-consuming to work through and is arguably a bit overkill for what we’re trying to achieve.

I was therefore somewhat relieved when our Technical Director Rupert found this link explaining how to get media from a user’s Instagram account without authenticating via OAuth.

The URL Call

To put it simply, you need to go away to …
… and then read in the response.

Building The URL Call

On the face of it this is very easy. It’s simply a case of building a string:

$client_id = '58997b813d74442e83668a2ed596c5b6';

$user_id = '123456789';

$url = 'https://api.instagram.com/v1/users/'.$user_id.'/media/recent/?client_id='.$client_id;

To get your Client ID, login to Instagram and go to http://instagram.com/developer. Click on “Manage Clients” in the top right corner. On the next page click on “Register a New Client”. Enter the data requested in form as shown below. Instagram Application In this case, all we need is the Client ID so it doesn’t really matter very much what you enter in here.

I entered our homepage in each URL field and my own email address for an email, whereas the name and description are simply labels so that you know what you’re looking at when you return to this page.

Submitting this will give you a Client ID and the Client Secret. We only need the former. To get your User ID I found this very useful tool at http://lab.strategio.fr/instagram-id.php?lang=en. You simply enter your Instagram username and it returns your Client ID.

Get The Data Out Of Instagram

That’s the URL built. If you echo out the URL and then paste it back into your browser you should see a lot of data being returned, though the structure is lost in the browser.

We need to do the same thing programmatically so use this line to go and get the contents of the URL and assign it to a variable data.

$data = file_get_contents($url);

We then decode the data so that we can use its structure ourselves;

$json = json_decode($data);

At this point we have a nicely formatted JSON array full of information about the Instagram account.

Get The Images From The Data

In this case we need the last posted image. Images are stored in this array in order so we can simply call the following to get the latest:

$first_photo = $json->data[0];

If you wanted the last image then you would call:

$last_photo = $json->data[count($json->data)];

If you wanted to see them all you’d iterate through all images:

foreach ($json->data[0] as $image) {}

Image Format

There are three image URLs that arrive in the data for each image posted. It’s well worth using the correct image for your application to save on load time on your page where possible. To get the largest image you can use;

$image = $first_photo->images->standard_resolution;

However low resolution and thumbnail images are also available using “thumbnail” or “low_resolution” in place of “standard_resolution”.

Conclusion

That’s really all there is to it. For your convenience, the whole script (all 22 lines of it) is below, or you can drop us an email to chat further: