Display Your Twitter Followers as Text
Awesome Content: Set Up For Online Success
If you ask me, those little rectangular chicklets that people use to display their twitter followers and their Feedburner subscribers are getting old. Just look around. Every blog in the universe seems to have one.
Every blog…except this one.
If you check out the top right corner of each page you’ll see my twitter followers displayed as text updated every hour. It actually took me a while to find a good explanation as to how to get this done.
If you want to do something similar on your site this article is your step-by-step guide to getting it done.
There are really only two fairly simple steps required to add this to your site. In the first step you will be pasting the code into your site that will do all the hard work. That code will work to contact twitter once per hour and request the number of followers on your account. It will then store that number in a variable that can easily be displayed anywhere in your template.
In the second step we are going to place that variable in the theme so that it can display our count.
Take note that this process is designed specifically for Wordpress websites.
Modify your theme’s functions.php file
For this first step you’ll need to browse through your site’s files to locate your theme’s functions.php file. When you open it scroll all the way to the bottom and locate the final line of code. It will look something like this:
?>
Once you have located that piece of code you will need to create a blank line above it and paste the following code onto it:
function string_getInsertedString($long_string,$short_string,$is_html=false){
if($short_string>=strlen($long_string))return false;
$insertion_length=strlen($long_string)-strlen($short_string);
for($i=0;$i<strlen ($short_string);++$i){
if($long_string[$i]!=$short_string[$i])break;
}
$inserted_string=substr($long_string,$i,$insertion_length);
if($is_html && $inserted_string[$insertion_length-1]=='<'){
$inserted_string='<'.substr($inserted_string,0,$insertion_length-1);
}
return $inserted_string;
}
function DOMElement_getOuterHTML($document,$element){
$html=$document->saveHTML();
$element->parentNode->removeChild($element);
$html2=$document->saveHTML();
return string_getInsertedString($html,$html2,true);
}
function getFollowers($username){
$x = file_get_contents("http://twitter.com/sitesketch101");
$doc = new DomDocument;
@$doc->loadHTML($x);
$ele = $doc->getElementById('follower_count');
$innerHTML=preg_replace('/^< [^>]*>(.*)< [^>]*>$/',"\1",DOMElement_getOuterHTML($doc,$ele));
return $innerHTML;
}
Be sure to locate my twitter username, sitesketch101, and replace it with your own. I’ve made it bold in the code so you can clearly see where it is.
I know that all of this code probably looks intimidating but it’s only a copy-and-paste function so it should be fairly simple.
Insert the twitter count into your theme
Next open your theme’s header.php file and paste in the following code wherever you want to display the text:
<?php echo getFollowers("instantshift")." Followers"; ?>
You can replace or modify the word ‘Followers’ with the label of your choice but be very careful not to change any of the quotation marks, semi-colons or anything else. Only change the letters to reflect your desired label.
That’s all there is to it. I hope you don’t have any trouble putting this to work on your site. Happy blogging.
Nicholas Cardot
Nick uses his blog Site Sketch 101 to express his passion for helping bloggers and webmasters connect with real people through brilliant designs, unique content, and genuine creativity. Nicholas Cardot has 199 post(s) at Site Sketch 101
Share your Opinion
and be a part of the discussion.
4 Inbound Links
These awesome sites are linking here!
- Display Your Twitter Followers as Text | Web Design Updates
- Sunday’s Best – week ending August 30 2009 | Tycoon Blogger
- Serious Monday Roundup #7 | Serradinho
- WordPress Tutorials
55 Vibrant Comments
I would love to hear yours!
Eric B. said:
Thanks for the tip! I always thought those Twitter follower box things didn’t look very nice.
I noticed that you used blockquote for displaying the code. I would suggest using a code box (possibly with syntax highlighting) plugin also preserves whitespace.
Nicholas Z. Cardot said:
Eric B. –> How do I set that up? I’ll have to do a little research because that would definitely be more effective than the blockquote that I used.
Eric B. said:
I use the the WP-Syntax plugin for Wordpress.
http://wordpress.org/extend/plugins/wp-syntax/
Nicholas Z. Cardot said:
Eric B. –> How does that look. Is that a better layout for code?
Eric B. said:
You can see some screenshots here: http://wordpress.org/extend/plugins/wp-syntax/screenshots/
Stefan said:
Good tutorial. I thought about and decided I could create a similar plugin for Wordpress since it’s such a straight forward process. Then I found Twounter which does exactly the same as your code.
First Google Targeted Section and now this. Feels like there’s always someone before me.
Nicholas Z. Cardot said:
Stefan –> Ha ha. I’m not familiar with Twounter, but if it does the work for you then that would be a great tool to use.
Sat Chen said:
Never heard of Twounter before. Going to have to play around with it.
华晨 said:
Unfortunately, Chinese can not visit Twitter.
China blocked it.
Arisu said:
If you want to promote your site or something in twitter you can get someone outside the contry to do it for you. I know it´s not as fun as doing it yourself and meet people in the process but it´s the only way I can think to avoid the block.
Arisu said:
Thanks for the code
I rather use a code than a plugin cause you know… when a plugin fails things can get oh-so-wrong…
Nicholas Z. Cardot said:
Plus it seems like the more plugins that your site has to call the slower it becomes. By coding it into pre-existing files you don’t slow things down as much.
Chris Cline said:
Thanks for the Great Info…..
Nicholas Z. Cardot said:
You’re welcome, Chris. Thanks for stopping by and commenting.
Fran Civile said:
Thank you Nicholas! I’m amazed at the amount of code it takes to get that little line of text… elegant in its
simplicity.
I might try it…
Fran
Nicholas Z. Cardot said:
It is a lot of code but it’s really not complicated to implement. It’s really just a copy and paste operation. It is neat though.
gautam hans said:
thanx nicholas, though i don’t have a wordpress blog but your post helped get one for myself using search. I got a counter which uses javascript so it works good for me.
Nicholas Z. Cardot said:
Looks good. You said that you use blogspot didn’t you?
Jiefeng said:
To use Twitter in China seems a little difficult. But I’m still using tools like Hellotxt.com to post short messages, though we can not visit Twitter. But I still receive followers’ mails.
Nicholas Z. Cardot said:
Jiefeng –> Yeah, if you’re in China, I wouldn’t recommend trying to use twitter. The purpose of it is to be able to connect with real people and if you have someone else doing it for you or if you find a way to just pump out advertisements for your site then you are nothing more than a spammer so I recommend that you do just use services like Hellotxt.com. That’s a good idea.
Reza Winandar said:
Unfortunately, this is just for Wordpress, myabe in the future the Blogger version will be released soon.
Nicholas Z. Cardot said:
Reza Winandar –> I’ll look around and see what I can find. I think another user on here mentioned that they found something so I’ll get in touch with them and see what we can come up with.
Typhoon said:
That’s a really nice thing. But I will have to look that where I can place it on my blog as my blog is not having empty space left and is fully packed.
Nicholas Z. Cardot said:
Typhoon –> You certainly don’t want to put something on your site just for the sake of putting it on your site. Only use it if you can really make it look nice.
Tycoon Blogger said:
I agree that this does look much cooler and cleaner then those chicklet boxes. I will have to look into this when I have some time. I am going to include this in my Sundays Best post as I think other bloggers will benefit from this.
Nicholas Z. Cardot said:
Tycoon Blogger –> Thanks for that. I think this will be my third week in a row on that list and I’m very grateful to you for that.
Mukund said:
Thanks for this wonderful tip! I always had a problem with the twitter box. It disturbed the “Subscribe Me” widget of my blog. Atlast, I am free. Is there a similar hack to display feed burner subscriber’s count in text format?
Nicholas Z. Cardot said:
Mukund –> Yes there is and I will be posting it next week. It’s pretty lengthy or I would post it right in a comment here. With text there are so many more customization options.
Mukund said:
Yes! I will look forward to that post! I hope I am able to understand that long post!
Nicholas Z. Cardot said:
Mukund –> It is long but it is mostly copy and paste work like this one so it should be fairly simple to understand.
ZXT said:
Okay I hope I don’t get lost inside those codes! Like what I’ve said…I’m a 11 day old blogger. Anyways will try that.
Z
Nicholas Z. Cardot said:
ZXT –> I hope you don’t either. Feel free to let me know if you have some errors on it.
Ron Boracay said:
Yeah, a nice clean code for a great twitter followers display.
Followed you Nicholas.
BM said:
This is so cool! I think I will try in on my WP blog
Mukund said:
Yes!! Many bloggers don’t show their blog at all! Even Arisu does not! I would love to visit other blogs. I hope people start posting comments with their Blog URL filled!!
Nicholas Z. Cardot said:
Mukund –> Arisu doesn’t post hers because she doesn’t have one yet. She is going to start posting it in her link as soon as she gets one up and running.
Mukund said:
Oh!! Ok!! That is fine! Thanks for that Nick! Hope she starts one soon! I am eager to read her blog!!
Nicholas Z. Cardot said:
Mukund –> So am I. I know what domain she has for it so I’ve been checking it every couple of days hoping to see it but it’s not up yet so I just keep checking.
Mukund said:
Let me know about her blog once it is completely done. I will visit her blog and I am sure I will have lots to learn from her!!
Mukund said:
I await the post on “Display FeedBurner Subscribers count as text” by Nicholas! Hope he is getting that post done!
Ron Boracay said:
This is posted now Mukund. In case you overlooked that post, here it is:
http://www.sitesketch101.com/feedburner-count
Mukund said:
Yeah!! Thanks Ron!! I checked that out! But I was not ablt to implement that trick on blogger. I am working on that code now! Hope I will get it done!!
Michel Tel said:
Great! Thanx for sharing.
Nicholas Z. Cardot said:
Michel Tel –> You’re welcome. I hope that it works well for you!
Mezanul said:
Thanks for this nice tip to display the number of followers using text in place of a chiklets.
I had once used the chiklet but in the next moment I removed it from my site. This one is more powerful than the chiklet thing!
Nicholas Z. Cardot said:
Mezanul –> It’s just so much more attractive looking than the chicklets that it really does look more powerful.
akira07 said:
Dunno why, when i see this article, i’m looking for your twitter stat but i find nothing.
But i can imagine it, and i’m agree it’s more simple and cooler than chicklet.
Nicholas Z. Cardot said:
akira07 –> I just took it off because Twitter keeps sending back errors and that shuts down my entire site. I need to code in one that calls for the number and if an error gets sent back then it just ignores it and uses the old number that it got from the previous inquiry.
Mukund said:
You are right Nicholas!! I found errors when I loaded your site few days before. Some internall functional call error. I thought of informing you. But when I refresh my page, that error gets off. So, I thought there is a problem with my browser. Any way, come up with a solution soon!!
akira07 said:
I hope you can solve the problem quickly
. So, since i can’t see it in this blog, can you give me some site url which implement this? Thanks in advance
Mukund said:
I have implemented this concept in blogger. You can take a look at my blog. If you want any help, let me know. I will email you how to do that! It is very simple!
Ron Boracay said:
Mukund, do you use script in here? I love to learn how to do that. I am a heavy blogger blogspot user. Please mail me the code. Thanks!
Mukund said:
For sure!! Why not?? Please get me your email address and I will let you know the code!!
Robomaster said:
Okay, I’ll def be using this for my blog soon. Now I just figure out how to code this into my header…ugh!
Nicholas Cardot said:
Robomaster –> Ha ha. I understand that feeling. It’s good to dive into it and learn though. You’ll be better for it. Reading articles like this is how I learned and grew and developed into who I am today.