How to show Flickr Images on your personal photo gallery

Although this is a semi-technical post, all you non-techies who have a personal Homepage can still be benefited from this.

Here, I have guided you through few steps to embed your Flickr images to a personal photo gallery on your homepage.

Requirements

  • A personal homepage which is hosted on a web-server supporting PHP/ Remote Images Hot-linking (most Free hosting doesn’t support this)
  • A Flickr Account
  • A desire to have a photo gallery on your homepage

What do I get from this…?

You can save storage space on your web-hosting by hosting the Images on Flickr. Managing Image Uploads is simple, since it is done one-time on the Flickr, your personal Homepage picks up from there dynamically.

Alternatives

There are many ways of doing this. Flogr and FlickrViewer are good examples. But, these are pretty complicated and an overkill for what we need. So, I decided to make it myself.

Disclaimer

Well.. by profession, I am a mobile application developer, and nowhere near to web-technologies. But as a hobby, I do some stuff in JavaScript and PHP. So in case, I say something stupid, forgive me… 😉

Step 1:

  • Download LightBox (this will be used to display the gallery images in an animated fashion)
  • Extract it to a folder, say “photos”
  • Download this text file and rename it to flickr.php and save it in the “photos” folder. You are welcome to optimize this php script further.

Step 2:

Step 3:

Upload the “photos” folder into you webpage through ftp/online file-manager.. what ever your hosting provider supports. If your webpage is http://www.example.com after uploading the photos folder, your photos page will be http://www.example.com/photos

Step 4:

Creating a link to your personal Flickr Gallery/Photo album (whatever you might want to call). You can use this link anywhere on the web (mostly on your Homepage). It will take the visitor to your Image Gallery.

flickr.php takes 3 arguments

1. user_name

The name which you want to display on top of the page as a Title.

2. user_id

This the ID which Flickr assigns to you when you open the account. If you know your Flickr user name (which I assume you will), you can fetch the ID from this link here

3. api_key

this the api-key that you would have generated in Step 2.

Example:

The final link would look something like this

http://example.com/photos/flickr.php?user_name=Sunil&user_id=47379418@N02&api_key=33197b5a6fcc629b4f4ee5011654986f

Click Here for a working example.

Thats it.. your personal Image gallery is ready. Every time someone visits this gallery page, all the public images uploaded to your Flickr account is picked up dynamically and displayed as a gallery.

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: