Aug 19, 2011 gTalk Status On Your Site

0396 viewsAuthor: Andrew Champ

With this little snippet you can put your Google Talk status on your site. If you know me then it's well-known that I love the Android OS. Now with that said, I use Google Talk all the time for messaging in the office with my fellow co-workers, and with my family. My SMS count was well around 3,000 text messages, and dropped to around 100 a month using gTalk (not that it really matters considering I have an unlimited sms plan, just making a point to how much I use it).

I've noticed some sites use the Google Talk badge so anyone on their site can start chatting anonymously with them. It pops open a window for the visitor on the site to use for chat and the site owner, or who ever the badge is associated to, gets a notification via gTalk telling them somebody would like to chat with them.

The upside to using Google Talk than SMS is that when I'm busy I can change my status to reflect that. I love this a lot, especially since gTalk is integrated into the Android OS.

The downside, well I don't have one. When I leave my desk it transfers my gTalk conversation from my computer to my phone. Never tethered that way, and easier to respond to messages via keyboard than phone.

Example of what we are making today, below.

Here's my actual gTalk status:

Unavailable

Now let's get to some code. Below is the PHP function I wrote that grabs the icon name from the badge so you can find out the result of the status. Google has appropriately named these online.gif & busy.gif. I used an 'else' statement to just mark the badge 'Unavailable' if for some reason it can't connect or if you're away.

// Go here to get your gTalk link here:
// http://www.google.com/talk/service/badge/New

function gTalk(){
	$available = "Available";  // Message to show if you're Available
	$busy = "Busy";  // Message to show if you're Busy
	$unavailable = "Unavailable";  // Message to show if you're Unavailable
		
	// This is where you put your gTalk link
	$xml=file_get_contents('http://www.google.com/talk/service/badge/Show?tk=z01q6amlqt405m1r8l74kugodebhibev75r092qvdi3tvbblr577vbiqt8k3ibqbelmvpmfe19ngbndan319duepkfc8j1e161bfdagul7eple4dnr11jfbrukgbjhfsot5jddliintplhvhf4r69gb3umrm2el2lri7qn95e&w=200&h=60');
	if(preg_match('/online.gif/',$xml)):
		print "<span class='gTalk available'>".$available."</span>";
	elseif(preg_match('/busy.gif/',$xml)):
		print "<span class='gTalk busy'>".$busy."</span>";
	else:
		print "<span class='gTalk unavailable'>".$unavailable."</span>";
	endif;
}
	
	
// Call to the function where you want it displayed on your site.
gTalk();

Next are the styles of the icon. Just add this to your CSS.

/*----- gTalk styles -----*/
.available{color:#077F00;}
.busy{color:#CC0000;}
.unavailable{color:#8F8F8F;}

.gTalk{font-weight:bold; font-size:14px; border:1px solid #DFDFDF; background:#FFF url(gtalk-icon.png) no-repeat 10px 50%; height:23px; padding:10px 10px 10px 50px; border-radius:5px;}

And the icon is available for saving here, , or you can download this project down below. Consists of one file and the icon.