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:
Go to Blogger Dashboard >> Template >> EditHTML
Now search for <head> tag and just after this paste the following code:
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 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
Reviewed by Maher Afrasiab
on
2:32:00 pm
Rating:
Reviewed by Maher Afrasiab
on
2:32:00 pm
Rating:
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.
ReplyDeleteHi Maher,
DeleteInteresting piece! Great to see someone write Auto Social Fans Counter Widget for Blogger who a fanatic is not or a complete skeptic.
The exit () function is used to exit your program and return control to the operating system. The return statement is used to return from a function and return control to the calling function. If you issue a return from the main () function, you are essentially returning control to the calling function, which is the operating system. In this case, the return statement and exit () function are similar.
Is there any function or library that will work with databases, like sql or oracle db. C just works with text databases? with xml too?
pls address me to some books about it, I am trying to build an application for database mining.
By the way do you have any YouTube videos, would love to watch it. I would like to connect you on LinkedIn, great to have experts like you in my connection (In case, if you don’t have any issues).
Thanks and Regards,
Raj
Thanks :)
ReplyDeletenice thread
ReplyDeletecomment from Azeez Blog
useful blog
ReplyDeletespring mvc interview questions
machine learning online training
servlet interview questions
mytectra.in
Nice Blog
ReplyDeleteI wish to show thanks to you just for bailing me out of this particular
ReplyDeletetrouble.As a result of checking through the net and meeting
techniques that were not productive, I thought my life was done.
aws training in bangalore
aws training in chennai