Create Flickr Photo Thumbnails for Your Site (PHP)

This simple PHP script allows you to create Flickr photo previews out of Flickr.com for your webpage or blog. The script directly takes advantage of Flickr's feed service while my Python script shows an example of using various Flickr API methods. The script creates a Flickr badge from your public photos or those of a given user only. To see all available feeds and options, check Flickr's feed service page, or check my Python version to see an example of using Flickr API methods.

How to display Flickr photos at my website or blog

Step 1.
Download FlickrBadge.zip (PHP and Ajax script files)

Step 2.
Open the flickr_badge.php file and change some values based on your Flickr account and the default values for options.

/***********************************************************************
	Modify the following information as you need
 ***********************************************************************/
// Flickr User ID
$user_id = "55254946@N00";

// Number of photos to be displayed per page
$per_page = "6";  

// Photo size
//    s - Small square 75x75
//    t - Thumbnail with 100px width
//    m - Thumbnail with 240px width
//  num - Define a square size that is less than the size of 75x75 square (e.g. 50) 		 
$photo_size = "50";    		 

// CSS class for the Badge container 
$badge_css = "flickr_badge";

// CSS class for image tags 
$image_css = "flickr_photo";

// CSS class for hyper links for images
$link_css = "img_link";

// CSS class for texts
$text_css = "";

// Use of Lightbox
//   false - Do not use
//    true - Use
// For this, the path to Lightbox javascripts must be properly included inside <head> tags
// (For download and installation of Lightbox://www.huddletogether.com/projects/lightbox2/)
$lightbox = true;		
/***********************************************************************/

Step 3-1.
You can choose either one of two methods to finish it up. Simply include the inline PHP code on your webpage as shown below. This method is much simpler and faster than Step 3-2 using Javascript.

<? php include("flickr_badge.php"); ?>

Step 3-2.
If you choose to use Ajax, open another file, loading.js, included in the zipped file you downloaded. At the bottom of the javascript file, inside the loadData() function, you need to change the two parameters of getData() function calls as shown below. The first parameter is the url of the flickr_badge.php script file, and the second parameter is the IDs of DIV tags in your webpage where flickr photos will be displayed.

getData('http://yourhome.com/flickr_badge.php','my_photo');

In your HTML webpage, put the following code between <head> and </head> tags.

Then, put the below code inside <body> tag. A <div> region is the place where flickr photos will be displayed on page loading, so you may want to add CSS styles to it. When you change the ID of a DIV tag, make sure you change the corresponding parameter of getData() function call inside loading.js, as explained in Step 6.

<div id="my_photo"></div>
<script type="text/javascript">loadData();</script>

You're done.
Example

Blue MoJo의 업로드

Also check the Python version.
Leave a comment or question on the blog entry for this script.