Designers all need a portfolio which could showcase their abilities and talent. It helps when we could attach a portfolio platform in to our own website, like dribbble, Behance etc.

So here is the new V2 api integration of dribbble shots on your website. The API V2 version is different than the previous because now it needs to authenticate applications needing read-only access to Dribbble shots. So here we go:

Register your Application in Dribbble:

First you have to create an Application in dribbble in order to access the data through API, so here is the steps to create Application:

  • Login in to your dribbble account.
  • Select the accounts settings, from their select Applications.
  • Click on Register Application.
  • You can see the form which needs to be filled, enter your website url in "Website URL" and "Callback URL" also then register.

Then you will get the result page after the submission like this:

2.jpg

You can see the Client ID, Client Secret generated down below the details(You might need it later, save it for later).

Creating Access Token:

The documentation of dribbble is not well made, so it would make some users confusion. After registering your application, we need to get the Access token which may need the Authentication from the dribbble, so open a browser and paste the link :

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

In this link paste your Client Id provided when you registered your application. Then you would see an Authorization page which is asking your permission to Authorize your application, Click Authorize and it will lead you to a page which is your callback url which you have given in the previous form. The link looks like;

http://callback_url?code=gO24324sdf34345dfh78i956x22e269df3a4315924b87246a67

3.jpg

Copy the random code(eg:code=gO24324sdf34345dfh78i956x22e269df3a4315924b87246a67) which is after the callback url. And next, we need to get the Access Token for that we should use the Postman Application, because we need to request token to get it. So the Postman helps to make it happen, install Postman application first and put the link;

https://dribbble.com/oauth/token?client_id=CLIENT_ID&client_secret=CLIENT_SECRET&code=COPIED_CODE

Change the CLIENT_ID, CLIENT_SECRET and COPIED_CODE which you have already got it. And make sure you have selected the "POST" before sending the request. Now hit it!!! You will get a code like this below(You can see various options on dropdown under the body part, default it is html change it to JSON).

{
    "access_token": "gO24324sdf34345dfh78i956x22e269df3a4315924b87246a67",
    "token_type": "bearer",
    "scope": "public",
    "created_at": 1f3453451461
}

We have done almost done the job, Now we need to make some coding part in our website.

Just create HTML element in your website or page;

<ul id="dribbbleShots"></ul>

Now you have to add some jquery in your script part also;

// Set the Access Token
var accessToken = "gO24324sdf34345dfh78i956x22e269df3a4315924b87246a67"

// Call Dribble v2 API
$.ajax({
    url: 'https://api.dribbble.com/v2/user/shots?access_token='+accessToken,
    dataType: 'json',
    type: 'GET',
    success: function(data) {  
      if (data.length > 0) { 
        $.each(data.reverse(), function(i, val) {                
          $('#dribbbleShots').prepend(
            '<li class="shot" target="_blank" href="'+ val.html_url +'" title="' + val.title + '"><div class="title">' + val.title + '</div><img src="'+ val.images.hidpi +'"/></li>'
            )
        })
      }
      else {
        $('#dribbbleShots').append('<p>Sorry, No shots yet</p>');
      }
    }
});

Add some CSS also, just check our website for the demo; See the Demo

/* Dribble shots on website */

 #dribbbleShots {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -.5rem;
    margin-left: -.5rem;
}

#dribbbleShots li {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    padding-right: .5rem;
    padding-left: .5rem;
    flex-basis: 30.333333%;
    max-width: 30.333333%;
    position: relative;
    height: 300px;
    margin-bottom: 20px;
    margin-left: 20px;
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
    overflow: hidden;
}

#dribbbleShots li:before {
    position: absolute;
    content: "";
    width: 1000px;
    height: 1000px;
    background: rgba(33, 43, 185, 0.93);
    top: 0;
    left: 0;
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.5s;
    opacity: 0;
    transform: translate(-46%, -111%) rotate(60deg);
}

#dribbbleShots li img{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    height: 100%;
}

#dribbbleShots .title{
    position: absolute;
    bottom: 25px;
    left: 30px;
    font-size: 25px;
    font-family: 'Montserrat';
    font-weight: 700;
    color: #fff;
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
    transform: translateY(30px);
    opacity: 0;
    width: 70%;
    line-height: normal;
}

#dribbbleShots li:hover{
    box-shadow: 0px 9px 30px rgba(0, 0, 0, 0.21);
    transform: scale(1.02);
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
}

#dribbbleShots li:hover .title{
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
    transform: translateY(0px);
    opacity: 1;
}

#dribbbleShots li:hover:before{
    opacity: 1;
    transform: translate(-35%, -43%) rotate(60deg);
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.5s;
}

Hope this small article helps you, if it does i'm happy :)
Good Day guys....!


posted 17 May 2018 , by Roben Rajan