All geek questions in one place

To put an instagram photo on a website

I found out about it on the forum, but it did not help me. Only the title was not displayed on the photo.

Can anybody help me?

<!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!

+4
source share
3 answers

Instafeed.js is an easy way to add Instagram photos to your website. No jQuery required, just "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

Insta strong> demo made for you

+7
source

You can get images with simple jQuery without any other plugins. 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>

Thanks to this solution, the access token can be seen from the source code of the page, however this may not be a big problem for you.

+1
source

There is a solution here that has no dependencies. It also does not require an access token. For this snippet to work, you need to get bitsalad.co URL for your channel.

 <html> <body> <div id='instagram-feed'></div> <script> (function(a,b,c,d){ var $ = b.getElementById('instagram-feed'); a['_i'] = function(d){ d.forEach(function(i, x){ html = "<img src='"+i.images.standard_resolution.url+"' />"; $.insertAdjacentHTML('beforeend', html); }) }; var e = b.createElement(c); e.src = d; e.async=1; var f = b.getElementsByTagName(c)[0]; f.parentNode.insertBefore(e,f); }(window, document, 'script','http://api.bitsalad.co/v1/feeds/<YOUR FEED ID HERE>?callback=_i')) </script> </body> </html>
0
source

Source: https://habr.com/ru/post/1499285/

More articles:


All Articles