I don’t know about you but, I follow few peple that sometimes tweet in different language then English. And English is the only foreign language I know. So if I want to see what they tweet about sometimes I use google translate to read the content.
I always thought that it will be nice feature for Twitter to have translate button, so I created one, using WebSockets and Ruby.
So how I did this, first I downloaded websockets ruby library from github web-socket-ruby, I already had translation script written in Ruby that use google translate, so I added websocket server to it.
#!/usr/bin/ruby require 'net/http' require 'uri' require 'optparse' require 'json' require 'socket' require 'web_socket' class NotConnectedException < Exception end def server(port, domains) server = WebSocketServer.new( :accepted_domains => domains, :port => port) puts("Server is running at port %d" % server.port) server.run() do |ws| puts("Connection accepted") puts("Path: #{ws.path}, Origin: #{ws.origin}") if ws.path == "/translate" ws.handshake() while data = ws.receive() printf("Received: %p\n", data) data = JSON.parse(data) response = translate(data['text'], nil, data['to_lang']).join("\n") ws.send(response) printf("Sent: %p\n", response) end else ws.handshake("404 Not Found") end puts("Connection closed") end end def escape(o) o.gsub(/([^ a-zA-Z0-9_.-]+)/n) { '%' + $1.unpack('H2' * $1.size).join('%').upcase }.tr(' ', '+') end def translate(text, from=nil, to=nil, cookie=nil) url = URI.parse("http://translate.google.com/translate_a/t") query = "?hl=en&client=t&text=#{escape(text)}&multires=1&otf=1&pc=0&sc=1&ie=UTF-8&oe=UTF-8" query += "&sl=" + (from ? from : 'auto') if to query += "&tl=#{to}" end begin http = Net::HTTP.new(url.host) res = http.get(url.path + query) res.response['content-type'] =~ /charset=(.*)/ charset = $1 JSON.parse(res.body.gsub(/,{2,}/, ',').gsub(/,\]/, ']'))[0].map {|i| # google sometimes put spaces around numbers i[0].gsub(/\{ *([0-9]) *\}/, '{\1}') } rescue NoMethodError raise NotConnectedException rescue SocketError raise NotConnectedException rescue end end def msg(str, type='info') system("zenity --#{type} --title='translation' --text='#{str}'") end params = ARGV.getopts('i:o:gcsp:') def error(msg, gui=false) if gui msg(msg, 'error') else puts msg end end def usage() puts "usage:" puts "translate [-i <INPUT LANG>] -o <OUTPUT LANG> [MORE OPTIONS]" puts "-g - show zenity dialog" puts "-c - get input from clipboard" puts "-s - run as server" puts "-p - server port" end begin if params['s'] begin server(params['p'] ? params['p'].to_i() : 8080, 'twitter.com') rescue Interrupt puts "Server Exit" end else if params['c'] input = `xclip -o -sel clip` else input = ARGF.read() end translation = translate(input, params['i'], params['o']) if params['g'] msg(translation.join(". ")) else translation.each{|sentence| if sentence != '' puts sentence end } end end rescue JSON::ParserError => e error("Response Error: " + e.message, params['g']) rescue NotConnectedException error("sorry but it seems that your internet connection is down", params['g']) end
Then I created this bookmarklet. (I notice that profile page use jQuery.noConflict() so I can’t access it from bookmarklet. So here is updated code that insert jQuery script again – in use continuation to block execution of the script until jQuery is loaded). To use bookmarklet just copy code below and insert into url address bar when twitter tab is active
javascript:(function(continuation) { function attr(elem, key, value) { elem.setAttribute(document.createAttribute(key, value)); } var script = (function() { var head = document.getElementsByTagName('head')[0]; return function(src) { var script = document.createElement('script'); script.setAttribute('src', src); script.setAttribute('type', 'text/javascript'); script.setAttribute('async', 'false'); head.appendChild(script); return script; }; })(); script('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'); var interval = 100; setTimeout(function() { if (jQuery) { continuation(jQuery.noConflict()); } else { setTimeout(arguments.callee, interval); } }, interval); })(function($) { function translator(fun, lang) { var socket = new WebSocket("ws://localhost:8080/translate"); socket.onopen = function() { console.log("Socket has been opened!"); }; socket.onclose = function() { console.log("closed"); }; return fun(function(text, respond) { socket.onmessage = function(msg) { respond(msg.data); }; var data = JSON.stringify({to_lang: lang, text: text}); socket.send(data); }); } var translate_tweet = translator(function(translate) { return function(content) { var tweet_container = content.find('.js-tweet-text'); var tweet = tweet_container.html(); content.data('original', tweet); var links = []; var i = 0; tweet = tweet.replace(/<a[^>]+>[^<]+<\/a>|<a[^>]+><s>(#|@)<\/s><b>[^<]+<\/b><\/a>/g, function(link) { links.push(link); return '{' + i++ + '}'; }); translate(tweet, function(result) { for (var i=links.length; i--;) { result = result.replace('{' + i + '}', links[i]); } tweet_container.html(result); var actions = content.find('.tweet-actions'); if (actions.find('.action-orig-container').length == 0) { actions.append('<li class="action-orig-container"><a href="#">Original</a></li>'); } }); }; }, prompt('Select Language: af - afrikaans, sk - albánskej, ar - عربي, be - Беларускі, bg - Български, zh - 荃湾, zh - 太阳, hr - Hrvatski, cs - Český, da - Danske, et - Eesti, tl - filipiński, fi - Suomi, fr - Français, gl - galijski, el - Ελληνικά, iw - עברית, hi - हिन्दी, es - Español, nl - Nederlands, id - indonezyjski, ga - Gaeilge, is - Íslenska, ja - 日本語, yi - ייִדיש, ca - Català, ko - 한국의, lt - Lietuvos, lv - Latvijas, mk - Македонски, ms - Melayu, mt - Malti, de - Deutsch, no - Norsk, fa - فارسی, pl - polski, ru - Русский, ro - Română, sr - Српски, sk - Slovenský, sl - Slovenski, sw - Swahili, sv - Svenska, th - ภาษาไทย, tr - Türk, uk - Український, cy - walijski, hu - Magyar, vi - Việt, it - Italiano')); $('.content').unbind('mouseover').live('mouseover', function() { var $this = $(this); if ($this.find('.action-trans-container').length == 0) { $this.find('.action-fav-container'). after('<li class="action-trans-container"><a href="#">Translate</a></li>'); } }); $('.action-orig-container').unbind('onclick').live('click', function() { var content = $(this).parents('.content'); content.find('.js-tweet-text').html(content.data('original')); content.find('.action-orig-container').remove(); return false; }); $('.action-trans-container').unbind('onclick').live('click', function() { translate_tweet($(this).parents('.content')); return false; }); });
CODE LICENSE: you can use the code for whatever purpose you like it’s realeas on Sharing Agreement.