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.

Auto Social Fans Counter Widget for Blogger

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/JavaScriptHTML/JavaScriptAdd
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> 

That's it, you have successfully installed the new auto social counter with follow buttons social widget to your blogger blog. Enjoy!

Customization

Before you complete there are some customizations which you have to do. In above code which is placed in step 4. Change all the bold text with you social profile or page urls and usernames accordingly. At first, change the facebook url with your page url. At second change the twitter profile username two times in the code. And at third change the google+ page or profile link with your own. hah.. at last change the url with your youtube channel url.
That's it. You have customized it.

Second version of Auto Social Counter widget for blogger

That's not over yet. This widget is pretty simple. So, please stay with patient because soon the second version of this widget will also come with more awesome features and with awesome design.

Hope that you liked the widget. let me know if you are facing any problem with this widget or have any suggestions regarding the widget. It is pleasure for me :)
Don't forget to share this widget with others. Click below on your favourite social network and your friends or followers get this widget.

Auto Social Fans Counter Widget for Blogger Auto Social Fans Counter Widget for Blogger Reviewed by Maher Afrasiab on 2:32:00 pm Rating: 5

5 comments:

  1. Hi, number of likes for Facebook page isn't working. I have this widget live in my blog www.onepeso.net. Please help me fix it. Thank you.

    ReplyDelete
  2. The share your really gives us excitement. Thanks for your sharing. If you feel tired at work or study try to participate in our games to bring the most exciting feeling. Thank you!
    hotmail sign in | red ball game | 192.168.1.1

    ReplyDelete
  3. This is one of the cult game now, a lot of people enjoy playing them . Also you can refer to the game :
    animal jam 2 | five nights at freddys 2 | hotmail login

    ReplyDelete

Powered by Blogger.