How to grab Dribbble feed with jQuery and CSS3

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:

• Create a dead simple Twitter feed with jQuery
• Create a Twitter feed with attached images from media entities
• Create a Twitter feed with hash tah and cache support

• TAGS:
• API
• CSS
• Dribbble
• HTML
• Javascript
• jQuery
• Tutorial