How to Create a Simple Portfolio Using Dribbble API v1

I’ve been a dribbble user slash lazy portfolio updater for some time now. Most of my work isn’t the sexy kind that the lot of you go crazy over in dribbble, but once upon a while there are snippets of work I like to post for a shameless, public back patting. When dribbble released their βββeta API, I took a stand for procrastination, and with a major assist from @idiot I was able to successfully pull my latest shots from dribbble onto my personal website.

The official release of API v1 was accompanied by a doomsday deadline: All βββeta users must migrate to v1 by April 8th, 2015. I’m a far cry from a Javascript developer, but using my original script, combined with help from my personal JS guru @adardesign, I got the new dribbble API to work in the same fashion as my previous implementation. Here’s how you too can create a simple dribbble portfolio on your site, in three steps.

Step 1
Register an Application

Dribbble now requires minimum authentication to access their API. Creating an app is easier than it sounds:

  1. Go to this page
  2. Enter all of the information
    (For “callback URL” you can just enter your domain name)

Take note of the Client Access Token, as you’ll be needing it in the next step.

Step 2
Edit Your Website

This guide assumes you have a good understanding of HTML and CSS. Open up your editor, and paste the following in the place you’d like the portfolio to appear:

Edit the following from line 3:

  • Replace “USERNAME” with your dribbble username
  • Replace “TOKEN” with your app’s Client Access Token

Save the file and upload it to your site.

Step 3
Customize

Style with CSS

Here’s where you use your CSS skills and style the portfolio to your taste.

Add Features
(optional)

The new API also provides pretty much all of the data related to each shot. This includes like count, comment count, description and much more. I chose to keep it simple and only make use of the title, image, and url. To customize the portfolio to your liking, edit line 7 from the gist with the information you’d like.

For example, here’s how you can add the view count:

  1. Find the data point’s name from the API response
    (Hint: This one is called “views_count”)
  2. Add it to the Javascript, wrapped with ‘+val.+’
    (In this instance it would be ‘+val.views_count+’):

Questions?
Ask me on Twitter or Say hi on Instagram