Embedding Dribbble Shots with Jribbble

Embed your Dribbble Shots with Jribbble

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!

If you have any questions, or would like me to design a custom Dribbble based portfolio for your own work, please feel free to get in touch by clicking here.

Follow Me on Gumroad

I regularly release free downloads and stock photos, resources and files available for download through my Gumroad page. Enter your email address below to be automatically notified of new releases!