Today I was having a bit of fun. And I wanted to add the number of followers we have for our LessThanDot Twitter account.
I could have used the numerous services that give this feature already like twittercounter. Which I did on the statistics page.
But those things are just copy paste and I wanted to show the number of followers in the title/tooltip for the twitter button in the social sitings sidebar section (Yes, Eli it now has a name).
After some googling I found jTwitter. And I downloaded version 1.1.0.
It just is a very small wrapper around the Twitter API and it returns the json document that the api uses. It is very easy to use, once you know how ;-).
After adding the jtwitter file as a dependency, like so:
xml
<script type="text/javascript" src="jquery.jtwitter.js"></script>
We can add this piece of script somewhere and see the magic happen:
javascript
$(document).ready(function(){$.jTwitter('LessThanDot',1, function(userdata){
$('#social_twitter').attr({title: "Follow us on Twitter. Like " + userdata[0].user.followers_count + " others."});});});
But you can do so much more with this.
Just look at what a twitter json object gives you:
/*
Example of returned object
*/
[
{
‘in_reply_to_user_id’:null,
‘in_reply_to_screen_name’:null,
‘source’:’web’,
‘created_at’:’Fri Sep 18 06:11:15 +0000 2009′,
‘truncated’:false,
‘user’:{
‘profile_background_color’:’9ae4e8′,
‘description’:’jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here…’,
‘notifications’:false,
‘time_zone’:’Central Time (US & Canada)’,
‘url’:’http://jquery-howto.blogspot.com’,
‘screen_name’:’jQueryHowto’,
‘following’:true,
‘profile_sidebar_fill_color’:’e0ff92′,
‘created_at’:’Thu Mar 26 14:58:19 +0000 2009′,
‘profile_sidebar_border_color’:’87bc44′,
‘followers_count’:2042,
‘statuses_count’:505,
‘friends_count’:1015,
‘profile_text_color’:’000000′,
‘protected’:false,
‘profile_background_image_url’:’http://s.twimg.com/a/1253209888/images/themes/theme1/bg.png’,
‘location’:”,
‘name’:’jQuery HowTo’,
‘favourites_count’:15,
‘profile_link_color’:’0000ff’,
‘id’:26767000,
‘verified’:false,
‘profile_background_tile’:false,
‘utc_offset’:-21600,
‘profile_image_url’:’http://a3.twimg.com/profile_images/110763033/jquery_normal.gif’
},
‘in_reply_to_status_id’:null,
‘id’:4073301536,
‘favorited’:false,
‘text’:’Host jQuery on Microsoft CDN servers http://retwt.me/2N3P’
},
{
‘in_reply_to_user_id’:null,
‘in_reply_to_screen_name’:null,
‘source’:’HootSuite‘,
‘created_at’:’Thu Sep 17 17:20:21 +0000 2009′,
‘truncated’:false,
‘user’:{
‘profile_sidebar_fill_color’:’e0ff92′,
‘description’:’jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here…’,
‘friends_count’:1015,
‘url’:’http://jquery-howto.blogspot.com’,
‘screen_name’:’jQueryHowto’,
‘following’:false,
‘profile_sidebar_border_color’:’87bc44′,
‘favourites_count’:15,
‘created_at’:’Thu Mar 26 14:58:19 +0000 2009′,
‘profile_text_color’:’000000′,
‘profile_background_image_url’:’http://s.twimg.com/a/1253141863/images/themes/theme1/bg.png’,
‘profile_link_color’:’0000ff’,
‘protected’:false,
‘verified’:false,
‘statuses_count’:504,
‘profile_background_tile’:false,
‘location’:”,
‘name’:’jQuery HowTo’,
‘profile_background_color’:’9ae4e8′,
‘id’:26767000,
‘notifications’:false,
‘time_zone’:’Central Time (US & Canada)’,
‘utc_offset’:-21600,
‘followers_count’:2038,
‘profile_image_url’:’http://a3.twimg.com/profile_images/110763033/jquery_normal.gif’
},
‘in_reply_to_status_id’:null,
‘id’:4058535256,
‘favorited’:false,
‘text’:’jQuery Tip: Don’t forget that you can load jQuery UI files from Google servers as well http://bit.ly/fJs2r’
},
{
‘in_reply_to_user_id’:null,
‘in_reply_to_screen_name’:null,
‘source’:’web’,
‘created_at’:’Thu Sep 17 05:44:30 +0000 2009′,
‘truncated’:false,
‘user’:{
‘profile_sidebar_fill_color’:’e0ff92′,
‘description’:’jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here…’,
‘friends_count’:1015,
‘url’:’http://jquery-howto.blogspot.com’,
‘screen_name’:’jQueryHowto’,
‘following’:true,
‘profile_sidebar_border_color’:’87bc44′,
‘favourites_count’:15,
‘created_at’:’Thu Mar 26 14:58:19 +0000 2009′,
‘profile_text_color’:’000000′,
‘profile_background_image_url’:’http://s.twimg.com/a/1253048135/images/themes/theme1/bg.png’,
‘profile_link_color’:’0000ff’,’protected’:false,
‘verified’:false,
‘statuses_count’:503,
‘profile_background_tile’:false,
‘location’:”,
‘name’:’jQuery HowTo’,
‘profile_background_color’:’9ae4e8′,
‘id’:26767000,
‘notifications’:false,
‘time_zone’:’Central Time (US & Canada)’,
‘utc_offset’:-21600,
‘followers_count’:2035,
‘profile_image_url’:’http://a3.twimg.com/profile_images/110763033/jquery_normal.gif’
},
‘in_reply_to_status_id’:null,
‘id’:4048429737,
‘favorited’:false,
‘text’:’Added a demo page for my ‘How to bind events to AJAX loaded elements’ blog post as requested by users http://bit.ly/q2tWe’
}
]
So I guess you can think of plenty of ways to use this.
Chris is awesome.
