"instagram"
Bootstrap 3.3.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="iCard"> <div class="logo"></div> <div class="user"></div> <div class="details"> <h1>Joseph Victory</h1> <h2><a href="https://www.j-w-v.com">www.j-w-v.com</a><h2> </div> <div class="count"> <ul> <li class="media"><span>Posts</span></li> <li class="followers"><span>Followers</span></li> <li class="following"><span>Following</span></li> </ul> </div> <div class="stats"></div> <div id="instafeed"></div> </div> <div class="footer"> Made using <a href="http://instafeedjs.com/">Instafeed.js</a> & inspiration from <a href="https://dribbble.com/shots/2682727-Instagram-User-Profile-Dribbble-006">rahul chandh</a> </div> <script> /* PLEASE NOTE If nothing loads the pen has exceeded the Instagram API request limit. */ var userFeed = new Instafeed({ get: 'user', userId: '7523095', accessToken: '7523095.310e263.0821e92409004c668eac7c33a66e5090', sortBy: 'most-recent', limit: 6, template: '<div class="img"><a href="{{link}}"><img src="{{image}}" /></a></div>' }); userFeed.run(); function getUserPic() { var access_token = "7523095.310e263.b9e774f471194f95aa91704c82f3161b"; var user_id = "7523095"; var url = "https://api.instagram.com/v1/users/" + user_id + "?access_token=" + access_token + "&callback=?"; $.getJSON(url, function(data) { $(".user").append("<img src='" + data.data.profile_picture + "' />"); }); } getUserPic(); function mediaCount() { var user_id = "7523095"; var access_token = "7523095.310e263.b9e774f471194f95aa91704c82f3161b"; var url = "https://api.instagram.com/v1/users/" + user_id + "?access_token=" + access_token + "&callback=?"; $.getJSON(url, function(data) { $('.followers').prepend(data.data.counts.followed_by.toString()); }); } mediaCount(); function followerCount() { var user_id = "7523095"; var access_token = "7523095.310e263.b9e774f471194f95aa91704c82f3161b"; var url = "https://api.instagram.com/v1/users/" + user_id + "?access_token=" + access_token + "&callback=?"; $.getJSON(url, function(data) { $('.following').prepend(data.data.counts.follows.toString()); }); } followerCount(); function postCount() { var user_id = "7523095"; var access_token = "7523095.310e263.b9e774f471194f95aa91704c82f3161b"; var url = "https://api.instagram.com/v1/users/" + user_id + "?access_token=" + access_token + "&callback=?"; $.getJSON(url, function(data) { $('.media').prepend(data.data.counts.media.toString()); }); } postCount(); </script>
BODY { background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2 1%, #f2f2f2 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e2e2e2 1%, #f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e2e2e2 1%, #f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#f2f2f2', GradientType=0); /* IE6-9 */ font-family: 'Lato', sans-serif; height: 100%; width: 100%; } .logo { background: url("//instagramstatic-a.akamaihd.net/h1/images/shared/shared-assets.png/1e2eddff9a25.png") no-repeat 0 -95px; height: 35px; width: 97px; position: relative; top: 20px; left: 20px; } #iCard { width: 450px; height: 653px; background: #F3F3F3; margin: 0 auto; -webkit-box-shadow: 10px 20px 30px 1px #C2C2C2; box-shadow: 10px 20px 30px 1px #C2C2C2; margin-top: 3%; } .img { display: inline-block; } .img a { width: 0px; height: 0px; padding: 0px; margin: 0px; } .details { margin: 0 auto; width: 220px; font-weight: bold; } .details h1 { color: #4b4946; margin: 0px; padding: 0px; } .details h2 { font-size: 16px; color: #8a8a8a; margin: 0px; padding: 0px; padding-bottom: 10px; text-align: center; } .details h2 a { color: #8a8a8a; text-decoration: none; } .user { margin: 0 auto; width: 150px; padding-top: 20px; font-weight: bold; } .user img { border-radius: 50%; } .count { width: 450px; color: black; font-size: 20px; margin: 0 auto; padding-bottom: 20px; text-align: center; } .count ul { padding: 0px; margin: 0px; margin-left: -42px; } .count ul li { list-style: none; display: inline-block; font-weight: bold; padding-left: 63px; } .count ul li span { display: block; color: #8a8a8a; font-size: 16px; } .footer { padding-top: 50px; text-align: center; font-size: 12px; }

Related: See More


Questions / Comments: