Introduction

This is one of the social media implementation for a website. Here we are fetching latest video and images along with some other data from a particular Instagram Hash tag and show in our website using simple HTML and JQuery.

Description: We need to follow the following steps for implementing this application for our website.

Design HTML Page
  1. <head runat="server">
  2. <title>Get Instagram Data</title>
  3. <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  4. <script src="Script/CustomScript.js"></script>
  5. </head>
  6. <body>
  7. <form id="form1" runat="server">
  8. <div class="instagram">
  10. </div>
  11. </form>
  12. </body>
Style.css
  1. body {
  2. background: #f4f4f4;
  3. : Arial,sans-serif;
  4. : 14px;
  5. color: #666;
  6. }
  7. #instagram {
  8. width: 800px;
  9. height: auto;
  10. overflow: auto;
  11. background: #fff;
  12. padding: 15px;
  13. }
Now at this point the design has been completed. Now we have to integrate a Instagram Hashtag to this HTML and append inside <div</div> tag. Now before moving forward you should have an Instagram account to get access token. Visit to the following link after login. And you can see a page like the following image,
Now click on Manage Clients and then Register a New Client and it will come up a page as per the following image,


After proper submission you will be getting your CLIENT ID and CLIENT SECRET as per the following image,



Now to get access token visit the link and click Get Token you will get your access Token by which we will get all the required data from a hash tag.
CustomScript.js
The following is the script I have written to get the data. And here I am fetching all the Videos and Images of dilwale hashtag. You can change it as per your requirement.
  1. $(document).ready(function () {
  2. var hashtag = 'dilwale'
  3. var accessToken = '16741082.1b07669.121a338d0cbe4ff6a5e04543158a4f82' //Write your access token
  4. $.ajax({
  5. url: 'https://api.instagram.com/v1/tags/' + hashtag + '/media/recent?count=33&access_token='+ accessToken +'',
  6. dataType: 'jsonp',
  7. type: 'GET',
  8. success: function (data) {
  9. console.log(data);
  10. for (x in data.data) {
  11. if (data.data[x].type == 'video') {
  12. //console.log("Video" + data.data[x].videos.standard_resolution.url);
  13. //See the browser console and add data as per requirements
  14. $('.instagram').append('<div style="border:1px solid orange"><video controls><source src="' + data.data[x].videos.standard_resolution.url + '" type="video/mp4"></video><span style="border:1px solid orange; dislay:block">Test1</span></div>');
  15. } else if (data.data[x].type == 'image') {
  16. $('.instagram').append('<div style="border:1px solid orange"><img src="' + data.data[x].images.standard_resolution.url + '" ><span style="border:1px solid orange; display:block">"' + data.data[x].caption.text + '"</span><span style="border:1px solid orange; dislay:block">Test1</span></div>');
  17. //console.log("Image");
  18. //See the browser console and add data as per requirements
  19. }
  20. }
  21. },
  22. error: function (data) {
  23. console.log(data);
  24. }
  25. })
  26. });
Now if you run this you will see a list of top 33 videos and images along with text in your page. If you remove the count it will come up with a list of 20 data as default.
Note
  1. Don't share your access token with others.
  2. You can download the attached project and see the result.
Hope that helps you.