Flickr DHTML Badge

41 Comments

Here you will find a pure Javascript and CSS (aka DHTML) implementation of Flickr’s neat flash badge widget. I wrote it because I wanted to customize the behavior of the Flickr’s flash badge but was unable to, because I don’t have a flash editor, and because flash isn’t exactly customizable (unless decompiling is your thing). So here it is, if you have Javascript enabled in your browser then you should be seeing it run in the left rail of this page.

If you would like to use this DHTML Badge on your site, please let me know by adding your site to the comments of this page. I would also welcome any bug reports and/or feature suggestions you may have. This is unsupported software and I make no guarantees about it’s functionality, so it may blow up and erase your entire web site (not really). Fortunately, it should be pretty easy to install and requires just some basic copy and pasting.

WordPress Users: A plugin which does all this for you automatically is available for download >

Author: Joe Tan (joetan54@gmail.com)
License: GPL
Modification History:

  • 0.2 – Sept 24 2005 — alpha preview uploaded
  • 0.1 – Sept 5 2005 — posted

Some Features:

  • No additional browser plugins to download or install
  • You can have an arbitrary number of photos rotating in your badge
  • You can change the width and height of your badge
  • You can specify any size (width x height) for your thumbnails
  • Thumbnails fade into view if the browser supports it
  • Thumbnails are selected randomly
  • Delay between new thumbnails can be customized
  • Not limited to Flickr, it’s compatible with other online photo services
  • Tested with Firefox, Safari, Opera, and Internet Explorer

Required files (download these):

  1. Badge.js javascript library (right click to download)
  2. Badge.css stylesheet (right click to download)

Basic installation: (static photos list)     – example: badge.html

  1. Download badge.js and badge.css and upload to somewhere on your server
  2. Include badge.js and badge.css somewhere between the <head> tags of the page you want to use the Flickr DHTML Badge. The code to do this should look something like this:

    <script src="http://www.yourserver.com/badge.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.yourserver.com/badge.css" />
  3. Add the following HTML snippet to where you want your badge to appear. Adjust the width and height as appropriate. You could also just use CSS to position this badge to wherever you want it.

    <div id="badge" style="width:150px;height:150px;"></div>
  4. Alright, now you have everything setup ready to go. Now you just need to load some photo’s into your badge. Make sure you call the initialize() function at the end. Here is an example of how your Javascript might do this:


    <script>

    if (typeof Badge == 'function') {
    Badge.addPhoto('http://www.flickr.com/photo1.jpg', 'http://www.flickr.com/photopage1.html')
    Badge.addPhoto('http://www.flickr.com/photo2.jpg', 'http://www.flickr.com/photopage2.html')
    Badge.addPhoto('http://www.flickr.com/photo3.jpg', 'http://www.flickr.com/photopage3.html')
    /* .... etc .... */

    // the height and width of your thumbnails (in pixels)
    Badge.setSize(50)

    // space between thumbnails (in pixels)
    Badge.setMargin(2)

    // delay between each new thumbnail (1000 = 1 second)
    Badge.setDelay(3000)

    // start the badge. "badge" is the ID for your <div>
    Badge.initialize('badge')
    }
    </script>

  5. That’s it. Here is an example installation using the instructions above. As you can see, this setup doesn’t actually dynamically load photos from Flickr (see the next set of instructions for that). In fact, you could even use photos from any source. This should now give you a good idea of how it works.
  6. Some notes:
    – The number of pictures that appear in your badge is automatically determined by the width and height you gave your badge (step 3) and the size you set for your thumbnails (step 4). So for example, if your badge has a width of 160px, a height of 160px, and a thumbnail size of 50px, then you’ll get 9 thumbnails.

    - Make sure you have added enough image to fill up your badge, otherwise your badge won’t look good and you’ll get some broken images.

    - Depending on the number of images you add into your badge, it may take a while for all the thumbnails to fully load. In this case, you may want to consider calling the initialize() function using the onload event handler for your page.

Slightly more advanced instructions (dynamically generated photos list)     – example: badge.txt

These instructions requires that you have PHP on your server. All the PHP does is simply fetch your recent image list from Flickr, and then performs step 4 for you.

  1. Download and install the phpFlickr class library. This allows you to make calls to Flickr and retrieve your photos. For the purpose of your badge, this example usage of phpFlickr will come in handy.
  2. Actually, the example script from the step above is all you really need, with a few modifications. The PHP script just needs to output Javascript (see step 4 in previous instructions) instead of HTML. Here’s an example of what those modifications might look like.
  3. You’re done. Here is the live PHP script I use for my site, which I use an <iframe> to call.

Other ways to load Flickr images

By no means are you limited to using PHP to dynamically load images into your badge. Flickr has a number of different methods for you to do exactly this, so I’ll leave other implementations as an exercise to the reader. Bonus points if you can hookup the badge to an AJAX library to dynamically load photos from Flickr as needed.

41 comments

  1. # Morpurgo.nl Sep 05, 2005

    Well I think you made some people happy, great stuff

  2. # Irv Cobb Sep 10, 2005

    I have badge up and running at TwoCObbs.net. Thanks!

  3. # GaryP Sep 17, 2005

    Thanks for a great plugin! I removed the flickr badge code I had and replaced it with your plugin. Was able to put a 2 row x 3 column badge in the header. I love it!

  4. # Quick Online Tips Sep 21, 2005

    Now listed on the Great Flickr Tools
    http://pchere.blogspot.com/2005/03/great-flickr-tools -collection.html

  5. # Jacob Smith Sep 29, 2005

    Will be on erinandjake.com soon.

  6. # Walt Nov 06, 2005

    For the life of me, I could not get the WordPress plugin version of this to work for me. Thank you much for the effort anyway, and thank you for a great “Plan B” also. Though not as easy to use as the plugin (or at least not as easy as the plugin should be), this version seems to offer greater flexibility such as specifying which flickr pics are used and to where they are linked.

  7. # Chris Dec 10, 2005

    Doh! I had an Ajax version coded and working on my local. It was beautiful how the browser would call out to the Flickr server and get the list of photos and load only the ones that it needed… but when I uploaded it to my website I got the dreaded cross-domain security error. It seems that you can only make Ajax calls to your own server. Ugh, and I was up late on a Friday working on it :-) I may clean it up and post it anyway just because it seemed like a cool idea. Any thoughts on how to get around this (other than moving the calls to the flickr server back to my server and having Ajax call them from there)?

  8. Pingback: Blogging Pro China » Blog Archive » WordPress Plugin: Flickr DHTML Badge
  9. # Brent Hugh Jan 05, 2006

    In the php instructions (badge.txt) there is a typo.

    Instead of this:

    $js = ‘Badge.addPhoto(“‘.$img['Square']['source' ].’”, “‘.$photos_url$photos[$i]['id'].$photos[$i]['id' ].’”);’;

    It should be this:

    $js = ‘Badge.addPhoto(“‘.$img['Square']['source' ].’”, “‘.$photos_url.$photos[$i]['id'].’”) ;’;

    (There is just one times too many $photos[$i]['id'] in the first one–it creates a “parse error”.)

  10. # Brent Hugh Jan 06, 2006

    Just FYI I put together something generally based on Joe’s DHTML/PHP flickr badge code. It also uses phpFlickr.

    The basic idea is to put a flickr photo, randomly selected and changing each time the page is re-loaded, from a particular person’s flickr account, or a set, or a group pool or a favorites list, or on the basis of tags, or whatever, into a specified spot of a specified size on a web page.

    It’s rather kludgy but looking it over maybe give you some ideas.

    You can see it in use on http://www.MoBikeFed.org or http://www.MoBikeFed.org/flickrbadge5.php

    Code can be downloaded at http://mobikefed.org/flickrrandomfit.txt

  11. # Armon Jan 31, 2006

    Hi Joe,
    Thanks for the script, it’s really cool. I’ve turned it into a plugin for NucleusCMS: http://forum.nucleuscms.org/viewtopic.php?t=10213

  12. Pingback: ~`{ >%^|<R’_|| 3|< 1 @# %^ &!~ » flickr stuff
  13. # Ed Ferguson Feb 20, 2006

    Hi Joe,

    What is the proceedure if I want to use only photos loaded on my own web site?

    Thanks,
    Ed

  14. # Kristin Mar 03, 2006

    I couldnt agree more!

  15. # Kaye Apr 15, 2006

    Hi Joe
    Using the Flickr Badge on my blog.It’s pretty cool!
    Kansasgirl

  16. # Anthony Apr 21, 2006

    I’m not seeing too many replies to these comments, so I’m not too hopeful, but here goes:

    I would love to implement exactly this for a calendar (grid of 30/31 images) but I do NOT wnat the images to be random. I want the moviement and resizing, but I want each image to remain in its own place.

    I also know very little JavaScript; I can read it *ok* but cannot code it for the life of me.

    Can anyone lend a clue to the clueless?

  17. # Ramon Kolb May 13, 2006

    Why did you use [div id=xxxx] tags instead of [div class=xxx] tags? This really precludes you from making multiple div’s with different badges on the same page.

    I have been using your plugin together with Mark Carey’s FlickPhotos plugin (http://www.mt-hacks.com) on Movable Type 3.2, but it won’t work well because I can’t create a unique badge for each main index entry…

    I know that these comments are never monitored, but feel free to comment or send email (first.last@gmail.com, see my full name in the header of this comment) if anyone can help…

    thanks,

    –Ramon

  18. # effkay May 13, 2006

    Hey, just trying out your dhtml badge. A great piece of work! One question: how could I get a “static” badge, in so far that it only reloads pics when the whole page is reloaded? E.g, no fading of the thumbs and so on…

  19. # icicle113 May 27, 2006

    HEy, just trying out your badge. Thanks alot.

  20. # waeko Jun 09, 2006

    Hi Joe
    Using the Flickr Badge on my blog.Its pretty cool!
    But

  21. # Jon Mikel, M.D. Jul 20, 2006

    Hey there.

    How to edit the Flickr Badge in order to open the thumbs images in a new window of the web browser?

  22. # Ed Eichman Jul 31, 2006

    Thank you, thank you, thank you! It’s neat!

  23. # Jason Aug 12, 2006

    Hi, I made a shiny new Flash based flickr badge, which I call badgr, it’s got *a lot* of customisable settings and a constuction kit to help make tweaking it that little bit easier… badgr requires Flash7 and the construction kit requires Flash9 (it’s built with Flex)

    Check it out here… http://mentalaxis.com/words/2006/08/09/badgr-20-and-construc tion-kit-released/

  24. Pingback: Andy’s Blog | ??flickr del.icio.us Digg????
  25. Pingback: AmoyDream : ??flickr del.icio.us Digg?????????
  26. # Deal Aggregator Aug 24, 2006

    thanks for sharing

  27. # Paul Oct 09, 2006

    This rocks. You’re da man.

  28. # Lusidvicel Dec 18, 2006

    Hello, i love tantannoodles.com! Let me in, please :)

  29. Pingback: One Day More » Blog Archive » User Images
  30. # dfong Mar 20, 2007

    I’m using it on my blog to display 200+ User Image submissions. Thanks so much. The directions were clear and very easy to follow.
    http://www.isity.net/blog/?p=65

  31. Pingback: flickr、del.icio.us、Digg 之完全攻略
  32. # Athanassios May 17, 2007

    Nice

  33. # Evis May 17, 2007

    Cool.

  34. # Theodosios Jun 07, 2007

    Cool…

  35. Pingback: 名剑风流 - Domainnamr Journal » 玩转flickr del.icio.us Digg 之完全攻略
  36. Pingback: .: utilidadeS parA Flickr :. « gcherO
  37. Pingback: Options for Easily Adding Flickr Photos to Your Website | Vandelay Website Design
  38. # Ryan May 25, 2008

    Thanks for sharing – this is *exactly* what I’ve been looking for. It looks and works great! : )

  39. Pingback: Flickr工具大集合 | 中文博客
  40. # Terence Aug 24, 2008

    This is fantastic. Apparently, I am a little late to the game (since the posts go back 3 years) but this is awesome software.

    Thanks for sharing it.

    Terence
    http://www.cityescapesphotography.com/

  41. Pingback: Flickr工具大集合 | Riku

Leave a comment