Wordpress: integrating Flickr with jQuery

Integrating Flickr in Wordpress is an easy task with jQuery. All we need is a Text widget where we can put an HTML element and a simple jQuery function. Let's see the details.

First of all, you need to create a Text widget where you want the Flickr photos to appear. Inside this widget, just put the following HTML code:

<div id="flickr"></div>

Then, in your main JavaScript file, create the following function:

function getFlickrPhotos(limit) {

  limit = limit || 5;
  
  var url = 'http://api.flickr.com/services/feeds/photos_public.gne?id=31968388@N02&format=json&jsoncallback=?';

       $.getJSON(url, function(data) {
          
  
        var html = '';
      
        $.each(data.items, function(i,item) {            
            
             html += '<a href="' + item.link + '"><img src="'+item.media.m+ '"/></a>';
             
             
             return i < limit;

            
        });
      
        $('#flickr').html(html);        
    
     });



}

Before using it, however, you need to get your Flickr ID (the id parameter in the URL). You can get it here. The limit parameter (starting from 0) tells the function how many photos you want to retrieve (defaults to 6).

Finally, you have only to invoke that function:

(function($) {

  $(function() {
  
    getFlickrPhotos();
  
  });

})(jQuery);

Leave a Reply

Note: Only a member of this blog may post a comment.