Embedding Flickr photos with php

I know I’ve mentioned this sort of thing before, but I think that embedding your (or others) flickr photos on your own site is pretty nifty. I have recently used php to pull in images display them full size in a ‘lightbox’ this was done on a site called Smart City Art. Each photo that is uploaded to flickr is tagged with a specific tag that the php code will sort accordingly. Once the large lightbox photo has loaded it can then be clicked and added to an enquiry form or shopping cart.

Embedding Flickr photos with php Social Photo

I also decided to pull in my own photos on my media page, but instead of using a lightbox to view them I have just linked to the flickr page to allow comments. This set of photos is based on ‘interestingness’ and is automatically updated depending on how often a photo is viewed or made a favorite in flickr – there is in fact a whole flickr algorithm used to help a robot decide what makes a photo interesting!

View thumbnail embeds on Mackney.com

In all my experiments with different code; PHP, ASP and RSS feeds I have found issues with the easy use of the flickr API model. I found that there are many sites using the API to great effect but it can also easily be used for abuse.

For example, I do not allow the downloading of my large photos on flickr and by going to flickr, the biggest image you will ever see is 500 pixels in width. However, by using a simple site such as Big Huge Labs anyone can insert my photo ID and get a larger version! …

Click to see one of my photos LARGE: http://bighugelabs.com/onblack.php?id=3499042578&posted=1&size=large

I actually find that useful and personally use it when I want viewers to view MY image ‘Large on Black‘ and paste this link in the description. However, it could obviously be used to steal larger images that a flickr users may think are hidden.

I personally only upload photos to flickr using their uploader tool and set it to resize before upload, ensuring that whatever happens, flickr never holds my images at full size resolution.

If you are concerned you can opt out of Big Huge Labs here

flickr themselves provide many tools to make it easy to embed your work (or other peoples) into your site. Here is a slideshow provided by flickr and it is searching for keywords ‘beach’ in everyone’s public photo’s.

Click here: http://www.flickr.com/search/show/?q=beach (full screen slideshow)

It’s simple to embed this into an iframe …

http://www.flickr.com/search/show/?q=beach Please note, I have no control on what is displayed above!

There are also professional companies offering free and paid for software to create some amazing flickr viewers. Tiltviewer is a very popular flickr slide show viewer and it is very easy to view any public flickr image using keywords … http://www.simpleviewer.net/tiltviewer/app/?tags=beach

Below I have embeded MY images in the free viewer using the keyword ‘beach’ …

http://www.airtightinteractive.com/projects/tiltviewer/app/?user_id=37866891@N07&tags=beach

I also purchased a version for use on Smart City Art – View it fullscreen.

Sometimes you need to find the ID for your account to use these services. The easiest way to do this is to use http://idgettr.com/

Below is a badge direct from flickr, they allow you to display your own images or images from a group or keyword of any public image. The badge below uses the keyword ‘beach’ and is searching all public photos tagged with that word. I do not have control over what public image is displayed below unless I choose an obscure keyword! …

What is this?’);
}
zg_toggleWhat = function() {
document.getElementById(‘zg_whatdiv’).style.display = (document.getElementById(‘zg_whatdiv’).style.display != ‘none’) ? ‘none’ : ‘block’;
document.getElementById(‘zg_whatlink’).style.display = (document.getElementById(‘zg_whatdiv’).style.display != ‘none’) ? ‘none’ : ‘block’;
return false;
}
// –>

www.flickr.com

This is a Flickr badge showing public items from Flickr tagged with beach. Make your own badge here.

(Update, the flickr badge script does not currently work on Posterous)

The Moral of the Story:

  1. Don’t upload your photo’s to the internet if you don’t want them coppied, there will always be a way to copy them.
  2. Don’t upload high res to flickr.
  3. If you do not want any API based services to use your images you need to OPT OUT – This is not very well known, the link is http://www.flickr.com/account/prefs/apioptout/
  4. This is not new, API issues with flickr have been going on for a long time … see this photo
  5. Enjoy the flickr community and use it as it should be used – I do and I love it.

About Richard Mackney

Sharer of thoughts and Photography from an iPhone while touring the UK in a Caravan and drinking Beer. Co-creator of @fishmedia and two small fry.