Displaying your flickr photos without leaving or slowing down your web site

Here you can download a script to add a flickr badge like the following to any HTML document or blog with some HTML and a JavaScript include. The following badge is added to the document using this code:


<div class="flickrbadge">
  <p><a href="http://www.flickr.com/photos/11414938%40N00">My latest photos 
  on flickr</a></p>
</div>
<script src="flickrbadgeloader.js"></script>
        

You only need to insert the SCRIPT once, and the best option is to add it to the end of the document, just before the closing BODY tag.

To add a badge all you need to do is add the link inside a DIV with the class flickrbadge and the script does the rest for you. You can use as many badges as you want in the same document. You can also only show pictures of your photo stream tagged with a certain tag, for example tshirtaday:


<div class="flickrbadge">
  <p><a href="http://www.flickr.com/photos/11414938%40N00/tags/tshirtaday">My 
  T-shirts on flickr</a></p>
</div>
        

How to get the right URL

This should be much easier, but there is a small confusion in the flickr API we need to work around. The team is aware of this and we might not have to do that soon (I will update this page if it is fixed).Fixed on 11/09/07 - all hail Cal Henderson!

If your flickr page URL does not feature a user name but the ID (the one with @ inside it), you have no problem. For example the flickr stream of my friend Laura is: http://www.flickr.com/photos/28806816@N00 and that can be used immediately:


<div class="flickrbadge">
  <p><a href="http://www.flickr.com/photos/28806816@N00">Laura's photos on flickr</a></p>
</div>
        

You can also only show her "tobago" photos:


<div class="flickrbadge">
  <p><a href="http://www.flickr.com/photos/28806816@N00/tags/tobago">Laura's photos 
  on flickr</a></p>
</div>
        

You can see this page on her Tobago Retreats web site in the gallery section.

If you have a user name set up and your URL does not have the @ id in it, like my stream does http://www.flickr.com/photos/codepo8/ then you need to find your ID.

How to find your flickr ID

Finding your ID is easy, you can simply click the RSS feed at the bottom of your stream activating the link to the RSS feed on the bottom of the page and copy and paste it from the URL the url with the ID in it.

Or you can use IDgettr and get the ID that way. Once you have the ID you can assemble the URL:


<div class="flickrbadge">
  <p><a href="http://www.flickr.com/photos/codepo811414938%40N00">My T-shirts on 
  flickr</a></p>
</div>
        

<div class="flickrbadge">
  <p><a href="http://www.flickr.com/photos/codepo811414938%40N00/tags/tshirtaday">My 
  T-shirts on flickr</a></p>
</div>
        

Styling the badge

If you want to change the look and feel of the badge, you can edit the flickrbadge.css file which contains all the styling. This file gets automatically added by the script, so you do not need to link it in your document. All you need to do is have it in the same folder.

Get the code

You can download the code, a simple demo page and the needed images and CSS file here:

The script is released under Creative Commons Attribution 3.0 License which means you can use and modify it if you mention me as the original author.

Feedback

You can send me feedback and ask for more details about the script by going to my blog and comment.

All work by Christian Heilmann, Some rights reserved.