How to grab Dribbble feed with jQuery and CSS3

Written by Kevin Liew on 04 Jul 2012
76,552 Views • Tutorials

Introduction

As a web developer, third party API integration is something you will have to face. Especially with the current trend, we have facebook, twitter, flickr etc. Today, we are going to look at dribbble's API. Dribbble is a place to show off your design, it's based on invitation basis, therefore, most designs are of high quality.

Demo Download

HTML

Initially, you just have to create a div with a class called drib-list and specify an id also if you intended to use it multiple times.

<div class="drib-list clearfix" id="popular">		
	<h1>Popular</h1>	
</div>

Once all the dribbble items are loaded, data is grabbed from the API and then being parsed into a predefined HTML structure. This HTML structure is created to accommodate the sliding up and down simple animation as well.

<div class="drib-item">
	<div class="drib-image">
		<a href="{url}"><img data-src="{image}" alt="{title}" /></a>
	</div>
	<div class="drib-detail">
		<div class="drib-detail-wrapper">
			<a href="#">{title}</a>
			<ul>
				<li class="views">{views}</li>
				<li class="likes">{likes}</li>
				<li class="comments">{comments}</li>
			</ul>
		</div>
	</div>
</div>

CSS

The following is the CSS we use for this dribbble plugin. We used plenty of CSS3 to make it looks good.

body {
	font-family:arial;
	font-size:75%;
	margin:0 0 170px 0;
	padding:0;
	background: #2F2F2F;
	color: #C6C6C6;		
}

hr {
	-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
	-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
	-o-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
	box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
	border-bottom: 1px solid #121212;
	border-top: none;	
	margin: 18px 0;
	display:block;
}

h1 {
	font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align: left;
	color: #555;
	text-shadow: 0px 2px 5px #111;	
	margin: 20px 0 10px 0;	
}

.drib-list {
	width: 1080px;
	margin:15px auto 0 auto;
	padding-left:10px;
}

.drib-item {
	width:200px;
	height:150px;
	border:5px solid #ccc;
	position:relative;
	overflow:hidden;
	border: 1px solid rgba(0, 0, 0, 0.05);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0.8) 0 1px 7px 0px inset;
	background: #202020;
	background-color: rgba(0, 0, 0, 0.3);		
	margin-bottom:10px;
	float:left;
	margin-right:10px;
}

.drib-image,
.drib-detail {
	width:100%;
	position:absolute;
	left:0;
	
}

.drib-image {
	top:0;	
	z-index:10;
}
	
	.drib-image img {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;	
		border:0;	
	}		

.drib-detail {		
	z-index:0;
	height:50%;
	bottom:0;
	background:#333;
	-webkit-box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

	.drib-detail-wrapper {
		margin:14px 10px 0 10px;
	}

	.drib-detail a {
		color:#eee;
		font-weight:bold;
		display:block;
		text-decoration:none;
		font-size:110%;
	}	
	
	.drib-detail a:hover {
		color:#ffffff
	}	
		
	.drib-detail ul {
		margin:2px 0 0 0 ;
		padding:0;
		list-style:none;
	}	
	
	.drib-detail li {
		float:left;
		margin-right:5px;
		background:url('sprite.png') no-repeat 0 0;
		padding-left:24px;
		height:20px;
		line-height:22px
	}			
	
	.drib-detail li.comments {
		background-position: 0 0;		
	}			

	.drib-detail li.views {
		background-position: 0 -39px;		
	}			

	.drib-detail li.likes {
		background-position: 0 -79px;
	}							
			
	/* new clearfix */
	.clearfix:after {
	    visibility: hidden;
	    display: block;
	    font-size: 0;
	    content: " ";
	    clear: both;
	    height: 0;
	    }
	* html .clearfix             { zoom: 1; } /* IE6 */
	*:first-child+html .clearfix { zoom: 1; } /* IE7 */	

Javascript

If you read my preview tutorial about twitter API, you should able to understand this section easily as well. Dribbble API documentation is pretty neat and straight forward, it's still in Beta stage at the moment, but it's pretty stable and easy to use.

In this tutorial, we will be using:

  • http://api.dribbble.com/shots/{list}: Return debuts, everyone, popular shots.
  • http://api.dribbble.com/players/{id}/shots: Return a player's recent shots.

However, we will not retrieve it directly from Javascript, we call it using PHP to solve AJAX cross domain issue. I wrote a simple PHP proxy to retrieve the JSON data from dribbble. It's not the best PHP script (it's very rough!), but it will do the job just fine. You can enhance the PHP from here such as adding cache control to reduce number of call to dribbble, and perhaps, make it a little bit more secure.

<?php

$player = $_GET['player'];
$type = $_GET['type'];

$list = array('popular', 'debuts', 'everyone');

if ($player) {

	if (in_array(strtolower($player), $list)) {
		$data = file_get_contents('http://api.dribbble.com/shots/' . $player);   		
	} else {
		$data = file_get_contents('http://api.dribbble.com/players/' . $player . '/shots');   
	}
	
	header('Content-type: application/json');
	echo $data;
	exit;

}	

echo 0;


?>

Alright, back to Javascript. This is a Javascript plugin, and it's possible to run multiple instances of this dribbble script. I have added inline comment to describe some of the codes.

(function($){
	
    //Attach this new method to jQuery
    $.fn.extend({ 
         
        dribbble: function(options) {

			var defaults = {
				player: '',	//username, debuts, popular or everyone
				total: 3 // 1 - 15, return result, by default dribbble return 15
			} 		
 			
 			var options = $.extend(defaults, options);
			var o = options; 
 
            //Iterate over the current set of matched elements
            return this.each(function() {
			
            // this is the HTML structure for every single shots, and then will be appended to the HTML. 
            // you can view this structure better in HTML section of this tutorial.
				var struct = '<div class="drib-item"><div class="drib-image"><a href="{url}"><img data-src="{image}" alt="{title}" /></a></div><div class="drib-detail"><div class="drib-detail-wrapper"><a href="#">{title}</a><ul><li class="views">{views}</li><li class="likes">{likes}</li><li class="comments">{comments}</li></ul></div></div></div>',
					html = '',
					holder = $(this);
			
				// make a AJAX call to the PHP script we wrote.
				$.ajax({
				   type: "get",
				   url: "dribbble-call.php",
				   data: "player=" + o.player,
				   success: function(data){
						
							// do another test to make sure there is data returned from the service
							try {
							
								if (data.shots.length > 0) {
									var shots = data.shots;
									
									// loop through the data and apply the HTML code with the data 
									for (var i=0; i< shots.length; i++) {
			
										if (i < o.total) {
			
											html += struct.replace(/{title}/g, shots[i].title)
													.replace(/{image}/g, shots[i].image_teaser_url)
													.replace(/{url}/g, shots[i].url)
													.replace(/{views}/g, shots[i].views_count)
													.replace(/{likes}/g, shots[i].likes_count)
													.replace(/{comments}/g, shots[i].comments_count);		
										}										
														
									}
	
									holder.append(html);
								
								} else alert('No data returned from dibbble!');
						
							} catch (e) {
								alert(e);
							}
						
				   		}
					});
					
					// this is the hover effect				 		            
					$('.drib-item').live({
				        mouseenter: function() {
								$(this).find('.drib-image').stop().animate({top: ($(this).height() / 2 * -1)}, 300);
				           },
				        mouseleave: function() {
								$(this).find('.drib-image').stop().animate({top: 0}, 300);
				           }
				       }
				    );            
            });          
        }
    });

})(jQuery);	

Usage

The usage of this plugin is pretty simple, make sure you have jQuery framework 1.6 and above, and link the CSS and JS files properly.

Javascript

$(function() {
	$('#popular').dribbble({
		player: 'popular', //username, debuts, popular or everyone
		total: 5
	});
});

HTML

<div id="popular">
</div>

Conclusion

It's not hard to pick up third party API. Take Dribbble API as an example, it's easy to understand and implement. However, you should always aware of API changes, especially this one because it's still in beta stage, and normally there will be update to the API in the future. Do subscribe to its developer newsletter or any form of communications so you will know what went wrong if this script stopped working.

I hope you gained some knowledge and skill in learning how to manipulate third party API. If you want to learn more, you can visit my previous Twitter API tutorials:

[=author]
Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

7 comments
Courtney Joy 12 years ago
Why is this automatically sizing my images at 200 x 150? I want it to pull in the full 400 x 300 images. How do I do that?
Reply
Kevin Liew Admin 12 years ago
Line 53, img is set to 100% which will inherit the width of its parent. Remove that.
Reply
Jason 12 years ago
Hi,

I can't get the demo working. I've downloaded all the files, but it isn't loading any shots... The only thing I've done it extracting the zip, nothing more.
Reply
Jason 12 years ago
Hi,

I've downloaded the files, but getting the following error while opening the page:
"TypeError: data.shots is undefined".

Something I'm doing wrong?
Thanks!
Reply
Ruud 12 years ago
Hi, how can I set this to view more than 15 shots? Is it possible to see how many shots there are in my profile, and then display all?
Reply
Kevin Liew Admin 12 years ago
Hi Ruud, unfortunately, dribbble only return 15.
Reply
Ruud 12 years ago
Hi Kevin, thanks for your quick reply. Too bad there is this maximum, i'll have to look out for another solution then I suppose!
Reply