Twitter Translation Demo

Translating tweets into english with jQuery-JSONFeed

by dandrinkard

HTML

<script src="https://github.com/dandrinkard/jquery-json-feed/raw/master/jquery.json-feed-1.0.0.js"></script>
<script src="https://github.com/dandrinkard/jquery-json-feed/raw/master/utils/jf.util.activate-links.js"></script>
<script src="https://github.com/dandrinkard/jquery-json-feed/raw/master/utils/jf.util.activate-twitter-hash-tags.js"></script>
<script src="https://github.com/dandrinkard/jquery-json-feed/raw/master/utils/jf.util.google-translate.js"></script>
<script src="https://github.com/dandrinkard/jquery-relative-date/raw/master/jquery.relative-date.js"></script>
<script src="https://github.com/dandrinkard/jquery-json-feed/raw/master/presets/jf.preset.twitter-search-translated.js"></script>
<!-- boo google language won't load in resources manager -->
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAC6mUlM46kDmM6maoN0U8IBSgRyJfKxvUsUDuKDID09Cb5D0_ORS-hKwqo17r1sOE4SEVAvklGZ0XHw"></script>
<script type="text/javascript">google.load('language', 1);</script>
<!--
change lang param in *url* for a new source language. Twitter supports:
ar: Arabic    |  da: Danish     |  nl: Dutch    |  fa: Farsi
fi: Finnish   |  fr: French     |  de: German   |  hu: Hungarian
is: Icelandic |  it: Italian    |  ja: Japanese |  no: Norweigan
pl: Polish    |  pt: Portuguese |  ru: Russian  |  es: Spanish
sv: Swedish   |  th: Thai
-->
<div id="tweets" data-language="en" data-url="http://search.twitter.com/search.json?q=gaddafi+OR+libya&lang=ar"></div>

CSS

#tweets{font:normal 13px/1.4 helvetica,arial,sans-serif;color:#222;text-shadow:0 1px 1px #fff;border:1px solid #e0e0e0;box-shadow:1px 1px 5px rgba(0,0,0,0.08);width:420px;}
#tweets div.jf-tweet{overflow:hidden;border-top:1px solid #fff;border-bottom:1px solid #eee;padding:1em;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#f5f5f5');background:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#f5f5f5));background:-moz-linear-gradient(top,#fafafa,#f5f5f5);}
#tweets div.jf-tweet:first-child{border-top:none;}
#tweets div.jf-tweet:last-child{border-bottom:none;}
#tweets div.jf-tweet:hover{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9',endColorstr='#f3f3f3');background:-webkit-gradient(linear,left top,left bottom,from(#e9e9e9),to(#f3f3f3));background:-moz-linear-gradient(top,#e9e9e9,#f3f3f3);border-top-color:#ccc;border-bottom-color:#ddd;}
#tweets div.jf-tweet a{color:#546b7c;text-decoration:none;}
#tweets div.jf-tweet a:hover{background-color:rgba(0,0,0,0.05);}
#tweets div.jf-tweet a img{-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;float:left;width:48px;position:relative;top:3px;}
#tweets p.jf-meta,#tweets p.jf-tweet{margin-left:58px;}
#tweets .jf-meta .anywhere-username{font-weight:bold;color:#333;}
#tweets .jf-meta .jf-timestamp{font-size:11px;font-weight:normal;color:#888;}
#tweets>span{display:block;width:220px;height:19px;text-indent:-9999px;background:url(http://cdn.displayawesome.com/images/spinner.gif) no-repeat 0 0;margin:10px auto;}

JavaScript

$('#tweets').JSONFeed($.fn.JSONFeed.presets.twitterSearchTranslated);