A Flickr Badge Hack

Warning: This is a bit geeky.

I’ve always liked the idea of having rotating images on a web pages, so everytime a user refreshs the page, the look and feel changes slightly. But the only way i knew before was to write a javascript to rotate through a list of image names. It gets old after a while. I thought of crawling all the known image directories on my site and then collect the existing image path, then there is the question of non-uniformed size of each image. A webpage looks nice with a horizontal photo might not look as nice with a vertical one. Certainly there are scripts out there to resize the images to the desired size. Then there is also the possibility of storing your image file path in a db and just look it up there. Both seemed lots of work and maintenance.

For example, i liked the little image on the upper right corner on this site. It is a finite number of images that author scanned and nicely cropped for this use alone. But it is a limit number of choices, and it requires lots of work to create those images to fit that location.

V A G A B O N D I N G

Anyway, all these possibilities went through my head before there is flickr.

Now there is the “badge” concept created by flickr. Most people place their flickr badge on the side of their blog, and let it go on rotating and even flashing on by itself. It didn’t occure to me to use flickr badge to do what i always wanted until i saw Jason Goldman’s blog yesterday. He used the flickr photo badge to decorate his otherwise plain template.

So i emulated how Jason Goldman used the flickr script and modified the look of my Chinese blog. After some twicking of the layout, I was happy to call it finished. When i showed it to ZM, he liked it too, but the first thing he did was mouseover the image, and then the amazing thing was the title of the image was shown as the mouse move from image to image! I loved it so much that i went in my flickr and batch edited all my image title to make them meaningful. Lots of them are in Chinese. Then the trouble came.

Flickr’s badge generation javascript assumes everyone’s webpage is in UTF-8 encoding.

Mine wasn’t.


When i started setting up my Chinese blog, i didn’t really understand the world of encoding that well. At the time, all the Chinese pages i’ve ever seen were in “gb2312.” I figured out how to setup mine (using MT at the time) that way. Later when i switched to WordPress, i should’ve known better and taken the opportunity to convert everything into UTF-8. But by then i’ve accumulated so many articles in gb2312, i got lazy and was worried i might mess things up. So i ended up in gb2312 again.

Flickr, like all the other cutting edge websites(e.g. Google), uses UTF-8. So it could support multiple language on the same page. What Flickr badge generation script did was to assume the rest of the world is as clean and cutting edge as Flickr itself. It would have been an easy fix if i can access Flickr’s source code (time for Flickr to be open source, maybe?). All it needs to do is check the http header in the http request, identify the requesting page’s language setting, and return the image’s title in the correct format. Encoding conversion is easy to do on the server side.

But what was I to do now? I could file a bug on Flickr help and then wait. Except i can’t bear the ugly messed up encoding everytime i move my mouse over the image on the header.

So i set out to fix it from my side.

First i tried to insert an iframe on my gb2312 blog page, set the iframe’s source to another html that has encoding of utf-8, placed the Flickr badge on that utf-8 page. It works well with IE, but not with Firefox. 🙁

Then I started looking for something similar to php’s iconv on javascript. Since iconv in php has been so easy to use, i assumed it is a no brainer. But after googling around for 20 minutes and not finding anything useful, i started to realize it is not as easy as i thought.

Encoding conversion requires access to a huge amount of character resources, which are not available from client side. Sure i can try AJAX, but just for an image title, it seemed a little overkill. I might as well try to do this from server side. (actually i havn’t used AJAX, but i have a little project in mind so i can learn it. That’s another story.)

So my final solution is a relatively simple one.

I took the one-liner javascript from Flickr badge generator, executed on the server side using curl, took the returned value, converted from utf-8 to gb2312 using iconv, and then write it out to the page. It worked beautifully, on both IE and Firefox.

-php function that execute curl and return the http response (a very useful common function that can be used in many places, e.g. to fix douban.com’s badge for books/music/movies.)


function getResponse($post_url) {

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $post_url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    // Execute the http request.
    $response = curl_exec($ch);
        
    if (curl_errno($ch)) {
      echo curl_error($ch);
    } else {
        curl_close($ch);
    }

    // Return the response to the page
    return $response;
}

-php snippet that i placed on my header template:


<?php

// Send the request and receive a response
$querystring = <place your flickr javacript url here>;

$transmit_response = SendRequest($querystring);

$tempstr = iconv("utf-8", "gb2312", $transmit_response);
print ("<script language="JavaScript">".$tempstr."</script>");

?>

*Update: dotann just told me that changing the entire blog from gb to utf-8 is a matter of setting a configuration in mysql. Much easier than this hack. Now think about it. even AJAX might not be that bad. But i guess i just want to see if this kind of conversion can be done. 🙂