All for Joomla All for Webmasters

Let's Play With Coding…

Load Instagram feeds in webpage

Instagram is very popular social platform for sharing photos and in some cases we need live feeds to be streamed in a web page. For an instance, let us consider a website of a conference and in that we like to showcase all feeds others shared with hash tag which Will be awesome to see such things in a place….

1) First you need to have an instagram account so that you can receive get client ID and get access to the feeds
2) Login to your instagram account

3) Go to http://instagram.com/developer/register/ and Manage clients and get access token

4) Download instafeed.min.js from developer site

5) Create a html file with following code in it

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="instafeed.min.js"></script>
<script type="text/javascript">
 var feed = new Instafeed({
 get: 'tagged',
 tagName: 'actuallymodels',
 clientId: 'e2a3a07a0550408ebdd2ce1e8929e7dh', //replace this key with your own
 template: '<a class="animation" href="{{link}}" title="{{caption}}"><img src="{{image}}" /></a>'
 });
 feed.run();
</script>

<style>
#instafeed a{
border:solid red 1px;

}
</style>
</head>

<body>
<div id="instafeed"></div>

</body>
</html>

in this code div with id instafeed will load feeds from Instagram for given tag name

tagName is the name of the instagram hash tag you want to load

clientID: access token key received from step 1

template: defines how you want to display your feeds {link} retrieves the link of the feed and {image} gets image. for more see developer’s documentation

 

 

 

Related posts

International Calling Codes

Instagram is very popular social platform for sharing photos and in some cases we need live feeds to be streamed in a web page.

Load HTML content using jQuery

Instagram is very popular social platform for sharing photos and in some cases we need live feeds to be streamed in a web page.

Leave a Comment

Leave a Reply