Search code examples
javascripthtmljquerydribbble-api

jribbble not returning results


I have jribbble running on my page to bring back shots from my dribble page. It's been working for a while. However, the last few days has been showing this error in the console:

Failed to load resource: the server responded with a status of 404 (Not Found)

Site: http://atlantadesign.ninja/

JS:

<script type="text/javascript">
$(document).ready(function getDribbbleShots() {   
  $.jribbble.getShotsByPlayerId('abenjamin765', function (playerShots) {
      var html = [];

      $.each(playerShots.shots, function (i, shot) {
          html.push(

            '<li class="tile"><div>'+
                '<a class="thumb" href="'+shot.image_url+'" data-lightbox="project" data-title="'+shot.title+'"><figure>⤢</figure>' +

                  '<img src="'+shot.image_url+'" alt="'+shot.title+'" />' +

                '</a>' +
                '<a class="link" href="'+shot.url+'">'+shot.title+' →</a>'+
            '</div></li>'
            );
      });
      $('.dribbble-feed').html(html.join(''));
      $('.dribbble-feed').append('<li class="tile"><div><a class="link special" href="http://dribbble.com/aBenjamin765" target="_blank">See more on Dribbble →</a></div></li>'); 
  }, {page: 1, per_page: 12});
});
</script>

Solution

  • Dribbble now requires you to register an application to get an API key.

    Check out this example: http://codepen.io/tylergaw/pen/NqpzvE

    // NOTE: Don't use this token, replace it with your own client access token.
    $.jribbble.setToken('f688ac519289f19ce5cebc1383c15ad5c02bd58205cd83c86cbb0ce09170c1b4');
    
    $.jribbble.users('tylergaw').shots({per_page: 36}).then(function(shots) {
      var html = [];
    
      shots.forEach(function(shot) {
        html.push('<li class="shots--shot">');
        html.push('<a href="' + shot.html_url + '" target="_blank">');
        html.push('<img src="' + shot.images.normal + '">');
        html.push('</a></li>');
      });
    
      $('.shots').html(html.join(''));
    });