by Flo Preynat

Building responsive web designs and writing Sass is something I feel very confident with. However, wandering through API documentations and coding jquery are much more problematic.

Yet, yesterday, I found this cool article on Caption Hover effects, by Mary Lou of Codrops, and thought about a wee challenge.

API Connection

How about taking this beautiful set of hover effects one step further by connecting it to the Dribbble API in order to dynamically display my last dribbble shots, their titles, and their respective number of Likes.

Getting into APIs looks very intimidating at first. But you quickly realize most of them work the same way, and are tremendously documented.

Side note: I could have easily gone with the Twitter API but since I have already covered a bit of the subject in my post on the retirement of API v1.0, and since I don’t own a Facebook account (check out Graph API if you do need it), the Dribbble API (coupled with this post) looked the best option to me this pm.

Ok, so the Dribbble API docs can be found there. And if you look into them, you’ll quickly locate the way to get a dribbble player’s shots, in my case by using http://api.dribbble.com/players/shoogledesigns/shots.

JSONView

First of all, if you click on that link and get a lot of text without any apparent (and color-coded) structure, go and get Chrome’s JSONView extension, or an equivalent plugin. This will make looking through json files much easier.

At this stage, if you simply add the getJSON command to your webpage and call the Chrome console, you will be able to se the array of objects (shots) called by the API line.

Append your unordered list with a list item and make sure you replace the image, title, link, url and number of likes with the correct entities (check your json file for this).
Then loop your logic the number of times you want it to loop.

the full jquery code

<script>
	   	$(function() {
	   		var username = "shoogledesigns"  // dribbble username here
		   	$.getJSON('http://api.dribbble.com/players/' + username + '/shots/?callback=?', function(json) {
		   		console.log(json.shots);
				for (var i = 0; i < 6; i++) { // Maximum Number of shots here
			   		$('ul').append("<li><figure><img src='" + json.shots[i].image_url + "'><figcaption><h3>" + json.shots[i].title + "</h3><span>♥ " + json.shots[i].likes_count + "</span><a href='" + json.shots[i].url + "'>Details</a></figcaption></figure></li>"
			   		);
			   	};
			});
		});
</script>

Put it together

Make sure the unordered list in your body is empty, since the jquery will be populating it for you. And voilà, here’s the demo.

If you wanna grab the files, it’s on Github.

As I knew close to nothing about APIs and since I don’t like dwelling too long on jquery/javascript issues, I did my best to get the thing working. It was a real challenge to me, so please cut me some slack. I’m sure it can be done many other ways, and many better ways, but as I made it work in the end, it just suits me fine. But obviously, I’d love to hear your remarks.

Right, if you’ve made it to the end of this post (bravo) and are looking to get into dribbble, register as a prospect in there, and leave me a comment, I have a couple of invites I can give away to the nicest folks.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

Be the first to drop your two cents here!