Working with Flickr
I’m trying to do two online courses right now, The Program for Online Teaching and DS106. We are talking about images in both classes now, so I thought I’d blog about Flickr this week and share it with both courses.
This is a tutorial style post. (That means it’s long) In the first part I’ll talk about Flickr annotation notes. In the second part I’ll describe several ways to get attributions for Flickr images for your blogs and presentations.
By the way, all the screen shots in this article were done with a program called picpick (for Windows). It’s a screenshot program with many handy features. It’s a lot like the new Windows snipping tool, but I like some of the extras in picpick. You can find it at http://www.picpick.org/
Some cool things you can do with Flickr
You can put notes or annotations on Flickr pictures. Select Actions over the image and click Add a note from the drop down menu. A note widget appears, and you can move it and re-size it and add text. See the screenshot below. Notice that there are some other annotations on the picture already. You can annotate your own pictures or pictures from others. It’s handy if you want to comment on a specific area of the picture. (Of course it won’t work on this screenshot, go to http://www.flickr.com/photos/wwnorm/6670374653/in/photostream to see it on Flickr)
You won’t see the annotations if you download the picture and try to add it to your blog. The Mbedr utility can create an embed code that you can use in your blog to capture the picture with its annotations. You simply take the Flickr picture number from the Flickr URL (6670374653 in the example above) and paste in into the Mbedr site. It gives you back the embed code to put in your blog. (Actually it gives you two codes, an object code and an iframe code. Pick the one that works for you. I found that the iframe code worked better in my experiments)
Here’s the embedded Flickr – move the pointer into the image to see the annotations.
You can even put links in the annotation notes. See Ted’s post here for a good example.
On the Mbedr site, don’t be alarmed by the warning that Mbedr doesn’t work for wordpress.com blogs. That only applies to blogs hosted at wordpress.com. If you have a real WordPress blog with your own domain you should be okay.
Adding images to your blog
It’s widely agreed that pictures and illustrations can greatly improve the impact of a blog post. The same can be said for presentations or printed reports. Some art work on the page breaks up the text and adds some visual appeal and gives your readers’ eyes a place to rest while they ponder your great writing. These graphics can take the form of photographs, pictures made with digital paint programs, scanned images or even screen shots.
In a perfect world, we would all create our own artwork for our blogs and presentations, but in reality we don’t all have the talent, time or skill to do so. Luckily, the internet is full of images, and some of them are available for us to use.
Not all of them though. Some works are copyrighted, and some copyright holders will work hard to make trouble for you if you use their work without permission. We learned about Creative Commons earlier, so we know there are people who have made work available that we can use. In most cases all we need to do is give some attribution usually just by providing the name of the artist or a link back to the source.
There are many online sources of images, and I’ll provide some links at the end of this article. Of course, the most well-known site is Flickr. Every picture page on Flickr includes the owners licensing terms. Flickr’s advanced search lets you limit your searches to images which carry a Creative Commons license. Once you find a picture you like, you can create a citation to go with the picture.
Example – Suppose we want to use the picture we found on this Flickr page.
Flickr image credit: jennicatpink
The attribution can go under the picture or you can put all the image citations in a special section of your post, perhaps at the end. It’s a nice idea to make each attribution link back to the original Flickr page like I did here.
Some tools to help With Flickr attributions
I’ve been trying a few tools to simplify the attribution process. Each of these works with Flickr only.
This is a WordPress plugin you can find at
Once it’s installed it works like this –
Just above is a screenshot in my WordPress editor. I’ve just started a new post. Notice the iFlickr sidebar. I’ve entered the search word “owl” and it shows me a few selections. I can use the arrows to scroll through more. When I find one I like I click it.
A popup appears that lets me select the image size I want and a few other things. When ready, I click on insert image. Viola – the image is inserted along with a linked attribution.
Here’s how it looks in the published blog post –
Flickr image credit:: Ross Elliott
iFlickr is great for WordPress, though it’s a little slow when scrolling through a lot of pictures, and you can only see three thumbnails at a time.
To use this plugin, you need to get a Flickr API ID. Its easy enough if you have a Flickr account. Go to http://www.flickr.com/services/apps/create/apply and select the option to apply for a non-commercial key. You’ll be asked to name your app (I gave the name of my blog) and What you are building ( I just said I was setting up iFLickr). Check a couple of acknowledgements (Agree to terms, etc.) and you’ll get the key you need. Save all this info somewhere. You’ll need the key when you install IFlickr.
I didn’t find iFlickr available directly in WordPress, so I downloaded it to my computer and then uploaded to my WordPress host using FTP. If you need some help with that, just speak up.
Another utility is ImageCodr. Just paste the Flickr URL into the ImageCodr site and it gives you back an embed code for the image and attribution. There’s a bookmarklet for it that makes it more convenient.
Here’s an image and attribution using ImageCodr –
Flickr CC Attribution Helper
I saved the best one for last.
If you don’t use WordPress, or you need attributions for other purposes, you might want to try the Flickr CC Attribution Helper by CogDog (Alan Levine). It’s a browser plugin that kicks in whenever you are looking at a Flickr image page that has a Creative Commons License. The nice thing about this – once it’s installed everything happens right on the Flickr page and you don’t have go to another site to get the codes.
Look at this screenshot below –
The CC Attribution Helper provides text and HTML attributions. You can copy and paste the text attribution into your presentation or report. If you can’t read it in the screenshot, it looks like this:
cc licensed ( BY NC SD ) flickr photo by atubbs: http://flickr.com/photos/atubbs/5216059123/
Thanks CogDog. It’s a really useful script.
As promised, here are a few more links that might be of Interest –
Finding, and correctly attributing, images -A fairly recent article with some more good ideas.
A Complete Guide to Finding and Using Incredible Flickr Images – Some good tips and a review of Creative Commons licenses
The Best Online Sources For Images – There’s lots of image sources listed in this article.
Do you know some other good image sources, or some other Flickr tricks? Let us know in the comments.
Wow, this post took much longer to put together than I expected. Maybe next time I’ll try a video tutorial.
That’s my story.
Are there any questions?