Translating Twitter Feeds

You will notice on this site in the sidebar as well as many others that I use a Twitter feed to output my latest tweets. The Javascript that does this is pretty standard and available from Twitter along with other APIs for delivering Twitter content. However if you want to translate your blog or site content into multiple languages then you may also need to translate the Twitter feed content as its loaded. I have just recently created some versions of my pages in other languages using BabelFish e.g /unpacker-russian.htm and /unpacker-chinese. Although the pages are static and were easy enough to translate the Twitter content is delivered in real time using Javascript and therefore was loading up in English. To get round this I made use of Googles Language API which is just one of many free tools which you can use to enhance your site.

The functions that load Googles language API as well as handle the translation and obtain the users GEO data such as country, location and browser language are contained within my GoogleAPI.js file. This does make use of my Strictly.js object which is a lightweight framework of mine containing my browser, debugger, encoder objects as well as a number of validation and helper functions. If you don't want to use this object just look for any function starting with S. and replace it with your own version.

The code that actually recieves the Twitter data in the form of a JSON object is very similar to the code that Blogger and Wordpress use and I have just tweaked it so that after loading the HTML I pass an array of IDs to my TranslateContents function which will then translate and re-output the contents. The reason I create a list of IDs rather than just pass the ID of the Twitter output DIV is to make sure I am only translating textual content and not HTML. I have had issues when trying to translate whole pages with Babelfish or Google when the HTML contains <PRE> and <CODE> tags as it translates all my Javascript example code as well!


// set up a wrapper object which will control the language to translate to and from
TW=Strictly.twitter={
	tranFrom : "en",
	tranTo   : "en"
}

// Output twitter feed and translate contents to another language using Googles API
function twitterCallbackTrans(twitters) {
	// make sure we have access to my translator functions and there is a need to translate
	if(typeof(Translator)!="function"){ return twitterCallback(twitters); }
	if(TW.tranFrom==TW.tranTo){ return twitterCallback(twitters); }

	var statusHTML = [];
	var tranIDs = [], x=0 ,elID;
	for (var i=0; i<twitters.length; i++){
		var username = twitters[i].user.screen_name;
		var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
		return '<a href="'+url+'">'+url+'</a>';
		}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
		return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
		});
		x++;
		elID="tweet"+x;
		statusHTML.push('<li><span id="'+elID+'">'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'" id="'+elID+'Date">'+relative_time(twitters[i].created_at)+'</a></li>');
		tranIDs.push(elID);tranIDs.push(elID+"Date");
	}
	G('twitter_update_list').innerHTML = statusHTML.join('');
	var obj = new Translator();
	obj.TranslateContents(tranIDs,TW.tranTo,TW.tranFrom);
}

Just before I reference the script that loads the JSON data I set the language I want to translate to for example


<script type="text/javascript">
// translate to russian
TW.tranTo="ru";
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/strictlytweets.json?callback=twitterCallbackTrans&count=10"></script>