BlogSpot Social Media Follower Counter Widget

Major social media networks have turned the blogging sphere into a home of connection. Using social networks, we can acquire more blog readers while keeping the already existing ones. Facebook being the largest brings thousands of visit to this blog a week, so having an FB page and group would be a wise decision, so as to keep all my visitors engaged and updated.

While other networks including Twitter, Google plus, Instagram play a big traffic role for us. On my previous post, I explained where you can advertise your blog for free, and today I am showing you  a way to keep every visitor stuck to your blog and content.

Features Of BlogSpot Social Media Follower Counter Widget

Now let's create a simple, responsive and fast loading social media follower counter for our BlogSpot blogs that will help us gain more likes and followers on major social media networks. This widget will only contain plugins for the networks below:

1. Facebook
2. Twitter
3. Google Plus
4. Pinterest
5. YouTube
6. Instagram

These being the biggest and most used websites I have only included these on the follower counter widget. The widget is neat and beautiful. Well coded to fit the look of your blog with every social network having its  name, the number of followers and icon. 

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:12px;font-size:11px;border-radius:5px;float:left;margin:0 10px 10px 0;background:grey;text-align:center;min-width:90px;min-height:130px;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.youtube{background:#b31217}#bungkus_social .item.pinterest{background:#cb2027}#bungkus_social .item.twitter{background:#00a5e5}#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 twitter"><i class="fa fa-twitter"></i><span class="count"></span>Followers</a>

    <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 google"><i class="fa fa-google-plus"></i><span class="count"></span>Followers</a>

    <a class="item youtube"><i class="fa fa-youtube"></i><span class="count"></span>Subscribers</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: 'obhiabablog',

        instagram_user: 'itsyourbjokos',

        google_plus_id: '106864170567833612495',

        youtube_user: 'MrGaziyama',

        pinterest_user: 'jokosohen',

        twitter_user: 'obhiabablog',

        //Get Access Tokens,keys,client_ids

        instagram_token: '1466232857.b8ae3c3.de2526f6c4a04c329bcc4d3d91f5aea0',

        google_plus_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',

        facebook_token: '1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',

        youtube_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',

    });

</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.

Tweet