You Are Here: Home » Hacks » How-To » Programming » Social Media » Wordpress

Add twitter counter to a wordpress.com blog – the javascript-less version of twitter counter

By on March 5th, 2009     

twittercounter on digitizorHave you seen those cool chiclets which show one's count of twitter followers just like the feedburner chiclet that shows the subscriber count in a nice chicletized fashion? Anyways those cool twitter counter chiclets are a result of an awesome service from Twittercounter. To add it to your blog, all you do is go to Twittercounter’s site and enter in your Twitter username, which in turn generates some HTML that you can copy and paste. But this HTML code contains javascript and as such, it cannot be used with wordpress.com hosted blogs as wordpress.com hosted blogs donot allow javascript.

Their code, which contains javascript looks something like this:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=Your-User-Name"></script>

So, we will present you with a simple hack that would help you to flaunt your twitter count even if you blog on a wordpress.com hosted blog. What we will be doing is to use the twittercounter source image. Even we do the same, just check this screenshot:

All you need to do is to place these img tags at the section of your website where you want your twittercounter to be placed as you would place any other image. The twittercounter chiclet is also an image after all, only that a script generates it. In the codes given below replace your-twitter-username with a username whose twitter follower counter you want to display. Here are the html codes for the javascript-less version of twittercounter alsong with the sample images that would be rendered by these codes:

<img src="http://twittercounter.com/counter/?username=your-twitter-username&style=" border=0>

<img src="http://twittercounter.com/counter/?username=your-twitter-username&style=white" border=0>

<img src="http://twittercounter.com/counter/?username=your-twitter-username&style=blue" border=0>

<img src="http://twittercounter.com/counter/?username=your-twitter-username&style=black" border=0>

UPDATE:

In case you are facing problems with the above code as in you are unable to see any images or if you have problems such as wordpress replacing your http code for the twitter counter image, then you should manually replace the curly quotes in the above links by normal quotes ( " ) and then use the URL. Thank you Morris.

Technorati Tags: , , , ,




         Submit to Reddit     Stumble


Related Posts by Tags: , , , , , ,



  • http://makedesign.org/ WuWu

    Very nice post, thanks!!!

  • http://www.jayr.co.cc jayr

    excellent job!!

  • http://morris108.wordpress.com morris

    Please tell me what I am doing wrong?

    img src=”//twittercounter.com/counter/?username=morris108&style=white”” border=”0″

    And thanks for the post

  • http://morris108.wordpress.com morris

    Thanks for your reply – tried quickly – no success – am I supposed to be registered with twittercounter?

    I copied your code from page source and your image showed just fine, changed the username and still I get no numbers.
    Will put more time into his much later

  • http://medialdigital.wordpress.com Ulrike Langer

    Great, thanks for this service. Now I could finally put up my own Twittercounter.

  • gregpress

    Awesome! Thanks. (The code works for me.)

  • http://digitizor.com Debjit

    @gregpress, welcs

  • http://www.theanand.com/ TheAnand

    Thanks a ton mate…it was screwing up my divs….this solution helped my solve tht :)

  • http://digitizor.com Debjit

    @TheAnand, welcome!

  • http://www.clinics1.com MoRaMoocoxips

    Great site this digitizor.com and I am really pleased to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)

  • Pingback: How to speed up your wordpress installation and blog/website page loading time? « Digitizor

  • http://www.youtube.com/watch?v=5iENIyb2yFk Tigagoggew

    formidable site this digitizor.com terrific to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)

  • Vince Delmonte

    My friend on Orkut shared this link with me and I’m not dissapointed that I came to your blog.

  • Roger Servin

    I installed the twitter counter on my blog and the numbers show up, but how often does it update? It doesn’t reflect the right number. I have 10 more followers than it shows.

  • http://digitizor.com The Digitizor

    @Roger, I have also seen a variation in the number of followers shown on the counter compared to that on your profile. For a more accurate count, switch to the java script counter in case your own hosted blog!

  • http://www.wasi620.blogspot.com waqas

    Really It Cool and its Works

  • http://www.wasi620.blogspot.com waqas

    Really Its Cool

  • www.nailyournovel.com

    Genius, thank you!

    • Anonymous

      Glad you liked it :-)

      • http://www.nailyournovel.com dirtywhitecandy

        Teensy question? It doesn’t seem to update. I have more followers on Twitter than it shows – how often does it refresh?

        • Anonymous

          It is not very dynamic as we are just grabbing the image here which is generally cached. Still, you get a fair cloes count of your followers :-)

  • http://digitizor.com Debjit

    Hey morris, do NOT include the zero value for the border attribute in quotes.

    cheers,
    Debjit

  • http://digitizor.com Debjit

    hey morris, send us your twitter username via email to dkd903@gmail.com, we will send you the link :-)

  • http://morris108.wordpress.com morris

    I did …

    Thanking you – with expectation

  • http://morris108.wordpress.com morris

    I tried putting it in a text widget of its own – no help.

    But look what wordpress is doing to the code, it removes the http, and adds straight quotes, possibly because you have used curly quotes.

    And others won’t tell you they are failing because they’ll be afraid of any quote request from you

    img src=”//twittercounter.com/counter/?username=morris108&style=white”” border=”0″

  • http://morris108.wordpress.com morris

    I did not receive anything from you by email, in case you sent it, and it was lost in email, please post it here. My username is morris108
    http://twitter.com/morris108 – which I emailed to you

  • http://digitizor.com Debjit

    hey morris, we checked your site… you seem to use tha same theme as we do. so there shouldn’t be any problem with the twittercounter code. If you want we could do it for you… please mail us a request and we will send you the quote :-)

    Cheers,
    Debjit

  • http://digitizor.com Debjit

    @Ulrike, Welcome!

  • http://digitizor.com Debjit

    Hey Morris, thank you for pointing it out and we are glad that you did it on your own :-)

  • http://morris108.wordpress.com morris

    Debjit I have not succeeded – just tell me – can you get my counter to appear on a test page of yours – I get the image, ¡¡¡ but there are no numbers in the box!!!! -:)



Add twitter counter to a wordpress.com blog – the javascript-less version of twitter counter was originally published on Digitizor.com on March 5, 2009 - 12:44 pm (Indian Standard Time)