How to get Instagram user profile image, number of followers using ajax and jQuery.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#usersearch").keyup(function(){
var userName = $("#usersearch").val();
var token = '{enter your access token}',
username = userName,
num_photos = 4;
$.ajax({ // the first ajax request returns the ID of users
url: 'https://api.instagram.com/v1/users/search',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, q: username}, // actually it is just the search by username
success: function(data){
//alert(JSON.stringify(data));
//alert(JSON.parse(data));
//alert(data.data[0].username);
//alert(data.data[0].counts.followed_by);
//var profile_img = data.data[0].profile_picture;
/* $("#profile-pic").attr('src',profile_img);
$("#userId").text(data.data[0].id); */
$.ajax({
url: 'https://api.instagram.com/v1/users/' + data.data[0].id + '?access_token={enter you access token here}',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, count: num_photos},
success: function(data2){
var user_name = data2.data.username;
var followed_by = data2.data.counts.followed_by;
var prifile_pic = data2.data.profile_picture;
$("#username").text(user_name);
$("#profile-pic").attr('src',prifile_pic);
$("#followd").text(followed_by);
},
error: function(data2){
console.log(data2);
}
});
},
error: function(data){
console.log(data);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="usersearch">
<span id="username"></span>
<span id="userId"></span><br>
<span id="followd"></span><span>Followers</span>
<img src="" id="profile-pic">
</body>
</html>
0 comments:
Post a Comment