Social Media Follower Counter Widget To BlogSpot

How To Add Social Media Follower Counter Widget To BlogSpot

Adding this widget to Blogspot or blogger.com blog is very easy and quick. All you need to do is follow the step by step guide and please do not implement it if you are confused, feel free to question me at the comment section.

Step 1

Simply visit blogger.com >> locate layout section

Step 2

Clink on Add a Gadget >> Now clink on HTML/JavaScript >> Paste the below code inside the box.

<style>
#bungkus_social{color:white;background-color:#f9f9f9;margin:10px}#bungkus_social
.item{padding:5px;font-size:11px;border-radius:10px;float:left;margin:0 10px 10px 0;background:grey;text-align:center;min-width:50px;min-height:50px;border-bottom:10px solid rgba(0,0,0,.15);text-transform:uppercase}#bungkus_social .item.facebook{background:#3a5795}#bungkus_social .item.instagram{background:#517fa4}#bungkus_social .item.google{background:#dd4b39}#bungkus_social .item.pinterest{background:#cb2027}#bungkus_social
.item i{border-radius:100%;background:#2c1c1c1a;width:38%;margin:0 auto}#bungkus_social .item i,#bungkus_social
.item .count{padding:10px;display:block;font-size:30px}#bungkus_social
.item .count{font-weight:600}#total,#total_k{padding:10px;font-weight:bold;font-size:20px}#total:before,#total_k:before{content:'Total Fans:';font-weight:normal}#bungkus_social
.item{color:#fff}@media screen and (max-width:265px){#bungkus_social .item{width:100%;padding:0}#bungkus_social
.item i{background:transparent}}
</style>
<div id="bungkus_social">
  
    <a class="item facebook"><i class="fa fa-facebook"></i><span class="count"></span>Likes</a>
    <a class="item instagram"><i class="fa fa-instagram"></i><span class="count"> </span>Followers</a>
  
   
    <a class="item pinterest"><i class="fa fa-pinterest"></i><span class="count"></span>Followers</a>
</div>
<script type='text/javascript' src='https://rawgit.com/mastamvan/backup/master/social_counter.js'></script>
<script>
    $('#bungkus_social').SocialCounter({
        //Get Usernames
        facebook_user: 'papixelhub',
        instagram_user: 'papixelhub',
        google_plus_id: '106864170567833612495',
        youtube_user: 'papixelhub',
        pinterest_user: 'premmaac',
        twitter_user: 'papixelhub',
        //Get Access Tokens,keys,client_ids
        instagram_token: '22591297957.1677ed0.da4845aa1a824c0391796367c1f8556c',
        google_plus_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
        facebook_token: 'EAAZAXuSTLlB4BAPNIdVxvdfN79TJWsM3QAVMettor7aq6hbVjaXkA2g0EZAvgQvyZCZB8DCgImofXlrbLZBz6ZA3eeduP0S3TTC14rogHtxUDLkdEf3dSmPWQHE6UAyCa1Cl2ZAABIZCbhnbgjncxNkeZAmGNyrn4YF7nro31p2i89sHY67Qk515RvaC9n5FEnc4n3LFP0fjQFElhFAOIbyRJccqHJhWDvlF4OpfpkStG2wZDZD',
        youtube_key: 'AIzaSyAQKW9MVAWqoWQwYzXjmtNgAkbe28eLO2Q',
    });
</script>

Customization

Replace the below codes with your usernames and IDs

        facebook_user: 'obhiabablog',

        instagram_user: 'itsyourbjokos',

        google_plus_id: '106864170567833612495',

        youtube_user: 'MrGaziyama',

        pinterest_user: 'jokosohen',

        twitter_user: 'obhiabablog',

Step 3 - Add Font Awesome to BlogSpot

If you already use Font Awesome then do not add this again but if you dont, simply visit the HTML section of your blog. ( Template >> Edit HTML)

Using CTRL + F search for  </head>  . 

Just above  </head> in your template, simply paste the below code.

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

After pasting, save your template and view your blog!

Final Word

This widget was demanded by a friend of mine and you too can demand any widget and be sure i will get it ready. Big thanks to God Almighty and every other blogger that have been an inspiration to me.