404 Not Found


nginx/1.4.6 (Ubuntu)

Twitter followers counter tutorial

Twitter followers tutorial

Twitter followers tutorial

You’re probably wondering why should i bother if we have TwitterCounter to show us the followers, well what if i don’t like the way it shows them what if i wanna do a counter with my own graphics , well i’m gonna show you how.

We’re gonna need the jpg to show the followers on and 2 classes to read the data.

Let’s get some twitter icons so that we can create a simple image in photoshop. With a simple google search we get on this article 100+ Remarkably Beautiful Twitter Icons And Buttons created by www.hongkiat.com.

I did a simple image that you can use if you want it’s all added to the download package.

Now let’s create the php code that will display that followers number…

We’re gonna need 2 classes that will get our job done easily, a twitter class and a class that will transform the xml output into an array one.

My follow chocksy image

My follow chocksy image

Also you have to find out your id number that’s a little tricky and i don’t understand why twitter is not showing that so that you can find it. So here is how you can find your twitter id:

Go on your account page and on the right you have a button named RSS, now that button has an url like http://twitter.com/statuses/user_timeline/18107925.rss so the bolded number is your id that you’ll have to use in our php code.

include('xml2array.php');
include('twitter.lib.php');
$user = 'yournickname';
$password = 'yourpassword';

$twitter = new Twitter($user, $password);

$friends = $twitter->showUser('xml','yourid_number');
$xml=new XML2Array();
$arr=$xml->parse($friends);
$followers=$arr['user']['followers_count']['value'].' <span style='font-size:12px;'>followers</span>';

We will now show the image with the number in the right place. We’ll link the image to our account so that people can follow us and place the followers in the div we have between the a tags.

<div>
<a href="http://www.twitter.com/yournickname" target="_blank" style="text-decoration:none;"><div class="twitter" id="tell_followers"><?=$followers?></div></a>
</div>

Here we have the css that takes care of the followers number display.

.twitter{
color:#FFFFFF;
font-family:Tahoma;
font-size:24px;
line-height:14pt;
background:url(follow_me.png) no-repeat;
height:85px;
width:170px;
padding:35px 0 0 57px;
text-decoration:none;
cursor:pointer;
}

UPDATE (for blogers with a lot of visitors)

Since we use this script to make requests to the twitter API we have to be careful because the API does not allow us to make more than 100 requests per hour so if you have more than 100 visitors per hour you have to make this changes:

First of all let’s create a MYSQL table here is the SQL code for the table, a very simple one :

 CREATE TABLE `ajaxmast_blog`.`twitter_counter` (
`id` BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`followers` BIGINT NOT NULL ,
`last_set` DATETIME NOT NULL
) ENGINE = MYISAM

Ok after we’ve done that let’s connect to the db.

//DATA FOR SQL
define(USERNAME,'db_username');
define(PASSWORD,'db_password');
define(DATABASE,'db_name');
//END CONF

//connect to db
@mysql_connect('localhost',USERNAME,PASSWORD);
@mysql_select_db(DATABASE);
$db_query=mysql_query('SELECT * FROM twitter_counter LIMIT 1');

We’ll put the request to the twitter API in a function so we don’t have a very heavy code:

//function to get the followers nore easily
function get_followers($user,$password){
$twitter = new Twitter($user, $password);

$friends = $twitter->showUser('xml','18107925');
$xml=new XML2Array();
$arr=$xml->parse($friends);
$nr_followers=$arr['user']['followers_count']['value'];

return $nr_followers;
}

After that we create a difference function so we can calculate the minutes that have passed since we checked the twitter API:

function dateDiff($date, $date2)
{
    if($date2 > $date) {
        $tmp = $date2 - $date;
    }

    else {
        $tmp = $date - $date2;
    }

    $seconds = $tmp;

// Relative ////////
    $minutes = floor($tmp/60);
    $tmp -= $minutes * 60;

    // Total ///////////
    $tminutes = floor($seconds/60);

return $tminutes;
}

And for the final touch we check to see if the time has passed so we can call again the twitter API or if not we should display the followers from our database:

$curent_time=date('Y-m-d H:i:s');
$info=mysql_fetch_array($db_query);
$last_set=$info['last_set'];

$dif=dateDiff(strtotime($curent_time),strtotime($last_set));

//check for last request
if(mysql_num_rows($db_query)==0){
$nr_followers=get_followers($user,$password);

mysql_query(&quot;INSERT INTO twitter_counter (followers,last_set) VALUES('".$nr_followers."',NOW())");
}else if($dif<=10){
$nr_followers=get_followers($user,$password);

mysql_query("UPDATE twitter_counter SET followers='".$nr_followers."',last_set=NOW()");
}else
$nr_followers=$info['followers'];

$followers=$nr_followers.' <span style="font-size:12px;"> followers</span>';

And that’s it the rest is the same. I will place this version in the .rar file too so you can use it as you may like tell me if you want any changes done to it or anything. I would like to thank smashing magazine for the feature here is the article: ARTICLE.

Download SOURCES

You have in the download package the PSD file and the 2 classes that will help you work this out, also there is a test file too. Hope you find this useful.
Thanks for reading.

About The Author

I'm a 24 year old designer, web designer and web developer. I always liked computers and photography. I first started working on little computer programs and after finishing Informatics and Mathematics at "Gib Mihaescu College" I applied for Informatics at the "University of Craiova" and took my license this year. I"m currently aiming for a Masters Degree in the same field.

14 Comments

  1. Brian Moore says:

    Hey, I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog!…..I”ll be checking in on a regularly now….Keep up the good work! :)

  2. MIA says:

    I have seen sites – and then …I have seen sites..but this site , is what I would term : INCENDIARY ! great tut , & btw : you def ROCK the Code :)
    Wishing you much continued future success within life & career endeavors .
    M.

  3. Evgeniy says:

    Which I searched for that code, thanks, I think not against if I publish this article on a site.

  4. Chocksy says:

    You can publish it on any website as long as you put a link in the article to the original blog. This is not a problem i saw your website and i really like the design did you do it yourself?

  5. Aaron Healey says:

    Hi just wondering i have doen everything you said i have no PHP call back errors or anything but i already have 8 followers but there not showing up :( why is this

    Regards,
    Aaron

  6. Chocksy says:

    Well the reason might be that the API of twitter might have changed i’ll try to take a look into that but if you can find it don’t hessitate to let us a message here so we can let everybody know.

    Thank you for your interest.

  7. Canha says:

    Hey guys, there is a simpler option that prints out the Twitter follower counter as plain text for WordPress blogs.

    I’ve developed a plugin that does that with an extra: you know how if Twitter is offline (fail whale) or it is slow, and how it impacts on your site, making it slow too?
    I’ve figured out a way to solve that by simply creating a cache. If Twitter is down, you still get your followers shown as it grabs the last known number of followers.
    Pretty neat, huh? Just check out the WordPress Plugin Directory for “Twitter Counter Cache-rizer”. Easy to install and works just fine!
    Here’s the link if you’re interrested:
    http://wordpress.org/extend/plugins/twitter-counter-cache-rizer/

    Hope it helps someone out!

    By the way, awesome blog design! I loved this wooden theme!

  8. poker says:

    Why not create a plugin for that? A lot of people are not familiar with php coding and how to run that code.

  9. Another very effective way to get the most out of Twitter is to schedule your tweets. Scheduling your tweets allows you to be active in Twitter while not actually doing it.

  10. Hi,

    I like your twitter follow me code – but the followers “number” does not show. Why?

    thanks

  11. Hi,

    Ignore that last post – got it. Thanks. Nice work.

  12. I have learn some just right stuff here. Certainly price bookmarking for revisiting. I surprise how so much effort you place to create this kind of excellent informative web site.