WordPress Flickr DHTML Badge Plugin
114 CommentsNote: This plugin is no longer being actively developed. Eventually, this plugin’s functionality is going to be rolled into the Photo Album plugin as a WordPress sidebar widget.
This is a plugin for WordPress which allows you to display a Flickr-style badge on your site. This plugin retrieves the latest public photos for a particular user and rotates them in without the use of any flash.
The Javascript used for the display portion of this plugin is identical to the standalone Flickr DHTML Badge (which does not require WordPress, and can be used with any online photo service). For the backend data retrieval, this plugin makes use of the phpFlickr class library.
If you find this plugin useful for your site, please do let me know by adding your site to the comments of this page. Since this is my first WordPress plugin, I would also appreciate any comments / suggestions / bugs you may have. Thanks!
Not a WordPress user? You can try installing the standalone version of this plugin, which doesn’t require WordPress >
Author: Joe Tan (joetan54@gmail.com)
License: GPL
Modification History:
- 0.2 - Nov 12 — minor bug fixes, added ability to filter photos with tags
- 0.1 - Sept 12 2005 — posted
Some Features:
- Calls to the Flickr API are cached
- Searches for photos based on username, tags, or a combination of both
- No additional browser plugins for the end user 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
- Tested with Firefox, Safari, Opera, and Internet Explorer
Download the plugin: tantan_flickrBadge.tar.gz or tantan_flickrBadge.zip
Installation:
- Unzip / unpack the plugin archive
- Copy the entire “tantan” directory to your Wordpress plugins directory.
Your wordpress plugins directory should be something like [WORDPRESS DIR]/wp-content/plugins. - Go into your Wordpress admin, click on the “Plugins” tab, and then activate “WP Flickr DHTML Badge”.
- Click on the “Options” tab, and click the “Flickr Badge” subtab to bring up the options screen.
- Configure your badge and save your settings
- Add the following PHP snippet to your theme’s “sidebar.php” (or wherever you want your Flickr badge to appear):
<?php tantan_fbShowBadge() ?> - You’re done!
Notes and Known Issues:
- IMPORTANT: If you are using a custom theme, make sure the functions
wp_header()andwp_footer()are called in the appropriate places. I’ve noticed that some themes don’t properly callwp_footer(), which will cause this plugin to not work. - You might need to delete the “PEAR” directory if you already have the PHP PEAR libraries installed.
- There seems to be some layout issues (thumbnails not aligning up) with some themes.
Want more WordPress goodness?
Check out my other WordPress plugins and scripts >
Joe and Victoria
openbox9
Laity Lodge Youth Camp
Parkside Services
South Shore Baptist
Parkside Youth
Military Ministry
Campus Ministry
Know H2O
IFCJ
114 comments
Flickr DHTML Badge Plugin
tantannoodles.com…
A flickkr badge plugin for your site, sans the flash. And I bet it validates XHTML strict as well, something I coudln’t figure out how to do with Flikr’s badge. What I haven’t figured out yet is does the plugi…
A suggestion would be to able to be able to choose an album from an account, rather than just recent photos.
Help please!
I have included your plugin on my site but it will not show on the page. What do you mean by wp_header() and wp_footer() in the right places?
Thanks in advance
neil
Mhhm. Using standard theme, WP1.5.2, but configuration results in error:
Fatal error: Cannot redeclare tantan_fbshowbadge() (previously declared in C:\htdocs\wordpress\wp-content\plugins\tantan\tantan_flickrB adge.php:38) in C:\htdocs\wordpress\wp-content\plugins\tantan\tantan_flickrB adge.php on line 42
Any ideas?
Built a videoDB plugin based on your code: http://videodb.net/wordpress
Not working…
Do I need an API code?
It doesn’t work for my site though I did exactly what guided. What do you mean by “Flickr Username:” in Configure section. Does it mean my Flickr album name or my Flickr Login Account?
Outstanding Effort, but I am damned If I can get the thing to work. I can see the background image on my Kubrick toolbar but alas no images. How does this plugin know where to retrieve flickr images from? I see that one can sign up using a flickr or yahoo account. Or doesnt it matter. To log at flicker u need a username and password but the plugin doesnt ask for the password? any comments greatly appreciated.
good?
For maximum compatibility, please replace every <? with <?php
Really nice otherwise.
I can’t get the plugin to work. I put the call in the sidebar and on it’s own page within tags… and it’s not coming up in either place.
Also, there is no Flickr Badge tab on the options page; it’s only accessible through the link in the plugin info. Is that right?
How do I get my flickr photos to show up within my blog like you did? The badge works great, but it would be better if I could figure out how you got the photos to show up within your blog.
Hi Joe,
All i get showing is an empty DIV in the middle of my sidebar….
The original theme is “Journalised Winter” by Mike little. I have wp_head and wp_footer execuiting; the html generated includes the following code within
@import url(’/wp-content/plugins/tantan/badge.css’);
if (typeof Badge == ‘function’) {
Badge.setSize(48);
Badge.setMargin(1);
Badge.setDelay(30 00);
}
and this code is generated in my rightcolumn.php
In the config, I’ve tried both my photstream id and my my username, with and without the flickr userid number (from http://eightface.com/code/idgettr/ ).
Any idea whats going wrong ?
PS - removing the PEAR subdirectory gave me a bunch of errors:
Warning: tantan_phpflickr(HTTP/Request.php): failed to open stream: No such file or directory in /home/martine/public_html/whatsup/wp-content/plugins/tantan/ lib.phpFlickr.php on line 71
Fatal error: tantan_phpflickr(): Failed opening required ‘HTTP/Request.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php:/home /martine/public_html/whatsup/wp-content/plugins/tantan/PEAR& #8217;) in /home/martine/public_html/whatsup/wp-content/plugins/tantan/ lib.phpFlickr.php on line 71
so its back in.
Got an API key from http://www.flickr.com/services/api/ and configued it. Still doesn’t work.
PS got http://www.flickr.com/badge_new.gne (specifying an HTML badge) to work in less than 2 minutes - its on the lefthand column of http://martin-english.com/whatsup/
Chase:
I use FAlbum ( http://www.randombyte.net/blog/projects/falbum/ ) to display photos on my site. If you’d like to do the same thing as my site, then you’ll need to tweak the javascript code a little to reference your site, instead of Flickr.com.
Thanks Joe,
I’m new to WordPress as well, so I’ll check it out.
I finally got this to work. I did everything as is instructed on this site, but nothing was showing up. The source of my page showed the plugin working and populating photos toward the bottom of the code, but nothing showed up.
First, as someone asked above, the username you’re entering isn’t the same as your log-in. It’s the name people see once you’ve logged in. The name next to “aloha” or whatever the greeting of the moment is.
Next, I personally had to go into the code on “tantan_flickrBadge.php” and enter full URL’s for various things.
Make these into full URL’s instead of partials: (add http://yoursite/ to the beginning)
/wp-content/plugins/tantan/badge.css
/wp-conten t/plugins/tantan/badge.js
Take off the beginning slash from these:
/lib.flickrBadge.php
/badge-admin.html
With those changes, suddenly the badge appeared in my sidebar. I’m not PHP expert, so it’s all trial and error but this is what worked for me.
i can’t seem to edit my last comment but strike the part where I mentioned removing the beginning slash. That part is okay to keep as is, just change those two instances to full URL’s.
I’ve been mucking about a bit, and I can’t seem to come up with anything that will allow me to redirect/ or reference to my site. Can you point me in the general direction. Java really isn’t my thing, so if you could elaborate a little, it’d be greatly appreciated.
Joe kindly replied to my whinges, and after following his advice, everything worked !!
In my particular case, the issue is that for sites that install wordpress into a subdirectory (so that you access it via http://fred.com/blog/ rather than http://fred.com ), there’s two lines in tantan_flickrBadge.php that need to be changed :
1) look for /wp-content/plugins/tantan/badge.css
2) add your subdirectory - i.e. :
/blog/wp-content/plugins/tantan/badge.css
3) look for /wp-content/plugins/tantan/badge.js
4) add your subdirectory - i.e. :
/blog/wp-content/plugins/tantan/badge.js
See http://www.martin-english.com/display_code.php?path=/php/tan tan_flickrBadge.php for my version of the file
In short,
a) no flickr API key
b) used my flickr User Name (not my Flickr login)
once again, thanks for the quick response Joe !!
oops - should have made it clearer:
If the subdirectory you installed wordpress under is called whatsup, replace the references to /blog/wp-content/… with /whatsup/wp-content/…
Joe,
No issues with installation. I simply dropped the folder into the plugins folder and activated the plugin.
The only thing I have noticed is that even though I ask for more than 18 photos to be cached, there are never more than 18 actually cached. I doubled the height of the badge as an experiment, and there were many duplicate photos on the badge, even though I had set 72 photos to be cached.
Thanks for sharing this!
Chase:
You will need to edit line 93 of tantan_flickrBadge.php, which should look something like this:
$html .= ‘Badge.addPhoto(”‘.$photos[$i]['photoSizes ']['Square']['source'].’”, “‘.$photos[$i]['photoUrl'].’”);̵ 7; . “\n”;
More specifically, you’ll need to edit the variable $photos[$i]['photoUrl'] which contains a link to Flickr.com for that particular photo. $photos[$i]['id'] should contain the photo’s ID, and I imagine you should be able to use this variable instead to contruct a link back to the photos on your own site (which is what I did).
Craig:
I’ll look into that bug… it’s very possible that I made a typo somewhere.
Hi Joe, just a quick question. Where in the script(s) can I change a value to make ALL href’s in the badge refer to a static page? Ie. I want them to go to a certain page on MY server instead of going to the view page on flickr’s server. Thnx.
Thank you very much, the plugin is fully working now, it work perfect, but need a little change becaus my blog it´s in a subdirectory, after that everthing ok.
Regards Oceanidas.
Http://www.oceanidas.net/blog Oceanidas Spanish blog about diving. Blog de noticias de buceo.
I downloaded it, installed it as explained and activated it… and… nothing. Nothing showed on my page where I put in the call to the badge. Then, I started mucking around in the code and found that you have two paths in error. In the file ‘tantan_flickrBadge.php’ you need to edit two lines:
In line #51, remove the preceding slash for the path of the CSS import file. New line #51 should read:
“@import url(’wp-content/plugins/tantan/badge.css’);\n 221;.
In line #54, remove the preceding slash for the path of the javascript file. New line #54 should read:
echo “\n”;
With the extra slash in the path, the index file (where all the calls are relationally made from) is in the root of your blog, but retains the trailing slash when using a relative call.
Hi Joe,
I can’t seem to find the cause of this error I get when
clicking on configure.
Fatal error: Cannot redeclare tantan_fbshowbadge() in C:\xampp\htdocs\wordpress\wp-content\plugins\tantan\tantan_f lickrBadge.php on line 37
I’ve tried most of the suggestions above, and I still just get a blank box. Suggestions?
I’ve tried all of the above but am still getting the following error message at my test blog site (http://www.avalon5.com/wptest)
Warning: tantan_phpflickr(HTTP/Request.php): failed to open stream: No such file or directory in c:\home\avalon5\www\wptest\wp-content\plugins\tantan\lib.php Flickr.php on line 71
Fatal error: tantan_phpflickr(): Failed opening required ‘HTTP/Request.php’ (include_path=’.;c:\php4\pear:/PEAR’) in c:\home\avalon5\www\wptest\wp-content\plugins\tantan\lib.php Flickr.php on line 71
Please help - I’m really trying hard to resolve this issue but I can’t see where the problem is.
Sorry - I meant to say that I’m deactivating the plugin for now so that the site displays properly, but if you can advise me on how to fix this I will reactivate and test immediately. Thank you.
Working perfectly on my blog. Have it up in the header and it randomly displays the last 100 photos in a 2×4 grid. Thanks!
Bonjour,
J’ai cette erreur :
Fatal error: Call to undefined function: tantan_fbshowbadge() in /var/www/free.fr/0/7/scoubidou247/wp-content/themes/default/ sidebar.php on line 13
Pouvez-vous m’aider ?
Merci / thank you
OK - figured out that PEAR wasn’t installed on the server, got my webhoster to install it and now I’m getting the following message when I try to enter the OPTIONS screen of the plugin.
Fatal error: Cannot redeclare tantan_fbshowbadge() (previously declared in c:\home\avalon5\www\wptest\wp-content\plugins\tantan\tantan_ flickrBadge.php:39) in c:\home\avalon5\www\wptest\wp-content\plugins\tantan\tantan_ flickrBadge.php on line 38
Any suggestions?
Hi,
I’m trying to install this on my blog, but am getting the error
Warning: Invalid argument supplied for foreach() in /home/activistnuk/public_html/blog/wp-content/plugins/tantan /lib.flickrBadge.php on line 21
I’ve only just started learning PHP, so any help is much appreciated.
After I cleared the cache, mine broke.
Warning: tantan_phpflickr(HTTP/Request.php): failed to open stream: No such file or directory in /home/goldstar/public_html/wp/wp-content/plugins/tantan/lib. phpFlickr.php on line 71
Fatal error: tantan_phpflickr(): Failed opening required ‘HTTP/Request.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php:/usr/ local/share/pear:/home/goldstar/public_html/wp/wp-content/pl ugins/tantan/PEAR’) in /home/goldstar/public_html/wp/wp-content/plugins/tantan/lib. phpFlickr.php on line 71
Any ideas?
Ok, got that fixed. How do I get it to work with FAlbum?
please, how can i get flickr link out of my blog! i made a mistake trying to get the badge and now it is stuck there. i tried many times do delete it, and it is impossible to do it. the link is there in my post files, and it doesn’t go away!!
please, help me out!!!
thanks a lot!
I really like the plugin and the overall implementation (much nicer then the original flash badge), but I went back to regular HTML because of the ugly pizelization that occurs … that really ruins the sleek look.
Is there a setting anywhere that can be used to create and cache higher quality large thumbnails to get rid of the pixelized look?
It doesn’t work for me
I tried everything said here but nothing shows up on the webpage, tried also with the default template but it doesn’t work either. there is just nothing. any idea ? thanks
I made changes according to the instructions of Greg and it WORKED for me. Question for Tan:
why not remove these bugs from the version people like me download every minute…?
Frank
Got it working after a few tweaks to make things validate (never forget the text/javascript or text/css info if you’re big on validating code. I just hope that someday opacity is accepted by the w3c as valid css. If not then oh well. Other than that this is a great plugin
Hello
(I am french)
Error :
Warning: tantan_phpflickr(HTTP/Request.php): failed to open stream: No such file or directory in /var/www/free.fr/0/7/scoubidou247/wp-content/plugins/tantan/ lib.phpFlickr.php on line 71
Fatal error: tantan_phpflickr(): Failed opening required ‘HTTP/Request.php’ (include_path=’/var/www/free.fr/0/7/scoubidou247/inclu de:.’) in /var/www/free.fr/0/7/scoubidou247/wp-content/plugins/tantan/ lib.phpFlickr.php on line 71
Line :
70 //All calls to the API are done via the POST method using the PEAR::HTTP_Request package.
71 require_once “HTTP/Request.php”;
72 $this->req =& new HTTP_Request();
73 $this->req->setMethod(HTTP_REQUEST_METHOD_POST);
Th ank you
Joe,
I just wanted to say thank you!
This is a very nice plug-in,
I appreciate you!
Pet Campbell
Joe,
I’m sure you’re terribly busy, however; I’m trying to integrate your DHTML badge and FAlbum on my site. I have them both set up and working indepentently of each other. I would like as Chase earlier asked to have the badge point to my site rather than flickr. The link to falbum on my site is http://www.radioreject.com/wordpress/wp-content/plugins/falb um/falbum-wp.php. I would like to make this work but, I’m syntax challenged. I saw where you instructed chase but I can’t put it together. Can elaborate more?
Thanks
Joe,
Could you be more specific as to how we go about changing the photo source variable to get it working with Falbum? If you could point out exactly which text to be replaced by what it would really help out. Thanks in advance!
Joe,
Check this post out and see what you think. It’s a great idea for a theme for FAlbum. Since you use FAlbum I thought you may want to see it.
??Flickr DHTML Badge Plugin?0.2
??Flickr DHTML Badge Plugin??0.1????0.2?????????tags????????????
…
How do I get it to work with FAlbum?
I bet ‘ole Joe is just tossing and rolling over all these error comments on this.
I would like to take a moment though to offer my Thanks to you on behalf of everone for by golly making a pretty good effort on this plug-in.
Personally, i like to wait untill most of the basic bug returns have been announced and addressed in comments like these before actually implimenting it to my own layout, but i will keep watch and install myself thereafter.
I really like the idea you used to fashion this.
Thanks
I’ll probably be able to push out some more updates to this plugin in Jan 06, when I have some more free time
Cool, mine works fine, just want it working with FAlbum. :/
I also use the tantan_flickPostBar, when I tried to unzip, it’s asking me if I want to overwrite some files in the \tantan directory. What should I do?
i am not a programmar.
i have tried several things but i cannn’t get it to work.
plz visit my blog or visit this image.
Details:
Theme used:Blix
i have inserted this line in sidebar.php
Pages
do i have to insert it at some other point.
it works wonderfully! thank you!
Something I’ve run across while installing on a friends website is it is not valid xhtml there errors I’m getting regarding it are as follows :
# Error Line 26, column 6: required attribute “type” not specified .
The attribute given above is required for an element that you’ve used, but you have omitted it. For instance, in most HTML and XHTML document types the “type” attribute is required on the “script” element and the “alt” attribute is required for the “img” element.
Typical values for type are type=”text/css” for and type=”text/javascript” for .
?
# Error Line 29, column 86: required attribute “type” not specified .
…e/wp-content/plugins/tantan/badge.js’>
?
# Error Line 30, column 7: required attribute “type” not specified .
I know exactly to where its referring to. But I tried going into the tantan_flickrbadge.php file and fixing it but I’m getting parse errors. Any help would be nice.
Just wanted to let you know I got it figured out here is what I had to do to get it to be valid xhtml.
I had to change some of the lines in the tantan_flickrBadge.php file
line 51:
from: echo “\n” .
to: echo “\n” .
line 55:
from: echo “\n”;
to: echo “\n”;
line 56:
from: echo “\n”.
to: echo “\n”.
Just thought I would let you know how I fixed the problem so if anyone else has this problem or if you want to fix it in the file itself Joe. Thanks for such a great plugin.
Works great with no problems or mucking around! thanks
I am not sure what is going on at all. The table shows up in the sidebar but nothing populates it. Any guidance?
from my source:
@import url(’http://www.jliesch.net/blog/wp-content/plugins/ta ntan/badge.css’);
if (typeof TanTanBadge == ‘function’) {
TanTanBadge.setSize(48);
TanTanBadge.setMargin(1);
TanTa nBadge.setDelay(3000);
}
This is too much work for me. I thought switching to wordpress would make life easier, but half the plugins I’ve tried to install (including this one) don’t work. I would have thought word press would be more newbie friendly, but it isn’t–and neither is this plugin.
I 2nd refter.
I have been using your plugin for sometime now and it has worked wonderfully. I recently changed my theme and now I cannot get the flickr badge to show. I don’t know what you mean when you say the header and footer need to be called in the “appropriate places.” Please help!! I have tried other badge scripts, but none offer as much customization as yours.
Although it took a little tweaking, the plug-in works great. I’m using WP 2.0.2 with the Regulus theme. I pasted the code into the sidebar, right above the “About” line.
My only suggestion is that I wish there was a way to turn off the current transition or to put in options like fades and wipes.
Other than that, it works like a charm
i get this error:
PHP Warning: tantan_phpflickr(HTTP/Request.php): failed to open stream: Operation not permitted in /var/www/vhosts/jonathancifuentes.com/httpdocs/wp-content/pl ugins/tantan/lib.phpFlickr.php on line 74, referer: http://jonathancifuentes.com/
and i installed PEAR…can someone help me on this? thanx a bunch
regards,
jonathan
Hi, I too get the blank div syndrome on one of my installs (the other one works great), ie. I get the “div id=tantanbadge” returned but nothing inside. I would be more than happy to make sure that “wp_header() and wp_footer() are called in the appropriate places” but how do I do that? I found nothing to that effect in the supplied link.
What I have is php get_header(); at the very top of my index.php and php get_footer(); at the very bottom (no blank line aterwards); it looks pretty much as in the default theme’s index.php in that regards.
Any idea would be greatly appreciated. TIA!
Regarding the blank div problem: most likely it’s because your theme’s footer.php doesn’t include wp_footer(). The plugin uses this “hook” to return the thumbnail url’s (so lack thereof returns nothing…). Look up wp_footer() in the codex, I put it right before the closing body tag and it worked. HTH.
I installed this and had it tweaked until a blank box of appropriate size showed up in my sidebar, but couldn’t get any of my flickr photos to appear. Then I tried clearing the cache, and it broke completely. I uninstalled and deleted the plugin files from the server, then reinstalled the plugin, and it’s still broken when I hit the badge tab under Options. Any ideas?
I’m sorry, but the sample page just mashup your theme in firefox browsing.
It’s a great plugin ^_^, I am using it at http://www.kyleofalberta.ca/blog/
Awesome plugin!
Fantastic plugin, thank you!
(My site is under construction, credits for everything is coming, including plugins used of course).
I’ve ran into a small snag, whenever I upload new photos to Flickr, I have to go into wp-admin/flickr-badge and clear cache.
The cache file is chmod’ed 777, any idea why this is happening?
Why isn’t my Flickr badge appearing? Only the 150px x 250px dimensions I have defined are visible.
http://www.kyleofalberta.ca/blog/
A suggestion would be to able to be able to choose an album or random photo from an account, rather than just recent photos.
Great Plugin. I have a thing about being XHTML 1.0 compliant, and the only thing I had to do for this plugin was edit the file “tantan_flickrBadge.php”
I inserted:
type=’text/css’
after it said:
style
and then I inserted:
type=’text/javascript’
after the 3 instances of:
script
Would you mind altering the download file to reflect these changes?
thanks
thank you joe!
i got problems with the plugin, the fild where it should shown was empty. after a abollte of wine i`ve deleted the tags and now… i love it! perhaps you`ll have a look
i can’t see my badge? using the api, i have friends and family (private) photo sets only… will this not work with private photos?
I have read every single post on this page, and yet I cannot get the plugin to work. All I see is a blank div. I have the wp_header and wp_footer calls in the exact places as the default template has them.
I’ve been working on this for hours … help???
Hi! Very nice site! Thanks you very much! gVmAwBrouTI
hi, thanks for your plugin, am going to give it a 2nd attempted install (adsense theme); tried using widgetize anything plugin with this (required to take off
hiebzjynf
Thsnks for instruction how install this plugin.
DUDE CAN U HELP ME OUT W/ MY PAGE?!?..I CANT VIEW MY BACKGROUND , GRAPHICS , MUSIK VIDS THAT STUFF..BUT MY FRIENDS CAN SEE IT WHEN THERE VIEWNG MY PAGE AND I CANT T_T PLZZ HELP ME OUT BR0O!…
Hi! After updating Wordpress to 2.3.3 the Badge doesn’t work anymore. Any Idea? I love this Plugin, hope I don’t have to deaktivate …
I Like the look of those Flickr badges running on a lot of sites. I don’t like that it uses Flash though so imagine my delight when I came across the WordPress Flickr DHTML Badge Plugin. It’s easy to install and configure, and only needs one line added to your sidebar.php to activate!
I’m already running it on In Photos and it’s great!
And in case that’s not enough, here’s some more Flickr goodness!
I like this website. This website helped me with prayer learning. Good job. Thank you. Please provide more French prayers. Bye-bye.o
Leave a comment