Jribbble helps you get your shots and projects from the Dribbble API. It has no dependencies (no jQuery needed), should work in all browsers down to IE9, and only weighs about 2KB.

This Glitch will guide you through creating a new Dribbble application and using app details to generate a personal access token necessary for making requests to the Dribbble API.

This is also an intro to working with Oauth2 for any API, not just Dribbble. If that sounds daunting, don’t worry, we’ll take it one step at a time.

After completing four steps, you’ll have a working Jribbble setup and access to live examples to help you get Jribbble in place on your site or where ever it takes you. Ready? Let’s Go!

Already did this? Just need links? Here's Jribbble on GitHub and npm.

Setup

To complete these steps, you’ll need an active Dribbble account.

  1. # Remix

    The first thing you should do is Remix this project. After you do that you’ll have access to the project’s code and be able to make the changes needed to complete the Oauth handshake process. Follow the “Show (Live)” button from the project code view to get back here.

  2. Step complete # Create a Dribbble App

    Remixed? Good. Great. Next up, create a New Dribbble Application.

    Your application name and description can be anything. How about "Carl" or "Janet" or "Cobra Commander". Since it’s only for your use, it can be anything. Same for the description. Any text is OK there. If you were building an application you expected other people to use, you’d want to use more helpful values.

    The next two fields of the application form are the important bits. Set:

  3. Step complete # Add Client ID and Client Secret to .env

    After you’ve created your Dribbble Application, you should see a “Client ID” and “Client Secret” near the bottom of the page. Those values need to be placed in this project’s .env file as DRIBBBLE_APP_ID and DRIBBBLE_APP_SECRET.

    Wut? If this is new and/or confusing, that’s OK. These two values are how Dribbble can recognize requests from this project as authentic. The client Id is safe to be public. It’s used in plain text in this file, index.html. The client secret should never be public. Placing it only in the .env file protects it from anyone but you from seeing it. Make sure you don’t share that value anywhere public. If you do, you should reset the secret on the Dribbble application page. Cool? Cool.

  4. # Authenticate

    OK, those are all the code changes you need to make. Once you authenticate with Dribbble you’ll have an access token and Jribbble examples.

    Authenticate with Dribbble