Create Facebook and Twitter Custom Follower Counters

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 :)