UPDATE: Plugin has been updated! For more up to date information read this post.

You might have noticed that I am talking and spending more time on Twitter lately. I have been helping Twitter users with their jQuery related questions and problems as well. If you are using Twitter and have some kind of jQuery related question I will be happy to help.

Anyway, after I found a Twitter JSON(P) API url last week, I spent some time playing with it and ended up with a jQuery plugin that when given a Twitter username retrieves and returns javascript object with user detials such as followers & following counts, full name, homepage URL, etc.

Download jQuery Twitter API - jTwitter here.
Update: Now plugin also get any number of any user's posts.

Here is an example of returned JavaScript object:

// Starting from version 1.1 plugin gets user posts
// the returned object has changed. See update.
{
	"screen_name":"jqueryHowto",
	"name":"jQuery HowTo",
	"description":"jQuery and javascript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here...",
	"url":"http://jquery-howto.blogspot.com",
	"followers_count":294,
	"friends_count":120,
	"favourites_count":0,
	"statuses_count":154,
	"location":"",
	"id":26767000,
	"time_zone":"Central Time (US & Canada)",
	"profile_image_url":"http://s3.amazonaws.com/twitter_production/profile_images/110763033/jquery_normal.gif",
	"notifications":false,
	"utc_offset":-21600,
	"following":false,
	"protected":false,
	"created_at":"Thu Mar 26 14:58:19 +0000 2009",
	"profile_link_color":"0000ff",
	"profile_sidebar_fill_color":"e0ff92",
	"profile_background_tile":false,
	"profile_sidebar_border_color":"87bc44",
	"profile_background_color":"9ae4e8",
	"profile_text_color":"000000"
	"profile_background_image_url":"http://static.twitter.com/images/themes/theme1/bg.gif",
}

As you can see the jQuery Twitter API plugin returns Twitter user's avatar URL as well. Using this jQuery plugin you could create another plugin that would return Twitter user's avatar image.

You can see example usage and demo here.

Here is how to use jTwitter:

// I am query data for "jqueryHowto" user
$.jTwitter('jqueryHowto', function(userdata){
  //Callback functn with the user data as shown above
  $('#profile input.url').val(userdata.url);
  $('#profile #avatar').html('<img src="'
       + userdata.profile_image_url + '" />');
});

The first parameter is a Twitter username and the second is a callback function that will be called after jQuery gets user details from the Twitter servers.

I was asked to create a user interface locker using jQuery. The main idea behind was to lock all user interactions with the website while jQuery AJAX loads block contents and unlock when content is loaded. So I thought I would share the code and released it as a jQuery plugin called uiLock.

The plugin extends jQuery and adds two main functions called $.uiLock(); and $.uiUnlock();

Here is how to use uiLock jQuery plugin:

// To lock user interface
$.uiLock();

// To unlock user interface
$.uiUnlock();

$.uiLock(); takes an HTML text argument that will be placed in the page overlay. You can style the overlaying layer using CSS. You can change font color, background color, etc. To style uiLocker use #uiLockId CSS selector.

For example:

#uiLockId{
  background-color:red !important;
}

The plugin demo can be found in the plugin archive. Here is a screenshot of the plugin at work:

User will not be allowed to interact with the website on the screenshot above. Basically, we are blocking all user actions with an extra layer that uiLock jQuery plugin adds.

Download uiLock jQuery plugin here.

It is Friday and we don’t want to read long posts and tutorials. So today’s post is going to be short and sweet. I’ve been playing a lot with Twitter lately. I wrote some jQuery and javascript functions that get user details, etc. I will share it with you next week.

But for today, I would like to share Twitter’s JSON and JSONP API URL. I am sharing it because it was hard to find it first. I actually wrote a jQuery plugin that gets Twitter user details using my previous post on cross site AJAX querying method. All Twitter API usage tutorials and articles I found on internet were based on RESTful non JSONP API, so I though I'll share Twitter JSON(P) API with you. Anyway...

Twitter JSON(P) API URL:

http://twitter.com/status/user_timeline/USERNAME.json?count=10
&callback=JSONPcallbackFunction

Here is a code to use with jQuery’s $.getJSON() function:

http://twitter.com/status/user_timeline/USERNAME.json?count=10
&callback=?

We have put ? (question mark) for callback function name so jQuery could replace it with a dynamic one that it has created.

Update: Check out jQuery Twitter API plugin – jTwitter, that uses this Twitter API.

I was asked several times on Twitter how to update some web page section or a block content on a page every x seconds. Some real life examples of this functionality are Twitter search results that come out when there are new tweets with search keyword or bit.ly real time link tracking that updates it’s charts every 5 seconds.

It is clear without saying that we are going to update our page content using AJAX and of course we love AJAX in jQuery flavor. So key to this functionality is JavaScript's built-in setInterval() function. It lets you to run some javascript function every X seconds. For example, the following code would pop alert box every five seconds:

setInterval( "alert('Hello')", 5000 );

Now consider we want to update shouts in our shoutbox every 10 seconds.

function updateShouts(){
    // Assuming we have #shoutbox
    $('#shoutbox').load('latestShouts.php');
}
setInterval( "updateShouts()", 10000 );

The code above will run every 10 seconds (10,000 ms) and update the contents of #shotbox with new shouts.

Today I came across this post called “IP Address Geolocation Javascript API : JSON”. The author provides you with a free geolocation query URL. The API returns the geographical location of the queried IP address with some additional information such as:

{
	'status':'ok',
	'IP': '74.125.45.100',
	'CountryCode': 'US',
	'CountryName': 'United States',
	'RegionName': 'California',
	'ZipPostalCode': '94043',
	'City': 'Mountain View',
	'Latitude': '37.4192',
	'Longitude': '-122.057'
}

// In case of an error
{
	'status':'parent server not responding'
}

Update: the URL has been changed!

The JSON geolocation querying API’s address is:

http://iplocationtools.com/ip_query.php?output=json&ip=80.80.214.93

The URL above is dead, instead use this one:
http://www.geoplugin.net/json.gp?jsoncallback=?

And the great thing is, you can identify your website visitor’s IP and Geo location by simply querying the API without any parameters like this:

http://iplocationtools.com/ip_query.php?output=json

Knowing your users’ IP and/or location, you might add a behavior to your website that is specific to some location. For example, offering some advertising to US only visitors, or popup with special offer to European users.

Anyway, here is a sample jQuery code to query the API:

// Build the URL to query
var url = "http://iplocationtools.com/ip_query.php?output=json&callback=?&ip=";

// Utilize the JSONP API
$.getJSON(url, function(data){
    if(data['status'] == 'ok'){
        // Do something with the data
        $('#profile #ip')
            .append(data['IP']);
        $('#profile #country')
            .append(data['CountryName']);
    }
});

Here we are not specifying any IP address in the url variable that is why it is getting current user’s data.