Display Shots with the Dribbble v2 API
Dribbble have released a new API (v2). Compared to v1, the v2 API changes the way you authenticate applications needing read-only access to Dribbble shots.
Registering Your Dribbble Application
You need to register an application with Dribbble to be able access content via the API, this process hasn’t changed with the update to v2…
- Login to your dribbble.com account page
- Select Applications from the side menu
- in the Developers section, select Register a New Application
- Fill in the form, use your website URL in the Callback URL field (you will need that later)
- Read the Terms, and Register
You will be redirected to a screen that shows your successfully registered app details, note the Client ID and Client Secret numbers at the bottom of the page.
Generating your Access Token
Using Postman was the easiest way I found to do this, so download and install that first.
In v1 of the API, you were provided with your access token when registering your app, with v2 we need to do a little extra work to generate the token.
- Open a browser window and log into your Dribbble account
- In a new window, go to the following url:
https://dribbble.com/oauth/authorize?client_id=CLIENT_ID(Replace CLIENT_ID with the long Client ID number provided when you registered your application)
- A Authorization Screen will appear with the name of the application you registered, choose to Authorize your application
After authorizing, you will be redirected to a URL that looks similar to this:
The http://callback_url will be the callback URL you entered when registering your application. Copy the long code at the end of this URL, in the example above the code is:
Get the Token
- Using Postman, create a new Request
- Select POST, and enter the following URL:
- Replace the CLIENT_ID and CLIENT_SECRET with the ID and Secret provided by Dribbble after successfully registering your app
- Replace the COPIED_CODE with the code you just copied from the callback URL page
- Hit Send, and your Access Token will be returned, mine looked like this:
Use the API in a Webpage
Now you have the Access Token, you can write a script to display your shots in a webpage!
First, some HTML that we will prepend with your shots…
Now for the script that calls the API… You can use the same script as below, replacing the
accessToken variable with your generated Access Token. This script will wrap each of your shots in a link back to Dribbble, and add the shot title.
If you want to change the template, you can use some of these API variables. The
hidpi image size is the only one that will show you animated shots. Check the Dribbble API Documentation for more options.
Lastly, you can add a little CSS to style your shots. Here is my SCSS.