dateswhen.blogspot.in: Auto Social Fans Counter Widget for Blogger

Thursday 8 September 2016

Auto Social Fans Counter Widget for Blogger

Recently I am designing a blogger template for my customer, my customer said to me that he wants a auto social counter widget in his template. So, I think that like other widgets this auto social fans counter widget is also available somewhere on any site.

So, I head over to google and search for this widget but you know I found only one widget which counts automatically the social fans. That widget is designed by Syed Faizan Ali from MyBloggerLab. But there is big problem in it. It only counts the fans of facebook and twitter. But in my case I need counter of some more social networks such as instagram, youtube etc.

At last, I come to know that there is o auto social counter widget yet available for blogger. Then I think that lets build one. Then, I start making this widget. First I think that I should get help from APIs to build the widget, but unfortunately I am very bad in using the APIs.

Then an awesome idea came into my mind. As you know almost every social network offers a follow button. And except some follow buttons, the all others also have a little bubble attached with them which shows the total fans or followers. At that time I asked to myself that why not I use these follow buttons to build the auto social fans counter widget for blogspot blogs.

And then I dig out this widget after spending some hours in front of code editor. The widget have simple design. But don't worry in near future the second version of this widget will come soon. But for now you can use this widget too.

Want to install the widget? If yes then follow the below steps:

Step 1 :

In this widget I have used font awesome icons. So, in order to install this widget and make this widget work you have to first install the font awesome icons to your blogger template. For this follow the below steps:
Go to Blogger Dashboard >> Template >> EditHTML
Now search for <head> tag and just after this paste the following code:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Step 3 :

Now it's time to add the css code of the widget so that your social counter widget get its style, for this follow the below steps.

Again Goto Blogger Dashboard and click on Template tab
Now click on EditHTML button and then search for ]]></b:skin> tag. Now, just before it paste the following code and then click on save template.

.fb-likebox {
padding: 10px;
font-size: 20px;
}
.twitter-follow {padding:10px;
font-size: 20px; }
.gplus-follow {margin-left: 0px;
padding: 10px;

font-size: 20px;
}
.youtube-follow {margin-left: 0px;
padding: 10px;

font-size: 20px;
}

Step 4 :

Ok, guys now its time to add the final code. This will be placed at that place where you want your widget to be displayed. Mainly I have designed this widget for sidebar. So, below I show you how to add this auto social counter widget in sidebar. Follow the below steps:

Goto Blogger dashboard.
Now click on the layout tab and from sidebar click on add new widget.
Now from the list select this widget:

HTML/JavaScript Add

Add third-party functionality or other code to your blog.

Copy the below code and paste the code in the new HTML/Javescript widget. And then click on the save button:

<div class="socialcounter">

<div class="fb-likebox">
<span><span style=" position: relative;

font-weight: bold;"><i class="fa fa-facebook"></i></span>
<div class="fb-like" data-href="https://www.facebook.com/itmagzine1" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></span>
</div>
<div class="twitter-follow">
<span><span><span style=" position: relative;

font-weight: bold;"><i class="fa fa-twitter"></i></span>
<a href="https://twitter.com/MaherAfrasiab1" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @MaherAfrasiab1</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</span></span></div>
</div>
</div> <div class="gplus-follow">
<span><span style=" position: relative;

font-weight: bold;"> <i class="fa fa-google-plus"></i></span>
<script src="https://apis.google.com/js/platform.js" async defer></script>

<-- Place this tag where you want the button to render. -->
<div class="g-follow" data-href="https://plus.google.com/gplus username or id" data-rel="{relationshipType}"></div> <div class="youtube-follow">
<span><span><span style=" position: relative;

font-weight: bold;"><i class="fa fa-youtube"></i></span>
</span><script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channel="your youtube url" data-layout="default" data-count="default"></div></span></div>