Flash Flickr Badge Widget for WordPress

September 14, 2006 By: Erik R. Category: Flickr, Wordpress 44,024 views

Rate this post:
1 Star2 Stars3 Stars4 Stars5 Stars (18 votes, average: 4.17 out of 5)
Loading ... Loading ...

I love the Flickr Flash Badges, but the content of the iframe that you have to put on your page is not valid XHTML. That just won’t do. So I decided to take matters into my own hands…

While I was investigating the parameters that Flickr’s flash file takes, and figured out how to change the numbers of rows and columns, as well as the size of the images in the badge.

With a little PHP tinkering, a plug-in was born!

flickr-flash-badge-widget.1.2.zip

Features

  • Simple widget interface
  • Easily set up to use whatever Flickr account you wish
  • Easily change the size of the thumbnails
  • Easily define the number of rows and columns
  • Easily limit your pictures by Flickr tags
  • Choose between two transitions:
    • Big Then Small
    • Fade

Requirements

Installation

  1. Download the plugin here: flickr-flash-badge-widget.1.1.zip
  2. Unzip the plugin into your /wp-content/plugins directory.
  3. Activate the plugin in your WordPress admin.
  4. Enter your Flickr account details into the widget settings on the Sidebar Widgets page in your WordPress admin (see screenshot).
  5. Drag the widget onto the sidebar where you want it on the Sidebar Widgets page in your WordPress admin.

Screenshots

Widget Settings Screenshot

The plugin can be seen in action on the sidebar on the left side of this page.

How can I find my @N00 Flickr ID?

One easy way is to use Big Huge Lab’s Flickr DNA page. Simply enter your username into the box and hit ‘Apply’.

Why was this hard?

Flickr has a magic variable called “magisterLudi” (which seems to be a literary reference) that changes every 24 hours. When you use their default method with the iframe, the content of the iframe contains the current value of the magisterLudi. This prevents you from just pasting the <object> tag to run the flash file on their server and bypassing their iframe. (It will work, but not for more than 24 hours.)

To solve this problem, this plugin goes to fetch the contents of the iframe from Flickr, parses it to get the current magisterLudi value, and uses that to display the flash object directly on your page, thereby avoiding the iframe and bypassing their mechanism intended to force use of their iframe.

A caching mechanism is in place to reduce these server-side calls to Flickr. By default, it will only update the magisterLudi value from Flickr every two minutes. Therefore, for two minutes (after Flickr changes the value) every day the plugin will fail. You may change this value in flickr-badge-widget.php if you wish.

Questions and Comments

You may leave questions and comments on this blog, or email them directly to me at erikwordpressplugins -at- gmail.

114 Comments to “Flash Flickr Badge Widget for WordPress”


  1. Erik when I look at my source i see this: id=”flickr-badge”

    Is that correct? or else how can I fix it because my page is only showing the words Flickr and by Eric Rasmussen, no pics in between, Thanks!

  2. I’ve emailed Carlos and fixed his problem. The required flickr-badge.js wasn’t being properly imported.

    • Hi Erik,

      your badge was working fine! until all of a sudden it just stoped working! Now i know things don’t just die by them self… but i would appreciate it working again. Like Carlos in the post above, i also only see your name and that’s it.

      Any sugestions on how I can fix this?

      Thanks
      Roger

  3. You are my hero.
    Finally a widget plugin of flickr that works without problem.
    Wonderful! :-)

  4. wow thats really cool i might use this on my site because the widget looks like it works

  5. Just updated from a previous version. Now the thumbnails are super small, bumped them up as much as I could using the admin interface, but its still a fraction of what I used to have this configured for. Is there a way to get these photos fed to my site at some resolution bigger than 60×60?

  6. No, I’m sorry, Steve. The resolution of the thumbnails is controlled completely by Flickr and their Flash app. All my plugin does is embed their app and pass some parameters.

    Changing version of the plugin shouldn’t have affected anything like that.

    • I have the same problem.

      I used it with big thumbs before (150, I guess) and now just 60!
      I m looking for the old version, do you have it there? I dont really remember which one it was…

  7. Yes I had the same problem. Just made an update, now the thumbails are too small to see.

    The admin interface doesn’t work for sizing at all. There must be something different from the previous version as it was working yesterday just fine, or at least I thought it did?

  8. jessica says:
    10

    i love this plugin! but how can i show my flickr favorites? i dont have any photos of my own at this moment.

  9. Jessica: The selection of photos must be from your photostream. I have no control over the photos selected. That is the job of the Flash application provided by Flickr. Sorry, but this badge can only be used to showcase your own content.

  10. Chris says:
    12

    It would be much helpful, if you show us a demo of the plugin! You mentioned it above, but in your sidebar is no demo!

  11. Chris, check out any of these pages that are using this plugin.

  12. Billy Brasov says:
    14

    Hi, I recive this message in my web site : ” no such
    photos” and the same plugin in the same wordpress version but with other theme is working.. With corporate premium theme from studiopress.com is not working.. any solution?

    Thanks!

  13. senthil says:
    15

    hi guys,

    i am not able to display the photos more than 24 can anyone help to how to display more than that.

    http://58.68.27.116:400/vapir/blog/

    regards,
    senthil.k

  14. james says:
    16

    I have followed the instructions and everything works well except the photos being displayed are not mine. I inserted the ID for my Flickr group, but the widget seems to display member’s photos.

  15. James, the widget will display photos for one Flickr user only. It’s your user id that you need to put in. It doesn’t work for groups.

  16. Svend says:
    18

    Hi Erik,

    thanks for the great plugin, i run it since yesterday and i want to youse it twice times now. One should run with my flickr acc and one with a friends one. Can you tell me what to do?

    thanks in advance Svend

  17. Svend, this plugin only supports having one instance of the widget in your sidebar at a time. Sorry.

  18. One of the best sidebar widgets I know of. Great job! Thanks so much! :)

  19. Hi, Thanks for this great plugin.
    What could we do/change to make this work on the Groups ? (I really need that :/)

  20. Hi Erik

    I uploaded this widget with a lot of excitment earlier, but I’ve adjusted the settings, made sure my latest uploaded photos are publicly available and found my Flickr ID is correct – but NOTHING will allow me to see any photos on my site. All I get is the title and your name with a link to your site:(

    I don’t want to delete this widget as so many others seem to have it work for them. Please tell me what I’m doing wrong.

  21. genericjanedoe: I have looked at your page, and the problem is that the path to the javascript file that should be in blog-dir/wp-admin/plugins/flickr-flash-badge-widget/flickr-badge.js isn’t resolving (returning 404). If you fix that to where the plugins really are, you should be fine.

  22. Hi Erik, thanks for the swift response.

    I’m pretty new at all of this, and I’m not sure what you mean by fixing the .js file to where the plugins really are. Do you mean that I should move flickr-badge.js to the wp-admin folder? Because the plugins folder is actually under wp-content.

    Thanks again

  23. genericjanedoe: I’m sorry, that was my fault. It should be under wp-content. The problem is that the path to that js file is wrong. The problem is that your wp-content/plugins folder isn’t where it normally is.

    Since I don’t know how your blog setup is, I can’t really tell you much more. Is wp-content not in /Blog?

  24. Hi Erik

    flickr-badge.js is currently sitting under:

    /public_html/Blog/wp-content/plugins/flickr-flash-badge-widget

    Should the .js or the plugins file be sitting somewhere else?

  25. genericjanedoe: That sounds okay. It’s unclear to me why it wouldn’t be working for you. Sorry. Perhaps you could contact someone at your hosting service to see why the url to the js file is failing?

  26. Nice one! Super easy to use. Two questions/comments. Seems that it hangs up when it reaches a video (just populates all cells with the same video image over and over). Also, when I added “blog” tag at flickr then used “blog” tag for the badge it said no such photos. Does it take some time for flickr to update? THX and great plugin overall.

    • Hmm. That’s a problem with the Flickr badge that Flickr provides, I’m afraid. They wrote that code long before they allowed videos on Flickr.

      I suspect that your tagging stuff might work if you give it a little time. But if not, it’s not really a problem with my plugin, but with Flickr’s flash badge.

  27. Scratch that last. Seems to have updated and works fine. So, i guess its just perfect!!! Thx

  28. Love the plugin and visitors do as well. I have had a problem with it, though. I have four sets of photos on my flickr photostream, but only two show up – the first two I uploaded to flickr. Anything you would suggest I do? Thanks so much.

  29. iJohannes says:
    32

    Hey,
    i`m using your GREAT Flickr Plugin. Can i remove the ,,By Erik Rasmussen” link under the Flickr Gallery? Please E-Mail me!

    THX!

    • Yes, but you’ll need to edit the plugin file in the wordpress admin under Plugins –> Editor, and select this plugin. You’ll want to remove the following code:
      <br/><small>By <a href="http://www.erik-rasmussen.com/blog/2006/09/14/flash-flickr-badge-widget-for-wordpress/?src=ffbw">Erik Rasmussen</a></small>
      If you’re going to remove the link, might I suggest a donation?

  30. iJohannes says:
    34

    NIIIICE!

    Best Flickr Plugin!

  31. Hi Erik, congratulations on a fantastic plugin! I however have a question.

    Having recently updated to 2.8.4 (current update) I find that the plugin creates a grey border below and to the right of the block of images in my otherwise white sidebar, when it never did so with previous versions.

    http://rolltoronto.ca

    Do you know where I might find and alter the hex controlling this?

    Best regards,

    Guy Crawford

  32. Super widget. Thanks for creating and sharing! I had a problem at first with the flickr id, since mine is not shown when viewing my photos. However, after coming here, I was delighted that you even give instructions for getting the flickr id. Again, super widget. Thanks, Thanks, Thanks!!!!!

  33. Hi — Any chance there’s a way to make this work with a Flickr group?
    Thanks!

  34. Hi Erik. Thanks for your work on this. I hope you can help me with a problem.

    I have 100 photos in my photostream, but only a fraction of them show up in the widget. If I increase the columns and rows it just repeats pictures instead of pulling the rest.

    You mentioned above being able to limit pictures with tags, is that the answer to my problem? What tag should I use?

    If that’s not the solution, can you help me out? I’d like all my pics up there.

    Thanks,

    Erik

  35. I have a client that loves having the badge on the site – but for a very special reason (which I won’t go into) – they don’t want the thumbnails “clickable” to the Flickr site itself. They want the fun feature of the latest submitted images to show up – but want to keep the users on THEIR site without leaving and going over to Flickr.

    Can this be done? Can everything work the same way – but just somehow make it so the user cannot click on a particular image to go on through to Flickr?

    I hope this makes sense. It’s a photo contest site that uses Flickr as part of the submission process – but they want to keep the users on THEIR site rather than going on through to Flickr.

    Kindest regards,
    StacyN

    • No, Stacy, that’s not possible. Flickr wrote the badge code and Flickr is interested in getting visitors to their website.

      According to Flickr’s Terms and Conditions, you’re not even allowed to embed an image in your web page without a link to Flickr.

  36. ShAkEr says:
    46

    Hello, I have a problem with this plugin, that I love anyway, I do not know if it has to be with the plgin or with the badge provided vy Flickr, but i t puts itself above everything ib the browser, for instance if I make a picture emergent using lightbox the images on the plugin appear in the middle of the emerging picture, and this is quite annoying.

    • Actually that sounds like a browser-specific problem. Flash and javascript are fighting with each other. You could maybe try to put a very large z-index style on the lightbox div and see if that helps, but I suspect the problem is that your browser just doesn’t like rendering HTML over a flash object. Try other browsers, too, to verify that it’s browser-specific.

      It certainly has nothing to do with the php code in this plugin.

      • ShAkEr says:
        48

        Hello, I have checked with 3 navigators (Firefox, IE and Chrome) and it happens in all of them, on the other hand it does not happen with other flash objects inserted . I have checked and it is not your plugin’s fault but flickr’s as the same thing happens with the standard Flickr flash badge.

  37. George Bush says:
    49

    Too bad for conservatives all web developers are liberals.

  38. Hi Erik! Cheers for the awesome widget! I have one small problem in the backend – all changes and stuff work, but i frequently get this message while editing posts:

    Warning: Cannot modify header information – headers already sent by (output started at /home1/sustainu/public_html/youthclimate/wp-content/plugins/flickr-flash-badge-widget/flickr-badge-widget.php:341) in /home1/sustainu/public_html/youthclimate/wp-admin/async-upload.php on line 24

    Any idea what is causing this? Thanks for your help mate!

    • Hmm.. That’s very odd. Maybe that’s being caused by the request going out to fetch the iframe contents from Flickr. I haven’t seen that before.

      Anybody else getting this?

      • Actually, this is causing fairly widespread chaos on the site. Even the login page isn’t working (I can still access the backend because I have a cookie from when the plugin wasn’t installed). flickr-badge-widget.php seems to be being called very often, in routines such as save post, upload image, list plugins, etc…

        An example of the error on the login page:
        http://youthclimate.org/wp-admin/

        For what its worth, I’m using plugin version 1.3 on Wordpress 2.8.4.

        Thanks for your awesome support mate, its definitely worth a donation to me!

        • That’s bizarre. Perhaps it’s conflicting with another plugin. I would try disabling all plugins and then enabling just the Flickr Flash Badge plugin. If that still breaks it, then we know my plugin (in combination with your theme) is to blame. If it works, then try enabling the others until you find the one that breaks things, then perhaps I could try to resolve the conflict. Please report back on your findings.

          • Hi Erik,

            I disabled all the plugins, enabled Flash Badge, and got the same error. A good test seems to be uploading an image to a post, or the login page from a browser without the authentication cookie.

            My theme is Arras Theme 1.3.5… let me know if you have any ideas what the problem could be! I have disabled Flash Badge for now.

            Cheers and hi from Berlin!
            Leon

          • Leon, I just installed that theme for my blog on my dev server (very nice theme, by the way!) and the Flickr Flash Badge 1.3 worked on WP 2.8.4. So I don’t know what to tell you. Perhaps you need a PHP upgrade or some other library compiled in? Sorry I can’t help you any further.

  39. Erik,

    Your plugin was working wonderfully until all the sudden it said “no such photos” Any suggestions as to why this may be? Thanks

  40. I have just upgraded to WP 2.9.1 but it appears that the plugin won’t work with 2.9.1. It advises it causes a fatal error on reactivating after the upgrade.

  41. gretchen says:
    60

    I have the same problem, i tried deleting and reinstalling, with no success. it started as soon as I upgraded to 2.9.1.

  42. :Unfortunately, my images stop showing up when I specify a tag. The entire site shows fine when i remove the tag (DO NOT want that) Should I wait until the tag propagates the Flickr site or should this be instant? Solutions.”

    Resolved. Works now. Just had to wait 2 minutes.

  43. I really love this flickr badge but do you have a version available for a website that is not wordpess? A script I can insert into the source? Thank you!



Leave a Reply