hermanjunge

Once Coderwall enabled the feature of calling our Coderwall Badges via JSONP, I decided to have some fun, and learn a little bit of jQuery in the process.

Download Coderwall.js from gist.github.com

Here $.getJSON does all the work of retrieving and parsing. You just grab the resulting data object the way you like:

/*
*	coderwall.js
*	
*	Code to display coderwall.com badges 
*
*/

// Modify with your github identity
var coderwallJSONurl ="http://www.coderwall.com/hermanjunge.json?callback=?";
// Dimensions of the badges 
var height = 75;    
var width = 75; 

$(document).ready(function(){

	$.getJSON(coderwallJSONurl, function(data) {
		
		$.each(data.data.badges, function(i, item) {
		
			$("").attr("src", item.badge)
			.attr("float", "left")
			.attr("title", item.name + ": " + item.description)
			.attr("alt", item.name)
			.attr("height", height)
			.attr("width", width)
			.appendTo("#coderwall")
			.hover(
				function(){  
					$(this).css("opacity","0.6");
				},
				function(){
					$(this).css("opacity","1.0");
				}
			)
			.click(
				function(){
					window.location = "http://www.coderwall.com/hermanjunge/";
				}
			);		
		});
	});
});

Finally, you craft a couple of .html lines, according to your blog’ specifics, in my case, the sidebar of Tumblr Effector Theme:

<!-- Coderwall Div -->

<div id="coderwall">

	<h2>Coderwall</h2>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

		<script src="http://dev.neosource.cl/javascripts/coderwall.js"></script>

</div>

<!-- End Coderwall Div -->

And here it is. Thanks again to the people of @coderwall