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][1]. Which I did on the [statistics][2] 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][3]. And I downloaded [version 1.1.0][4].
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:
<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’:’<a href="http://www.hootsuite.com" rel="nofollow">HootSuite</a>‘,
> ‘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.
[1]: http://twittercounter.com
[2]: http://www.lessthandot.com/statistics.php
[3]: http://jquery-howto.blogspot.com/2009/11/jquery-twitter-plugin-update-jtwitter.html
[4]: http://plugins.jquery.com/project/jtwitter
Chris is awesome.