Tutorial #21
Embed an Image from Flickr Basic   2013-11-15


Flickr is on of the leading photo sharing sites where anyone can upload, organize and share their images. This tutorial shows you how to embed Flickr images in your page. It is very simple and very useful.

With Flickr you should pay close attention to the Copyright restrictions on any image that you want to use. Not all images allow embedding and even if they do, it does not mean that the image is copyright free.

One section of Flickr is called The Commons and this contains images from public photography archives that have no known copyright restrictions.

This example is from the 1920s and comes from the State Library and Archives of Florida

Demo 1 screenshot for this tutorial

Step by Step

1: Go to Flickr and find the image that you want to embed. Click on the share icon.

Image 1 for this tutorial

2: Select Grab the HTML/BBCode. In the dialog box, choose the size of image that you want to embed and then copy the embed code block to your web page. That is all there is to it.

Image 2 for this tutorial

Understanding the Code

The code is simply a link to the image wrapped in a a tag that will link back to the image and its metadata on the Flickr site.

You could remove that tag pair, but you should always include some attribution for any content that you did not create yourself. Keeping the link here allows the user to not only see where it came from but also to explore Flickr for other images that might be related to it.

Let me stress once again, just because an image on Flickr can be embedded on our page ti does not mean that it is copyright-free. Always check the copyright statement on the Flickr page.

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus