How to call flickr api in html website?

To begin using the Flickr API:

Step 1:

Add single line of html code

<div id="links"></div>

Step 2:

Add few line of javascript code

$.ajax({

    url: (window.location.protocol === 'https:' ? 'https://secure' : 'http://api') + '.flickr.com/services/rest/',

    data: {

        format: 'json',

        method: 'flickr.photosets.getPhotos',

        api_key: 'YOUR-API-KEY',

        photoset_id: 'YOUR-ALBUM-ID'

    },

    dataType: 'jsonp',

    jsonp: 'jsoncallback'

}).done(function (result) {

    var linksContainer = $('#links'),

    baseUrl;

    // Add the demo images as links with thumbnails to the page:

    $.each(result.photoset.photo, function (index, photo) {

        baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret;

       $('').append($('').prop("src", baseUrl + ".jpg"))

        .prop('href', baseUrl + '_b.jpg')

        .prop('title', photo.title)

        .attr('data-gallery', '')

        .attr('class', 'col-md-4')

        .attr('data-toggle', 'lightbox')

        .appendTo(linksContainer);

    });

});