Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: f5a115683b
Fetching contributors…

Cannot retrieve contributors at this time

296 lines (277 sloc) 20.073 kB
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>sother/jquery-klout @ GitHub</title>
<style type="text/css">
body {
margin-top: 1.0em;
background-color: #ffffff;
font-family: Helvetica, Arial, FreeSans, san-serif;
color: #000000;
}
#container {
margin: 0 auto;
width: 700px;
}
h1 { font-size: 3.8em; color: #000000; margin-bottom: 3px; }
h1 .small { font-size: 0.4em; }
h1 a { text-decoration: none }
h2 { font-size: 1.5em; color: #000000; }
h3 { text-align: center; color: #000000; }
a { color: #000000; }
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
.download { float: right; }
pre { background: #000; color: #fff; padding: 15px;}
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
.footer { text-align:center; padding-top:30px; font-style: italic; }
.user { background-color: #f0f0f0; padding: 10px; float: left; min-height: 25px; vertical-align: middle; }
.user.odd { background-color: #d0d0d0; }
.jquery-klout-error { color: #888; }
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://sother.github.com/jquery-klout/jquery-klout.js"></script>
</head>
<body>
<a href="http://github.com/sother/jquery-klout"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<div id="container">
<div class="download">
<a href="http://github.com/sother/jquery-klout/zipball/master">
<img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
<a href="http://github.com/sother/jquery-klout/tarball/master">
<img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
</div>
<h1><a href="http://github.com/sother/jquery-klout">jquery-klout</a>
<span class="small">by <a href="http://github.com/sother">sother</a></span></h1>
<div class="description">
A simple jQuery plugin that retrieves the Klout score of a large list of users, respecting the API limit of 5 users per request and 10 requests per second.
</div>
<h2>Author</h2>
<p><a href="http://sother.info" target="_blank">Luciano Sother</a></p>
<h2>Live Demo</h2>
<div class="description">Here are some Twitter users I follow. <a id="showKlout" href="#"></a></div>
<div class="user">2012ondazero <span class="klout" data-klout-username="2012ondazero"></span></div>
<div class="user">37signals <span class="klout" data-klout-username="37signals"></span></div>
<div class="user">agendatech <span class="klout" data-klout-username="agendatech"></span></div>
<div class="user">AgileForAll <span class="klout" data-klout-username="AgileForAll"></span></div>
<div class="user">AkitaOnRails <span class="klout" data-klout-username="AkitaOnRails"></span></div>
<div class="user">aldonogueira <span class="klout" data-klout-username="aldonogueira"></span></div>
<div class="user">alexandresoli <span class="klout" data-klout-username="alexandresoli"></span></div>
<div class="user">alex_n_souza <span class="klout" data-klout-username="alex_n_souza"></span></div>
<div class="user">AlvaroGarnero <span class="klout" data-klout-username="AlvaroGarnero"></span></div>
<div class="user">andretdb2 <span class="klout" data-klout-username="andretdb2"></span></div>
<div class="user">aoqfonseca <span class="klout" data-klout-username="aoqfonseca"></span></div>
<div class="user">app_engine <span class="klout" data-klout-username="app_engine"></span></div>
<div class="user">aridiosp <span class="klout" data-klout-username="aridiosp"></span></div>
<div class="user">ariel_lind <span class="klout" data-klout-username="ariel_lind"></span></div>
<div class="user">barbararcbf <span class="klout" data-klout-username="barbararcbf"></span></div>
<div class="user">BookmanEditora <span class="klout" data-klout-username="BookmanEditora"></span></div>
<div class="user">BradescoAutoRE <span class="klout" data-klout-username="BradescoAutoRE"></span></div>
<div class="user">brunoborges <span class="klout" data-klout-username="brunoborges"></span></div>
<div class="user">brunomsweb <span class="klout" data-klout-username="brunomsweb"></span></div>
<div class="user">caelum <span class="klout" data-klout-username="caelum"></span></div>
<div class="user">caiotulio_costa <span class="klout" data-klout-username="caiotulio_costa"></span></div>
<div class="user">CampusPartyBRA <span class="klout" data-klout-username="CampusPartyBRA"></span></div>
<div class="user">carlosrpinheiro <span class="klout" data-klout-username="carlosrpinheiro"></span></div>
<div class="user">Chavao <span class="klout" data-klout-username="Chavao"></span></div>
<div class="user">clatko <span class="klout" data-klout-username="clatko"></span></div>
<div class="user">CommodoreUSA <span class="klout" data-klout-username="CommodoreUSA"></span></div>
<div class="user">CrazyandCoding <span class="klout" data-klout-username="CrazyandCoding"></span></div>
<div class="user">danielkist <span class="klout" data-klout-username="danielkist"></span></div>
<div class="user">daraujo <span class="klout" data-klout-username="daraujo"></span></div>
<div class="user">dcmaximo <span class="klout" data-klout-username="dcmaximo"></span></div>
<div class="user">deamarques <span class="klout" data-klout-username="deamarques"></span></div>
<div class="user">delmirojunior <span class="klout" data-klout-username="delmirojunior"></span></div>
<div class="user">devhammer <span class="klout" data-klout-username="devhammer"></span></div>
<div class="user">dhh <span class="klout" data-klout-username="dhh"></span></div>
<div class="user">DicasDoMacgyver <span class="klout" data-klout-username="DicasDoMacgyver"></span></div>
<div class="user">diogo_gonca <span class="klout" data-klout-username="diogo_gonca"></span></div>
<div class="user">dougvsilva <span class="klout" data-klout-username="dougvsilva"></span></div>
<div class="user">DZone <span class="klout" data-klout-username="DZone"></span></div>
<div class="user">eduardocfarias <span class="klout" data-klout-username="eduardocfarias"></span></div>
<div class="user">eikebatista <span class="klout" data-klout-username="eikebatista"></span></div>
<div class="user">faelcavalcanti <span class="klout" data-klout-username="faelcavalcanti"></span></div>
<div class="user">felipero <span class="klout" data-klout-username="felipero"></span></div>
<div class="user">fmcypriano <span class="klout" data-klout-username="fmcypriano"></span></div>
<div class="user">FOSSpatents <span class="klout" data-klout-username="FOSSpatents"></span></div>
<div class="user">freeromance <span class="klout" data-klout-username="freeromance"></span></div>
<div class="user">frontinrio <span class="klout" data-klout-username="frontinrio"></span></div>
<div class="user">fun140 <span class="klout" data-klout-username="fun140"></span></div>
<div class="user">gabriel_moreira <span class="klout" data-klout-username="gabriel_moreira"></span></div>
<div class="user">gamecraftrio <span class="klout" data-klout-username="gamecraftrio"></span></div>
<div class="user">geeksaresexy <span class="klout" data-klout-username="geeksaresexy"></span></div>
<div class="user">gerenteok <span class="klout" data-klout-username="gerenteok"></span></div>
<div class="user">globalcode <span class="klout" data-klout-username="globalcode"></span></div>
<div class="user">google <span class="klout" data-klout-username="google"></span></div>
<div class="user">guilhermecaelum <span class="klout" data-klout-username="guilhermecaelum"></span></div>
<div class="user">guimasantana <span class="klout" data-klout-username="guimasantana"></span></div>
<div class="user">guireid <span class="klout" data-klout-username="guireid"></span></div>
<div class="user">gusverner <span class="klout" data-klout-username="gusverner"></span></div>
<div class="user">HootSuite <span class="klout" data-klout-username="HootSuite"></span></div>
<div class="user">ihmoraes <span class="klout" data-klout-username="ihmoraes"></span></div>
<div class="user">InstSangari <span class="klout" data-klout-username="InstSangari"></span></div>
<div class="user">itsjuhere <span class="klout" data-klout-username="itsjuhere"></span></div>
<div class="user">jack_welch <span class="klout" data-klout-username="jack_welch"></span></div>
<div class="user">jarandre <span class="klout" data-klout-username="jarandre"></span></div>
<div class="user">jasonyip <span class="klout" data-klout-username="jasonyip"></span></div>
<div class="user">java <span class="klout" data-klout-username="java"></span></div>
<div class="user">javatotto <span class="klout" data-klout-username="javatotto"></span></div>
<div class="user">jbossdeveloper <span class="klout" data-klout-username="jbossdeveloper"></span></div>
<div class="user">JBossNews <span class="klout" data-klout-username="JBossNews"></span></div>
<div class="user">jchyip <span class="klout" data-klout-username="jchyip"></span></div>
<div class="user">jenkinsci <span class="klout" data-klout-username="jenkinsci"></span></div>
<div class="user">joshbloch <span class="klout" data-klout-username="joshbloch"></span></div>
<div class="user">jovemnerd <span class="klout" data-klout-username="jovemnerd"></span></div>
<div class="user">klout <span class="klout" data-klout-username="klout"></span></div>
<div class="user">kohsukekawa <span class="klout" data-klout-username="kohsukekawa"></span></div>
<div class="user">lapavila <span class="klout" data-klout-username="lapavila"></span></div>
<div class="user">leofarias <span class="klout" data-klout-username="leofarias"></span></div>
<div class="user">leonicolas <span class="klout" data-klout-username="leonicolas"></span></div>
<div class="user">LucasBP94 <span class="klout" data-klout-username="LucasBP94"></span></div>
<div class="user">LumisTecnologia <span class="klout" data-klout-username="LumisTecnologia"></span></div>
<div class="user">maddoghall <span class="klout" data-klout-username="maddoghall"></span></div>
<div class="user">ManningBooks <span class="klout" data-klout-username="ManningBooks"></span></div>
<div class="user">MarceloTas <span class="klout" data-klout-username="MarceloTas"></span></div>
<div class="user">marcomaciel <span class="klout" data-klout-username="marcomaciel"></span></div>
<div class="user">mariferrazrj <span class="klout" data-klout-username="mariferrazrj"></span></div>
<div class="user">mariomarolo <span class="klout" data-klout-username="mariomarolo"></span></div>
<div class="user">martinfowler <span class="klout" data-klout-username="martinfowler"></span></div>
<div class="user">mashable <span class="klout" data-klout-username="mashable"></span></div>
<div class="user">mat_kelcey <span class="klout" data-klout-username="mat_kelcey"></span></div>
<div class="user">Microsoft <span class="klout" data-klout-username="Microsoft"></span></div>
<div class="user">milacostamoraes <span class="klout" data-klout-username="milacostamoraes"></span></div>
<div class="user">mmanso <span class="klout" data-klout-username="mmanso"></span></div>
<div class="user">nanyprata <span class="klout" data-klout-username="nanyprata"></span></div>
<div class="user">newsycombinator <span class="klout" data-klout-username="newsycombinator"></span></div>
<div class="user">nmidiasdigitais <span class="klout" data-klout-username="nmidiasdigitais"></span></div>
<div class="user">OCriador <span class="klout" data-klout-username="OCriador"></span></div>
<div class="user">olhardigital <span class="klout" data-klout-username="olhardigital"></span></div>
<div class="user">OracleDOTNET <span class="klout" data-klout-username="OracleDOTNET"></span></div>
<div class="user">ornado <span class="klout" data-klout-username="ornado"></span></div>
<div class="user">osuosl <span class="klout" data-klout-username="osuosl"></span></div>
<div class="user">paguemenos <span class="klout" data-klout-username="paguemenos"></span></div>
<div class="user">pcalcado <span class="klout" data-klout-username="pcalcado"></span></div>
<div class="user">pedroh96 <span class="klout" data-klout-username="pedroh96"></span></div>
<div class="user">PiadasNerds <span class="klout" data-klout-username="PiadasNerds"></span></div>
<div class="user">PlantaoNerd <span class="klout" data-klout-username="PlantaoNerd"></span></div>
<div class="user">porcelli <span class="klout" data-klout-username="porcelli"></span></div>
<div class="user">ProgramadorREAL <span class="klout" data-klout-username="ProgramadorREAL"></span></div>
<div class="user">projetonacional <span class="klout" data-klout-username="projetonacional"></span></div>
<div class="user">queiroz_leandro <span class="klout" data-klout-username="queiroz_leandro"></span></div>
<div class="user">radfahrer <span class="klout" data-klout-username="radfahrer"></span></div>
<div class="user">rafaando <span class="klout" data-klout-username="rafaando"></span></div>
<div class="user">rafanunes <span class="klout" data-klout-username="rafanunes"></span></div>
<div class="user">rarrais <span class="klout" data-klout-username="rarrais"></span></div>
<div class="user">rbrodrigues <span class="klout" data-klout-username="rbrodrigues"></span></div>
<div class="user">rdgcorretora <span class="klout" data-klout-username="rdgcorretora"></span></div>
<div class="user">realwbonner <span class="klout" data-klout-username="realwbonner"></span></div>
<div class="user">remeniuk <span class="klout" data-klout-username="remeniuk"></span></div>
<div class="user">RevistaApolice <span class="klout" data-klout-username="RevistaApolice"></span></div>
<div class="user">riojug <span class="klout" data-klout-username="riojug"></span></div>
<div class="user">rmachadocaixeta <span class="klout" data-klout-username="rmachadocaixeta"></span></div>
<div class="user">RobertoLJustus <span class="klout" data-klout-username="RobertoLJustus"></span></div>
<div class="user">robilad <span class="klout" data-klout-username="robilad"></span></div>
<div class="user">rodrigoy <span class="klout" data-klout-username="rodrigoy"></span></div>
<div class="user">ro_gama <span class="klout" data-klout-username="ro_gama"></span></div>
<div class="user">rponte <span class="klout" data-klout-username="rponte"></span></div>
<div class="user">sabadoqualquer <span class="klout" data-klout-username="sabadoqualquer"></span></div>
<div class="user">Sabakugetsu <span class="klout" data-klout-username="Sabakugetsu"></span></div>
<div class="user">samueltauil <span class="klout" data-klout-username="samueltauil"></span></div>
<div class="user">sciglione <span class="klout" data-klout-username="sciglione"></span></div>
<div class="user">scottwambler <span class="klout" data-klout-username="scottwambler"></span></div>
<div class="user">segurogarantia <span class="klout" data-klout-username="segurogarantia"></span></div>
<div class="user">shanesnow <span class="klout" data-klout-username="shanesnow"></span></div>
<div class="user">shanselman <span class="klout" data-klout-username="shanselman"></span></div>
<div class="user">sincorsp <span class="klout" data-klout-username="sincorsp"></span></div>
<div class="user">smartiaseguros <span class="klout" data-klout-username="smartiaseguros"></span></div>
<div class="user">springinaction <span class="klout" data-klout-username="springinaction"></span></div>
<div class="user">StarCraft <span class="klout" data-klout-username="StarCraft"></span></div>
<div class="user">stelles_13 <span class="klout" data-klout-username="stelles_13"></span></div>
<div class="user">tableless <span class="klout" data-klout-username="tableless"></span></div>
<div class="user">tberne <span class="klout" data-klout-username="tberne"></span></div>
<div class="user">tchombas <span class="klout" data-klout-username="tchombas"></span></div>
<div class="user">timoreilly <span class="klout" data-klout-username="timoreilly"></span></div>
<div class="user">tinybuddha <span class="klout" data-klout-username="tinybuddha"></span></div>
<div class="user">TweetDeck <span class="klout" data-klout-username="TweetDeck"></span></div>
<div class="user">Twimbow <span class="klout" data-klout-username="Twimbow"></span></div>
<div class="user">twithera <span class="klout" data-klout-username="twithera"></span></div>
<div class="user">vagasnaweb <span class="klout" data-klout-username="vagasnaweb"></span></div>
<div class="user">vglbrasil <span class="klout" data-klout-username="vglbrasil"></span></div>
<div class="user">vsenger <span class="klout" data-klout-username="vsenger"></span></div>
<div class="user">walterlongo <span class="klout" data-klout-username="walterlongo"></span></div>
<div class="user">Warcraft <span class="klout" data-klout-username="Warcraft"></span></div>
<div class="user">wdev_news <span class="klout" data-klout-username="wdev_news"></span></div>
<div class="user">wikileaks <span class="klout" data-klout-username="wikileaks"></span></div>
<div class="user">yarasenger <span class="klout" data-klout-username="yarasenger"></span></div>
<div class="user">zaptudo <span class="klout" data-klout-username="zaptudo"></span></div>
<div class="user">_ygor_ <span class="klout" data-klout-username="_ygor_"></span></div>
<br clear="both"/>
<h2>Sample Source Code</h2>
<strong>HTML (Original)</strong><br/>
<pre>&lt;span class="klout" data-klout-username="sother"&gt;&lt;/span&gt;</pre>
<strong>Javascript</strong><br/>
<pre>$('.klout').kloutScore({
'apiKey': '...', // CHANGE this to your own Klout API Key
'iconSrc': '...', // CHANGE this to your own hosted Klout icon
});</pre>
<strong>HTML (Processed by default icon & score rendering method)</strong><br/>
<pre>&lt;span class="klout" data-klout-username="sother"&gt;
&lt;span class="jquery-klout-icon-span"&gt;
&lt;a href="http://klout.com/sother"&gt;
&lt;img class="jquery-klout-icon" src="..."/&gt;
&lt;/a&gt;
&lt;/span&gt;
&lt;/span&gt;</pre>
<h2>Download</h2>
<p>
You can download this project in either
<a href="http://github.com/sother/jquery-klout/zipball/master">zip</a> or
<a href="http://github.com/sother/jquery-klout/tarball/master">tar</a> formats.
</p>
<p>You can also clone the project with <a href="http://git-scm.com">Git</a>
by running:
<pre>$ git clone git://github.com/sother/jquery-klout</pre>
</p>
<div class="footer">
get the source code on GitHub : <a href="http://github.com/sother/jquery-klout">sother/jquery-klout</a>
</div>
</div>
</div>
<script type="text/javascript">
(function($) {
var count = 0;
$('.user').each(function(){
if (count++ % 2 == 1) {
$(this).addClass('odd');
}
});
link$ = $('#showKlout');
function run() {
link$.text('Running...').removeAttr('href').unbind('click');
$('.klout').kloutScore({
'apiKey': 'e6yj8afagaczyq9n33j8zwsp', // CHANGE this to your own Klout API Key
'iconSrc': 'http://sother.github.com/jquery-klout/static/klout-20.png', // CHANGE this to your own hosted Klout icon
'complete': function() {
link$.text('CLICK to reset').click(reset).attr('href', '#');
}
});
}
function reset() {
$('.klout').html('');
link$.text('CLICK to show Klout Scores').click(run);
}
reset();
})(jQuery);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18443216-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.