Dribbble is quickly rising as one of the most interesting networks for designers and developers to share their past and upcoming project samples. In this post, I’ll show you how to use the Jribbble jQuery plugin and the Dribble API to share your shots and embed Dribbble images on your website, blog or portfolio page.
Step 1) Download and include Jribbble and the latest version of jQuery into your website. To download the free Jribbble jQuery plugin, click here. Next, include Jribbble and jQueryin the header of your site like so:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jribbble.js"></script>
Step 2) Next, set up the Jribbble script to display your personal Dribbble “shots” (shots are the images you upload to Dribbble). Here’s the standard set up for calling all of a certain users shots, using my own Dribbble username:
$.jribbble.getShotsByPlayerId('dionrodrigues', function (playerShots) {
var html = [];
$.each(playerShots.shots, function (i, shot) {
html.push('<li><h3>' + shot.title + '</h3>');
html.push('<h4>by ' + shot.player.name + '</h4><a href="' + shot.url + '">');
html.push('<img src="' + shot.image_teaser_url + '" ');
html.push('alt="' + shot.title + '"></a></li>');
});
$('#shotsByPlayerId').html(html.join(''));
}, {page: 1, per_page: 10});This script gets all of the specified users shots, then displays them in a list with the title of each shot and the image of each shot, linked directly to the original source on Dribbble’s website. Style the list elements to your liking, and you can display your own Dribbble shots however you’d like!
Was This Helpful?
If so, please consider making a donation - your support allows me to continue putting out content like this!
