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.
Register an Application
Dribbble now requires minimum authentication to access their API. Creating an app is easier than it sounds:
- Go to this page
- 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.
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.
Style with CSS
Here’s where you use your CSS skills and style the portfolio to your taste.
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:
- Find the data point’s name from the API response
(Hint: This one is called “views_count”)
(In this instance it would be ‘+val.views_count+’):