Adding your Dribbble shots to your Gatsby website

We all love Gatsby, don't we? One of my favorites features is being able to pull data from different sources and serve that data statically.

Recently I found myself in the need of adding Dribbble shots to my company's website. So, like with any other content source, I looked for a plugin in Gatsby’s website. I found and installed this one.

    $ npm install --save gatsby-source-dribbble

Once installed, we need to add its configuration to the gatsby-config.js file:

    plugins = [
      {
        resolve: `gatsby-source-dribbble`,
        options: {
          access_token: '' // Your access token here
        }
      }
    ]

So far, so good, right? So, what’s the point of this how-to? Well the thing is that getting that access token is not a walk in the park.

Getting Dribbble’s access token

Thanks to Dribbble’s API not-so-clear documentation, getting our account’s access token is a really tedious task. Here’s a simple walkthrough on how to do it:

1) Register your Dribbble application

In orden to access the API data we need to register an application in our Dribbble account. To do this:

• Log in into your Dribbble account.
• Go to Account Settings > Applications > Register Application.
• Fill the register form.

Once your application is registered you'll have a Client ID and a Client Secret. Save these credentials for later.

2) Request your access token

Here's where things get...tricky. In order to get access to your access token, open this website in your browser (replace your_client_id with the Client ID you got from the previous step:

https://dribbble.com/oauth/authorize?client_id=YOUR_CLIENT_ID

After you authorize your application, you'll be redirected to the callback URL that you filled in the previous form. That URL will have a parameter like these:

https://your-callback-url?code=SOME_RANDOM_CODE

We're almost there! ✨ Now, we just need to make a POST request like this —replacing your_client_id, your_client_secret **and previous_random_code with the credentials you got in the previous steps— to this URL:

https://dribbble.com/oauth/token?client_id=YOUR_CLIENT_ID**&client_secret=YOUR_CLIENT_SECRET&code=PREVIOUS_RANDOM_CODE

To make the POST request, open your terminal and run:

    $ curl -X POST THE_PREVIOUS_URL

We did it! 🎉 The POST request should have returned a code like this one:

    {
        'access_token': '123n12jb2v32u32b3u2b', // Yayy 🎉
        'token_type': 'bearer',
        'scope': 'public',
        'createdAt': '123mm22opw'
    }

That's it! It wasn't that hard, huh? Well, Dribbble's documentation isn't anywhere clear about how to get this access token, so figuring out this was incredibly tedious and I wanted to clear it out for anyone in the same situation.

Anyway, if you have any question you can DM on Twitter :)

Stay safe, stay home!