How to get Dribbble feed of popular posts?

I trying to have a Dribbble feed on a website with the latest popular posts. I'm in doubt if I should register an application via: https://dribbble.com/account/applications/new or can I just use JSON or AJAX to pull out the most recent shots that are posted on Dribbble?

I already tried this, but with no success. I receive the error:

Error:

GET https://api.dribbble.com/shots/popular?callback=jQuery111104258300690995278_1471442725999&_=1471442726000 404 (Not Found)

JS:

$.getJSON("http://api.dribbble.com/shots/popular?callback=?", function(data) {
    console.log(data);
    $('.dribbble-feed').append('<img src="' + data.shots[0].image_url + '" />');
});

Demo: http://codepen.io/anon/pen/YWgLaR?editors=1111

Update

After following the reply given by Karol Klepacki, I receive the following when log data to my console:

Updated JS:

$.getJSON("https://api.dribbble.com/v1/shots/popular?callback=?", function(data) {
    console.log(data);
    $('.dribbble-feed').append('<img src="' + data.shots[0].image_url + '" />');
});

Proper address for dribble api is https://api.dribbble.com/v1/shots.

Now you have to authenticate yourself. You have to register application, and you'll probably get some token, that you have to attach to your requests (Method 2 from here should be easier for you. Then you will have request like https://api.dribbble.com/v1/shots/?access_token=TOKEN

$(document).ready(function() {

  $.getJSON("https://api.dribbble.com/v1/shots/?access_token=TOKEN", function(data) {
    data.forEach(function(e){
      $('.dribbble-feed').append('<img src="' + e.images.normal + '" />');
    })
  });
});