Display Number of Twitter Followers Count as Text

Posted by Lasantha Bandara File Under : jquery, twitter 5 Comments

This tutorial explains how to show your number of twitter followers count as a plain text on your website or blog. There are many online services to show your number of Twitter followers, but they give ugly badges or automatically generate a link back to their websites. Also using the method given below you can get followers count without Twitter authentication or api.

1. First you need to add jQuery into your website. Many websites already use jQuery, add these 2 lines into the head section of your website if jQuery is not already included:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script>

2. After that add this code to the head section:

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

var my_twitter_username = 'pbtemplates';

$.ajax({
    url: "https://cdn.syndication.twimg.com/widgets/followbutton/info.json?screen_names=" + my_twitter_username,
    dataType: 'jsonp',
    crossDomain: true
}).done(function(data) {
    $(".mytwitterfollowers").text(data[0]['followers_count']);
}); 
  
});

//]]>
</script>

Note: You must replace Twitter username (pbtemplates) of above code with your Twitter username.

3. Now when you want to display number of Twitter followers just use this code:

<span class="mytwitterfollowers"></span>

Example:

I have <span class="mytwitterfollowers"></span> Twitter followers.

5 thoughts on “Display Number of Twitter Followers Count as Text

  1. Gracias por el aporte, ya he realizado un post con este truco sitando como fuente original tu blog.

    Saludos!

  2. lovely tutorial. simple and sharp one. like it. do you know about visitor counter like this?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.