Display Flickr Photo with Notes

What is this?

In Flickr, we can add notes on a photo to explan details of it. This scriptlet can display not only your flickr photo in your web pages or blog articles, but also the notes you made on it. In other words, you can embed a flickr photo with its notes in your own website.

Let us see an example.

Usage:

Include the following script in your HTML. First of all, you need to know the photo_id of the flickr photo you want to show. In this case, the photo_id is "23187093".

....... HTML body .......
<script src="http://webdev.yuan.cc/flickr/flickrnotes.php?photoid=23187093"></script>
<noscript><img src="http://static.flickr.com/43/86107713_5910b42df2.jpg" /></noscript>
....... HTML body .......

Following is the sample CSS style. It can let you control the looking appearance to fit your blog. The class '.photo_box' is the style of outer box containing the photo.

<style>
.photo_box {
    margin:0px;
    padding:5px;
    border:1px solid #ccddee;
    width:480px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    background:#cde;
}
</style>

Helper:

For easier to get the script code, I hereby provide a bookmarklet to generate the script codes automatically. Install the following bookmarklet. When you visit the flickr photo page, just hit the bookmarklet to get the code.

Bookmarklet: PhotoNotes
(Firefox: Drag to your bookmarks toolbar; IE: Right click and add to favorites)

Source Code:

The backend program is a PHP script. You can freely download and modify it under GPL.
Download: flickrnotes.tgz


I am devoted to web programming for personal interests and run all services at home via DSL connection. If you like my work, you can donate to help me with the bills.