Display Your Twitter Followers as Text

119a213e29e524e3bf5a818814d45d59 0 Del.icio.us

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

Twitter

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.

Share your Opinion

and be a part of the discussion.

  1. Name (required)

    Mail (required)

    Website
    Your Comment

4 Inbound Links

These awesome sites are linking here!

  1. Display Your Twitter Followers as Text | Web Design Updates
  2. Sunday’s Best – week ending August 30 2009 | Tycoon Blogger
  3. Serious Monday Roundup #7 | Serradinho
  4. WordPress Tutorials

57 Vibrant Comments

I would love to hear yours!


  1. August 26, 2009

    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.


  2. August 26, 2009

    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. ;)


  3. August 26, 2009

    华晨 said:

    Unfortunately, Chinese can not visit Twitter.

    China blocked it.


    • August 26, 2009

      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.


  4. August 26, 2009

    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…


  5. August 26, 2009

    Chris Cline said:

    Thanks for the Great Info…..


  6. August 26, 2009

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


  7. August 26, 2009

    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.


  8. August 27, 2009

    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.


    • August 27, 2009

      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.


  9. August 27, 2009

    Reza Winandar said:

    Unfortunately, this is just for WordPress, myabe in the future the Blogger version will be released soon.


    • August 27, 2009

      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.


  10. August 27, 2009

    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.


  11. August 29, 2009

    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.


  12. September 1, 2009

    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?


    • September 1, 2009

      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.


  13. September 2, 2009

    Mukund said:

    Yes! I will look forward to that post! I hope I am able to understand that long post!


  14. September 8, 2009

    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


  15. September 9, 2009

    Ron Boracay said:

    Yeah, a nice clean code for a great twitter followers display.

    Followed you Nicholas.


  16. September 11, 2009

    BM said:

    This is so cool! I think I will try in on my WP blog


  17. September 12, 2009

    Mukund said:

    I await the post on “Display FeedBurner Subscribers count as text” by Nicholas! Hope he is getting that post done!


  18. September 12, 2009

    Michel Tel said:

    Great! Thanx for sharing.


  19. September 13, 2009

    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!


  20. September 15, 2009

    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.


    • September 15, 2009

      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.


      • September 16, 2009

        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!!


        • September 17, 2009

          akira07 said:

          I hope you can solve the problem quickly :D . So, since i can’t see it in this blog, can you give me some site url which implement this? Thanks in advance


          • September 18, 2009

            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!


  21. November 19, 2009

    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!


    • November 20, 2009

      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.


  22. May 1, 2010

    Marcel said:

    Hey Nicholas, thanks for placing this code. it’s great.

    Is it still possible to display the names (nicknames)

    i want to generate a list of my followers

    Thanks!

    Kind regrards from Holland


  23. May 1, 2010

    Marcel said:

    i’ve another question.

    how can i change the username into $_GET['username']

    like thisscript.php?username=pronkmarcel