How to grab Dribbble feed with jQuery and CSS3

How to grab Dribbble feed with jQuery and CSS3


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 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 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]

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

7 comments

Courtney Joy
Sat, 18th August 2012
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
Wed, 29th August 2012
Line 53, img is set to 100% which will inherit the width of its parent. Remove that. Reply
Jason
Sat, 10th November 2012
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
Tue, 11th December 2012
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
Tue, 19th March 2013
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
Tue, 19th March 2013
Hi Ruud, unfortunately, dribbble only return 15. Reply
Ruud
Wed, 20th March 2013
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

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement