To pull instagram photo to website

jquery instagram

18,512

Solution 1

Instafeed.js is a dead-simple way to add Instagram photos to your website. No jQuery required, just plain 'ol javascript

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>

Check this link INSTAFEED

Made a Insta demo for you

Solution 2

You can get images by plain Jquery without any other plugin. as below:

$(document).ready(function () {
        var apiurl = "https://api.instagram.com/v1/users/<YOURUSERNAME>/media/recent/?access_token=<YOURACCESSTOKEN>&count=5&callback=?";
        $.getJSON(apiurl, function (data) {
            console.log("suatroot");
            var suatroot = data.data;

            console.log(suatroot);
            $.each(suatroot, function (key, val) {
                console.log("item");
                var itemobj = val.images.low_resolution.url;
                var hrefobj = val.link;
                var captobj = val.caption.text;
                console.log(captobj);
                console.log(itemobj);
                var suatpaket = "<a target='_blank' href='"+hrefobj+"'><img src='" + itemobj + "'/><br>"+captobj+"<br></a>";
                $(".instagram").append(suatpaket);
            });

        });
    });

and HTML:

<div class='instagram'></div>

By this solution your access token can be seen from source code of page, however, that is may be no big issue for you.

18,512

youaremysunshine

Updated on June 04, 2022

Comments

youaremysunshine about 2 years

I learned this from a forum but it didnt work for me. The photo didnt show up only the header.

Anyone can help me in this?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-instagram/0.2.2/jquery.instagram.min.js"></script>
<title>Instagram Demo</title>

</head>

<body>

<h1>jQuery Instagram demo</h1>

<div class="instagram"></div>
<script type="text/javascript">
    $(".instagram").instagram({
        userId: '0ce2a8c0d92248cab8d2a9d024f7f3ca',
        accessToken: '34834147.0ce2a8c.92d5a4d1d326438fb063a31b63e208a2',
        image_size: 'standard_resolution',
    });
    </script>


</body>
</html>

Thanks!

Sterling Archer

Error/Console Message..? Importing the proper instagram.js file..? More details.

youaremysunshine almost 11 years

ya i test this before but it still fail. I changded my code into this: <h1>jQuery Instagram demo</h1> <div id="instafeed"></div> <script type="text/javascript"> var feed = new Instafeed({ get: 'tagged', tagName: 'awesome', clientId: '0ce2a8c0d92248cab8d2a9d024f7f3ca' }); feed.run(); but it still dont pull any photo.
youaremysunshine almost 11 years

will it possible anything went wrong when i register the client?
Vaibs_Cool almost 11 years

api.instagram.com/v1/media/… try this
youaremysunshine almost 11 years

sorry i dont understand what is this? you mean to ask me to try on the user is?? sorry if i am wrong I am too new in this.
Vaibs_Cool almost 11 years

Updated my answer with demo @jovine ..Take a look at it
youaremysunshine almost 11 years

I had save wht i saw with ur link in my question.. I print screen it
Vaibs_Cool almost 11 years

Yeah tats fine json response ..anyways just go through my DEMO link in my answer
Nam G VU about 8 years

Lovely - works for me right away with full demo <3 Thank you @Vaibs_Cool