December 11, 2009

Create Facebook and Twitter Custom Follower Counters


Follower-Counter I was thinking as why some services like Facebook, Digg, orkut, stumbleupon has no follower, fan or friends counter. While I was customizing my template I needed a follower counter for Facebook but unfortunately I could not find any. So I decided that why not create my own custom follower counter. This idea enabled me to create a follower counter for any service you like!

This is how our Custom follower counter for Facebook looks like,

227 Followers

or a blinking one for browsers other then IE,

227+ Fans

 

To add a counter you just need to do the following,

  1. Go To Blogger > Layout
  2. Choose Add a Gadget or Add a Page element
  3. Choose HTML/JavaScript
  4. Finally paste the code below inside the HTML/JavaScript widget,

 

<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">

<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 1px solid #8A8A8A; border-right: 1px solid #ddd; border-left: 1px solid #8A8A8A; border-bottom: 1px solid #ddd; padding: 0px 1px;">227<blink>+</blink></span> Followers</span>

 

 

Customization

The bolded text in the code above are described below,

background-color: This defines the background colour of the counter. To change the hexadecimal color value to something different use our colour chart.

background-color: This defines the background colour of the number count i.e 227 You can change its colour using the same color chart.

color: This defines the color of the text i.e 227 and Followers

<blink>+</blink>: The code in blue is responsible for blink the plus sign. You can write anything between <blink> and </blink> For instance symbols like k (kilo), .. etc If you don’t want this blinking effect simply delete <blink>+</blink> from the main code above.

227 and Followers: Replace these with your own follower count and count name.

Some Example Counters For Feed Readers and Twitter

FEED COUNTER

227 Readers

 

<span sans ms style=" background-color:#CC9966; border-top: 1px solid #F2F2F2; border-right: 1px solid #666; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #666; padding: 2px 4px 4px 4px; color: #000; font-family: sans-serif, arial; font-size: 10px;">

<span style=" background-color:#CCCCCC; font-size: 9px; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff; padding: 0px 1px;">227</span> Readers</span>

TWITTER COUNTER

227Tweeters

<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #33CCFF; font-family: sans-serif, arial; font-size: 10px;">

<span style=" background-color:#33CCFF; font-size: 9px; color:#fff; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff;  padding: 0px 1px;">227</span>Tweeters</span>


 

The Number Count Is Manual!

Since this widget is based fully on CSS and it uses no programming code so you will need to update your follower count yourself each time you receive a new Facebook follower, Feed Reader or Twitter follower etc. I hope that is not difficult to do so :)

I am sure you will enjoy reading these too,

Your feedback and suggestions are always welcomed.





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

21 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. hello,i am facing some problem with windows live writer.when i am trying to publish new post its showing SSL/TLS Secure channel error.u can see the full message by image link below.
    http://i45.tinypic.com/2zqc4rl.jpg
    plz help me with that.

    ReplyDelete
  2. Mohammad That is amazing. Thanks for making it so simple!


    Jawwad

    ReplyDelete
  3. Hello Mohemmed !
    Izhar Fareed here

    Actually i also modified revolution template for my site www.Circuit-Lab.Com - But i have some problems.

    Please help me !

    I dont want to see after post adspace on homepage. But it is. I wanna see it when the post is fully expand.

    Please Help.

    Your Bro
    Mohemmed Izhar Fareed

    ReplyDelete
  4. @Amit
    Ask this question on windows live writers post! I will answer your question there. Off-topics questions will not be answered elsewhere. Sorry for this. But I want to keep things clean :>
    @jawwad

    you welcome dear!

    @izhar

    Kindly ask off-topic questions on their respective posts. I will the answer to this question on this post -> MBT Church Theme

    ReplyDelete
  5. Is it realtime facebook fans counter or just dummy?

    ReplyDelete
  6. @AfeaZd

    Of Course Dummy friend :>
    You will need to edit the count manually and of course you can do that!

    ReplyDelete
  7. hmmm...much tricks here..reading more

    ReplyDelete
  8. How about for wordpress? We need to know who is following, not just count the number of comments. This is for our personal site, since a lot of new comers cannot comment on blogspot. ashotofbrandy.com

    Thanks,

    Concerned

    ReplyDelete
  9. @LynnStrauch

    If you are using a paid version of wordpress then you can easily add the above CSS and html code to your Wordpress blog by editing your style sheet. and I know that is not possible if you are using the free wordpress.

    ReplyDelete
  10. How do you add the image on the side, the little logo. I want to make it more cute, you could say. ^^
    Thanks for sharing all this with us.

    ReplyDelete
  11. After using new template I cannot remove some facebook floating likes box widgets,it's automatically comes with every new template i changed ,and also if i use this facebook likes box then my drop down menu does't work , Please Help.

    ReplyDelete
  12. Thanx for this informative wedgits great

    ReplyDelete
  13. Thanks for the tricks, very cool..

    ReplyDelete
  14. Hello Mohemmed !
    this post is very help full to me.i need an information that how to add Google followers to word press blog
    http://edu.finstechnologies.com is my website to which i want to add Google followers gadget

    ReplyDelete
  15. Thanks for widgate twitter and facebook gadget
    Suzuki Semarang

    ReplyDelete
  16. It's cool Buddy! But I thought it's updating automatically,.,
    But Thanks a lot Brother,., Your blog Rocks.!
    Free Download Magnovus Premium Wordpress Theme

    ReplyDelete