Build your own customized instagram gallery

2016-06-21 David Fancello posted:

Have you never thought of seeing your Instagram gallery on your website, without using that boring plugin full of advertisements? Now, with this little tutorial, I will explain how to do it.

This guide requires basic knowledge of the following programming languages: PHP, HTML and CSS.

First of all, you have to register your Instagram account on the Instagram Developer website. Once you have logged in, click on the “Manage Clients” section on the top-right corner; now fill out the required fields with the address of the website which you want to add the gallery to, your phone number and the reason of you want to build this API powered application (usually I simply write “gallery for personal website”).

Instagram gallery step 1Instagram gallery step 2

After you have accepted the terms of use of the API, it will open one more page that you have to fill out with your personal data: you have to assign a name for the application (e.g. dodify Gallery), a description (e.g. dodify account gallery), an email address and you will have to re insert your website’s address. In the redirect field insert http://localhost and press enter. After that, go to the “Security” tab: for the field “Valid redirect URIs” check if http://localhost is correct; deactivate “Disable implicit OAuth” input and click on “Register”. At this point, it will open a new page that will confirm your data.

Instagram gallery step 3Instagram gallery step 4Instagram gallery step 5

The next step is to create the “Access Token” to use the API. Copy and paste this code on your browser https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]&redirect_uri=http://localhost&response_type=token changing [CLIENT_ID_HERE] with your client Id assigned from Instagram (careful, don’t leave the parentheses!). If everything goes well, it will show a new page that will ask you to confirm the access to the account’s information. After authorizing this, in the browser’s address bar you will find the account’s “Access Token”: copy it and never show it to anybody because it allows full access to your account.

Instagram gallery step 6Instagram gallery step 7

Once you have the “Access Token”, you can use this little PHP script (replacing the user id and access token):

<?php
    $userid = "[YOUR_USER_ID]";
    $accessToken = "[YOUR_ACCESS_TOKEN]";
    $url = "https://api.instagram.com/v1/users/{$userid}/media/recent/?access_token={$accessToken}&count=4";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, 20);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    $result = curl_exec($ch);
    curl_close($ch); 
    $result = json_decode($result);
    foreach($result->data as $post) {
        echo "<a href=\"{$post->link}\" title=\"{$post->caption->text}\" rel=\"external\">" .
                "<img src=\"{$post->images->standard_resolution->url}\" alt=\"{$post->caption->text}\" />" .
            "</a>";
    }  
?>

This script, if placed in your website, will show the last 4 photos posted on Instagram. If you prefer to see more photos, you can change the “count” value. Now, with a little knowledge of CSS, you can customize your gallery as required. If you want to see some examples, visit Boomerang Charter or TheLivExperience.

Subscribe to our newsletter to keep in touch with dodify or follow us on social media to be notified once we publish a new guide!

Instagram gallery step 1Instagram gallery step 2Instagram gallery step 3Instagram gallery step 4Instagram gallery step 5Instagram gallery step 6Instagram gallery step 7

Highlights

Retail design in Olbia
Retail design in Olbia

As mentioned in a previous article, within a business or company we find the graphic work of a professional who, with the purpose of involving the customer, creates images or ad hoc messages for that space. W...

Read more

Website creation in Olbia - Custom Websites
Website creation in Olbia - Custom Websites

Do you need a new website in Olbia or want to upgrade your old website? Do you need to develop an eCommerce site? dodify specializes in the creation and implementation of web sites in Olbia. For years customer...

Read more

SEO 101
SEO 101

There’s a high chance that you’ve heard the term SEO before but while you may have heard of these three letters (short for Search Engine Optimization) do you know what it is and why exactly it’s so important for websites?...

Read more

Contact Us

If you would like to contact us, need assistance or information about our services please drop us an email at info@dodify.com or use the form below.

Your contact details will be used in accordance with our privacy policy.