Skip to content

Instantly share code, notes, and snippets.

@vishnusomanus

vishnusomanus/instagram widget

Created October 4, 2019 13:13
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 vishnusomanus/fcf5cf12dee70ea9bd62ae5c2b688e72 to your computer and use it in GitHub Desktop.
Save vishnusomanus/fcf5cf12dee70ea9bd62ae5c2b688e72 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
instagram widget
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.header_insta {
width: 100%;
height: 80px;
background: #607D8B;
}
.pic img{
width: 50px;
border-radius: 50%;
border: 2px solid white;
overflow: hidden;
margin: 10px;
}
.name {
color: #fff;
font-size: 17px;
font-weight: bold;
padding-top: 10px;
}
.count_insta {
font-size: 10px;
font-weight: bold;
color: #fff;
}
.each_post {
padding: 2px;
}
.row.insta_feeds_in {
margin: 0 0px;
padding: 4px 5px;
border: 2px solid #5f7d8a;
max-height: 300px;
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 15px;
}
</style>
<div class="insta_feeds row" style="max-width: 300px; margin: auto;">
<div class="header_insta d-flex">
<div class="pic flex-fill"><img src="" alt="" class="img-fluid"></div>
<div class="name_area flex-fill">
<div class="name"></div>
<div class="count_insta">
<span class="post"></span> posts <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<span class="followers"></span> followers <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<span class="following"></span> following
</div>
</div>
</div>
<div class=" row insta_feeds_in">
</div>
</div>
<script>
jQuery(document).ready(function($) {
profile_data = "";
var token = '7294076678.5d33358.4788dd75a57c4c839c1aef239ca6ed53',
userid = 7294076678,
num_photos = 6;
jQuery.ajax({
url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, count: num_photos},
success: function(data){
console.log(data);
for( x in data.data ){
jQuery('.insta_feeds_in').append('<div class="col-6 each_post"><img src="'+data.data[x].images.low_resolution.url+'" class="img-fluid"></div>');
}
},
error: function(data){
//console.log(data);
}
});
jQuery.ajax({
url: 'https://api.instagram.com/v1/users/self/?access_token=' + token ,
dataType: 'jsonp',
type: 'GET',
success: function(data){
//console.log(data);
var profile_data = data;
jQuery('.name').text(profile_data.data.full_name);
jQuery('.post').text(profile_data.data.counts.media);
jQuery('.followers').text(profile_data.data.counts.followed_by);
jQuery('.following').text(profile_data.data.counts.follows);
jQuery('.pic img').attr('src',profile_data.data.profile_picture);
},
error: function(data){
//console.log(data);
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment