Skip to content

Instantly share code, notes, and snippets.

@MrCl0wnLab

MrCl0wnLab/Get_thumbnail_src_from_Instagram.html

Last active June 26, 2020 23:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MrCl0wnLab/bd297908a3e6c6300697dc79f35d2308 to your computer and use it in GitHub Desktop.
Save MrCl0wnLab/bd297908a3e6c6300697dc79f35d2308 to your computer and use it in GitHub Desktop.
Download ZIP
Get thumbnail_src from Instagram
Raw
Get_thumbnail_src_from_Instagram.html
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="instagram" class="instagram"></div>
</body>
</html>
Raw
script.js
$(document).ready(function () {
var insta_host = "https://www.instagram.com/";
var insta_username = "imaginarionerd";
var max_num_values = 12;
var return_ajax = $.ajax(insta_host + insta_username + "/?__a=1").done(function () {
}).fail(function () {
}).always(function (data) {
items = data.graphql.user.edge_owner_to_timeline_media.edges;
$.each(items, function (n, item) {
if ((n + 1) <= max_num_values) {
var img_url = item.node.shortcode;
var img_src = item.node.thumbnail_src;
var img_title = item.node.edge_media_to_caption.edges[0].node.text;
var data_li = "<a target='_blank' href='" + insta_host + img_url + "'><img src='" + img_src + "' title='" + img_title + "'/></a>";
$("div.instagram").append(data_li);
}
});
});
});
Raw
style.css
div.instagram {
display: flex;
flex-wrap: wrap;
margin: 0 -8px 16px;
margin: 20px;
list-style: none;
float: left;
}
div.instagram img {
background: rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
margin: 2px;
height: 250px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment