jQuery-My-Dribbble-Gallery

Create a Simple Portfolio Using Dribbble API v1

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 => https://dribbble.com/account/applications/new
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:

CSS

<!-- Custom style my dribbble gallery -->
<link type="text/css" rel="stylesheet" href="src/my-dribbble-gallery.css" />

HTML

<!-- Your profiles -->
<div class="bcr_drb_profile"></div>
<!-- Your shot -->
<div class="dribbble bcr_drb_shots"></div>
<!-- Your buckets -->
<div class="dribbble bcr_drb_buckets" style="display:none"></div>
<!-- Your projects -->
<div class="dribbble bcr_drb_projects" style="display:none"></div>
<!-- Your teams -->
<div class="dribbble bcr_drb_teams" style="display:none"></div>
<!-- Your likes -->
<div class="dribbble bcr_drb_likes" style="display:none"></div>
<!-- Your followers -->
<div class="dribbble bcr_drb_followers" style="display:none"></div>

JS

<!-- Include jQuery -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- jQuery my dribbble gallery -->
<script src="src/my-dribbble-gallery.js"></script>
<!-- Setting Example -->
<script>
bcr_mdg(
drb_username = 'USERNAME',
drb_token = 'TOKEN'
);
</script>

Edit the following:

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

Save the file and upload it to your site.

DEMO