However you get it, once you have it, you can use Jribbble to snag all this good stuff:

…but how does it work? You ask.

  1. If you haven’t already, register an application on Dribbble. Go ahead. Do it now. We’ll wait.

  2. Include jQuery and Jribbble in your html before the closing </body> tag:

    <body>
      <script src="bower_components/jquery/dist/jquery.min.js"></script>
      <script src="bower_components/jribbble/dist/jribbble.min.js"></script>
    </body>
  3. Add an element (or elements) to your html where you want Dribbble stuff to display:

    <body>
      <ul class="shots"></ul>
    
      <script src="bower_components/jquery/dist/jquery.min.js"></script>
      <script src="bower_components/jribbble/dist/jribbble.min.js"></script>
    </body>
  4. Give Jribbble the client access token for your Dribbble application (you registered an app right?)

    <body>
      <ul class="shots"></ul>
    
      <script src="bower_components/jquery/dist/jquery.min.js"></script>
      <script src="bower_components/jribbble/dist/jribbble.min.js"></script>
    
      <script>
        $.jribbble.setToken('1234567890');
      </script>
    </body>
  5. Tell Jribbble you want somethin’! In this example we want team shots, but there are other options:

    <body>
      <ul class="shots"></ul>
    
      <script src="bower_components/jquery/dist/jquery.min.js"></script>
      <script src="bower_components/jribbble/dist/jribbble.min.js"></script>
    
      <script>
        $.jribbble.setToken('1234567890');
    
        /*
          Jribbble methods make ajax requests to the Dribbble API. When
          the requests complete, a Promise is returned. Use `then` to take an action
          on the response from the server.
        */
        $.jribbble.shots('teams').then(function(shots) {});
      </script>
    </body>
  6. Iterate through the response to build markup for the shots then append them to the DOM:

    <body>
      <ul class="shots"></ul>
    
      <script src="bower_components/jquery/dist/jquery.min.js"></script>
      <script src="bower_components/jribbble/dist/jribbble.min.js"></script>
    
      <script>
        $.jribbble.setToken('1234567890');
    
        /*
          Jribbble methods make ajax requests to the Dribbble API. When
          the requests complete, a Promise is returned. Use `then` to take an action
          on the response from the server.
        */
        $.jribbble.shots('teams').then(function(shots) {
          var html = [];
    
          shots.forEach(function(shot) {
            // See the Dribbble docs for all available shot properties.
            html.push('<li class="shots--shot">');
            html.push('<a href="' + shot.html_url + '">');
            html.push('<img src="' + shot.images.normal + '">');
            html.push('</a></li>');
          });
    
          $('.shots').html(html.join(''));
        });
      </script>
    </body>