In this article we will learn how to get Instagram images using Instagram API. First off, we need to get the Instagram client id. Please follow these simple steps to get the Instagram client id:
Step 1: Login on Instagram.
Step 2: Click on API link in footer or directly open url.
Step 3: Click on Register Your Application,
Step 4: Developer Signup will open.
Step 5: Fill your website, phone number, and what you want to build with the API.
Step 6: Click on Sign up button
Step 7: Register new client id will open. Fill the form and click on register.
Step 8: Now you will get client id as below:
Now write the following code to get images using Instragram API.
  1. <script src='<%= ResolveUrl("~/Scripts/jquery-1.7.1.min.js")%>' type="text/javascript"></script>
  2. <script type="text/jscript">
  3. var clientsId = "clientid"; //instagram client id is here (xxx44662ae4a4ffxxx321e0f178a6xxx)
  4. function GetPhoto() {
  5. if ($.trim($("#TextBoxInstagram").val()) != "") {
  6. GetUserIdFromInstragram($.trim($("#TextBoxInstagram").val()));
  7. }
  8. }
  9. function GetUserIdFromInstragram(InstragramUrl) {
  11. var stringLength = InstragramUrl.length; // this will be 16
  12. var lastChar = InstragramUrl.charAt(stringLength - 1); // th
  13. if (lastChar == "/") {
  14. InstragramUrl = InstragramUrl.substring(0, InstragramUrl.length - 1);
  15. }
  16. var Username = InstragramUrl.substr(InstragramUrl.lastIndexOf('/') + 1);
  17. $.ajax({
  18. type: "GET",
  19. url: "https://api.instagram.com/v1/users/search?q=" + Username + "&client_id=" + clientsId + "",
  20. dataType: "jsonp",
  21. crossDomain: true,
  22. beforeSend: function () {
  23. },
  24. complete: function () {
  25. },
  26. success: function (data) {
  27. GetPhotoFromInstragram(data["data"][0]["id"])
  28. }
  29. });
  30. }
  31. // This method is used to get Photos from Instragram with the help of user id and clients id
  32. function GetPhotoFromInstragram(UserId) {
  33. jQuery("#MyInstagramPhoto").html("");
  34. $.ajax({
  35. type: "GET",
  36. url: "https://api.instagram.com/v1/users/" + UserId + "/media/recent/?client_id=" + clientsId + "&count=12",
  37. dataType: "jsonp",
  38. crossDomain: true,
  39. beforeSend: function () {
  40. ShowLoading();
  42. },
  43. complete: function () {
  44. HideLoading();
  45. },
  46. success: function (data) {
  47. if (data != "") {
  48. if (data["data"].length > 0) {
  49. for (var i = 0; i < data["data"].length; i++) {
  50. jQuery("#MyInstagramPhoto").append("<li><a href='" + data.data[i].link + "' target=\"_blank\"><img src='" + data.data[i].images.low_resolution.url + "' class=\"instpics small\" /></a></li>");
  51. }
  52. }
  53. }
  54. }
  55. });
  56. }
  58. function ShowLoading() {
  59. var scrollTop = jQuery(window).scrollTop();
  60. jQuery('.overlay-bg').show();
  61. return true;
  62. }
  63. function HideLoading() {
  64. jQuery("#divoverlay").hide();
  65. }
  66. </script>
  67. <style type="text/css">
  68. /*For loader and masking */
  69. .overlay-bg
  70. {
  71. display: none;
  72. position: absolute;
  73. top: 0;
  74. left: 0;
  75. z-index: 1000;
  76. background: black !important;
  77. opacity: 0.30;
  78. height: 100%;
  79. width: 100%;
  80. }
  81. .overlay-content
  82. {
  83. background: #fff;
  84. padding: 1%;
  85. width: 32px;
  86. height: 32px;
  87. position: relative;
  88. cursor: default;
  89. border-radius: 4px;
  90. box-shadow: 0 0 5px rgba(0,0,0,0.9);
  91. left: 50%;
  92. top: 20% !important;
  93. }
  94. /* style for Image */
  95. ul.ImageStyle li
  96. {
  97. list-style-type: none;
  98. width: 24%;
  99. float: left;
  100. padding: 1px 5px 0px 0px;
  101. border: none;
  102. }
  103. .instpics
  104. {
  105. width: 100%;
  106. }
  107. </style>
  108. <div class="row" id="divInstagram">
  109. <div>
  110. Instagram Url
  111. <input type="text" id="TextBoxInstagram" placeholder="Enter your instagram url" style="width: 300px" />
  112. <input type="button" onclick="GetPhoto(); return false;" value="Get Instagram Photos" />
  113. </div>
  114. <div>
  115. <%--display Images--%>
  116. <ul id="MyInstagramPhoto" class="ImageStyle">
  117. </ul>
  118. </div>
  119. </div>
  120. <%--Masking- This div will hide content untill data will fetch--%>
  121. <div class="overlay-bg" id="divoverlay">
  122. <div class="overlay-content">
  123. <img src="<%= ResolveUrl("~/images/loader.gif") %>" alt="loading" />
  124. </div>
  125. </div>
Output:
Enter your instagram url and click on 'Get Instagram Photos' button. Now you will get Instagram images as follows:
Happy coding.
Read more articles on jQuery: