Displaying thumbnails of your flickr photos without slowing down your web site

Here you can download a script to add a badge that shows the thumbnails of your flickr photos 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>
        

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

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/tags/tobago">Laura's photos 
  on flickr</a></p>
</div>
        

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 and copy and paste it from the URL .

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>
        

Cutting down on the number of images

In addition to the flickrbadge class you can add another instruction to the badge which is the number of thumbnails to display. Simply add "thumbs" followed by the number as a class. If there is no number provided the script will show the latest 20 thumbnails which is also the maximum amount possible.

<div class="flickrbadge thumbs10">
  <p><a href="http://www.flickr.com/photos/11414938%40N00/tags/atmedia">My 
  @media photos on flickr</a></p>
</div>
        

You can remove the original link and the link to all thumbnails by adding a nolinks class.

<div class="flickrbadge thumbs10 nolinks">
  <p><a href="http://www.flickr.com/photos/11414938%40N00/tags/brighton">My 
  @media photos on flickr</a></p>
</div>
        

Styling the badge

If you want to change the look and feel of the badge, you can edit the flickrbadgelight.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.

The HTML code that is generated for you to style is the following:

<div class="flickrbadge" id="{generated ID}">
  <p><a href="http://www.flickr.com/photos/11414938%40N00" 
  class="flickrlink">My latest photos on flickr</a></p>
  <ul class="flickritems">
    <li><a [...]><img [...] /></a></li>
    [...]
  </ul>
  <p><a href="http://www.flickr.com/photos/codepo8/">see all photos</a></p>
</div>

Get the code

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

• Download the flickr badge light.

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.