Add image feed from flickr.com to your page

Sometimes you might want to add the images from the flickr.com website to your webpage, so that this feed updated each time the page is loaded or reloaded.

Creating such a feed for your website is quite easy. All you need is a website (or an HTML webpage). Follow the easy steps below to learn how to do that.

Step 1: create a webpage

Add a new webpage to your website, or simply create a webpage if it is standalone. The code should look somehow like the one below:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body></body>
</html>

This is a basic HTML page code, without anything added to it. It is not enough to create anything we need, so let's save it as, for example, MyPage.html and skip to step two.

Step 2: connect jQuery library

jQuery is a JavaScript library commonly used on many websites. You can download it from the official website or connect it using the CDN address. Let's not download anything, we will connect the latest version from the Google CDN:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body></body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</html>

Step 3: create images placeholder

Now create a DOM element which will contain the loaded image. We will add a div element with the id="images":

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</html>

Step 4: initialize the flickr feed

Now all you need is to initialize the created element with flickr photos. This is done with the lines 11 — 25 below. Put this code after jQuery, as it needs it to work, using the <script></script> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>My new page</title>
  </head>
  <body>
    <div id="images"></div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script>
    (function() {
      var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
      $.getJSON( flickerAPI, {
        tagmode: "any",
        format: "json"
      })
      .done(function( data ) {
        $.each( data.items, function( i, item ) {
          $( "" ).attr( "src", item.media.m ).appendTo( "#images" );
          if ( i === 11 ) {
            return false;
          }
        });
      });
    })();
  </script>
</html>

And now open your created page in your favorite browser. If everything is done right, you will see your flickr photos on your created page, and they will update on each page reload:

Add image feed from flickr.com to your page

Step 1: create a webpage

Step 2: connect jQuery library

Step 3: create images placeholder

Step 4: initialize the flickr feed

Most recent uploaded flickr photos