Add Instagram Profile To Your Blogger Sidebar

Add Instagram Profile To Your Blogger Sidebar

In our previous tutorial we learned how to add recent Instagram feed to your Blogger sidebar using Instagram API. We fetched data from our Instagram JSON feed using JavaScript in order to design a perfect Instagram widget for Blogger.

In this tutorial I will guide you how to add Instagram profile to your Blogger sidebar. We have used exactly the same tactic for developing this widget that we used in our previous tutorial and I'm sure you would surely love it once you add it into your Blogger blogs.

What is Blogger Instagram Profile Widget?

An Instagram profile widget displays your Instagram profile along with your Instagram username, total photos or videos that you have uploaded , number of followers that you have and number of people that you follow!

It also displays your profile photo with the complete bio and when someone clicks on your profile photo then he gets a cool ride straight to your Instagram account. Sounds amazing ? Now let's see its features before we add it to our Blogger sidebar.

  • Coded in pure JavaScript
  • Displays Instagram username
  • Shows profile photo
  • Shows complete bio
  • Media , followers and following
  • Profile photo links straight to your Instagram account
  • Updates automatically
  • Lightweight and fast loading

instagram profile  

How to add Instagram profile to Blogger sidebar:

As Instagram API doesn't allow to access any data without access token therefore you need to first get your access token. Since we have discussed how to generate your access token in the previous tutorial so we are not going to discuss it again.

After successfully generating your access token follow these simple steps to add your Instagram profile in Blogger:
  • Go to your Blogger account > Theme > Backup Template. 
  • Click on Edit HTML
  • Search for </head> (Hint: Click anywhere in the code and press CTRL + F for find box to appear! ) 
  • Now above that tag paste the following CSS code. 
 /*CSS STYLE Insatgram profile TopEarningBoy*/
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');

.txt h1{
    font-weight: 800;
    font-size:30px;
  font-family:oswald;
color:#444;
letter-spacing:0.5px;
}

.txt p{color:#444;
  font-family:oswald;
  letter-spacing:0.5px;
}

.imge img{
    border-radius: 50%;
float:left;
  margin-right:20px
}

.imge img:hover{
  opacity:0.7;
}
</style>
  • Save your template (but we aren't done yet! )
  • Now on your Blogger dashboard click on Layout
  • At your sidebar section click Add a Gadget
  • Select HTML/JavaScript gadget 
  • In the content field add the following JavaScript Code
<!--Instagram Profile Widget TopEarningBoy-->

<script type="text/javascript">      
function tebprof(json) {

  var url = json.data.profile_picture;
  var Username= json.data.username;
  var posts=json.data.counts.media;
  var follows=json.data.counts.follows;
  var followed_by=json.data.counts.followed_by;
  var bio=json.data.bio;
  
  var listing ="<div class='imge'>" + "<a href='https://www.instagram.com/topearningboy' target='_blank'><img src='" + url + "'/></a>" + "</div>" + "<div class='txt'>" + "<h1>" + Username + "</h1>" + "<p>"+ posts + " posts " + followed_by + " followers "  + follows + " following "+ "</p><p>" + bio + "</p></div>";
      
 document.write(listing);       

}
         
</script>
    

 <script type="text/javascript" src="https://api.instagram.com/v1/users/self/?access_token=Access Token&callback=tebprof">     
</script>    
  • Replace Oswald with font-family that you like and opacity as your requirement
  • Replace topearningboy with your Instagram username  
  • and Access Token with your generated access token  
  • Save and we are done! 

Need help?

This tutorial helps you add your Instagram profile to Blogger blog without using any third party service so you should give this fast loading widget a chance! If you still have any query regarding this tutorial then comment in the section below. Peace!

  
If you like our tutorials then don't forget to follow us on Facebook and Twitter. We are always active to help and live up to your expectations!

No comments:

Powered by Blogger.