This post outlines a quick and easy way to display your Flickr photostream on your personal web site using javascript (no server-side programming necessary). We will use JQuery as the vehicle for making the javascript call to Flickr. The feed will be returned in JSON (JavaScript Object Notation) format and then displayed on the site using simple javascript.
Don’t understand all of this? Don’t worry…just copy and paste the stuff below and everything will be just fine.
Log into your Flickr account, click on your Photostream main page, and click on the RSS Feed button at the bottom of the page (orange icon). The url that you get to should look like this:
http://api.flickr.com/services/feeds/photos_public.gne?id=xxxxxxxx@N08&lang=en-us&format=rss_200
Important: You must change the format of the feed to JSON. Simply change the end of the link from “=rss_200″ to “=json&jsoncallback=?”. Your new link will now look like this:
http://api.flickr.com/services/feeds/photos_public.gne?id=xxxxxxxx@N08&lang=en-us&format=json&jsoncallback=?
Add this code between the <HEAD> tags in your site. Be sure to download JQuery first and put it in your /js/ file directory! Also, be sure to replace “—YOUR FEED URL HERE—” with your own personal feed link that you obtained in Step 1.
$(document).ready(function() {
//Flickr Integration
$.getJSON("---YOUR FEED URL HERE---", function(data){
$.each(data.items, function(i,item){
if(i<=5){
$("<img/>").attr("src", item.media.m).appendTo("#FlickrImages ul")
.wrap("<li><a href='" + item.link + "' target='_blank' title='Flickr'></a></li>");
}
});
});
});
Add this between the <BODY> tags of your document where you would like your Flickr Images to Reside:
<div id="FlickrImages"><ul></ul></div>
Add this code between the <HEAD> tags of your document.
<style type="text/css">
#FlickrImages{
margin-bottom:1em;
float:left;
}
#FlickrImages li{
float:left;
padding:8px;
background-color: #eee;
margin: 0 5px 5px 0;
}
#FlickrImages img{
width:120px;
height:80px;
}
</style>
To see a demo of this, just look at the footer of this web site. The images at the bottom right are from my Flickr account.
I'm a web developer, UI/UX specialist and online strategist with over 10 years of experience in the field. I am currently freelancing and am available for hire. I have hands-on experience in all stages of the SDLC. If you or your business needs a web site, could use some help with your online strategy, or if you need to get started with SEM, please feel free to contact me.
I can help you with: Web Site Design and Development, Search Engine Optimization, Search Engine Marketing, Multivariate Testing, Metrics Analysis, Campaign Optimization, Social Site Integration, E-mail Marketing and everything else that has to do with the Web.
I work/haved worked with the following technologies: XHTML, CSS, Javascript, Ajax, JQuery, MySQL, SQL Server, ASP, ASP.Net, Coldfusion, PHP, Wordpress, Flash, Google Analytics, Google Adwords.
Thanks for this!
How easy is it to adapt the code so that it pulls in photos by tag instead of by user?
Any help would be appreciated!
I am having problems displaying it on safari…
Thanks – will have to try this out when I finally make my portfolio!