Sunday, September 7, 2008

Blogging Flickr photos (part 2)

The other day, I explained how to use Flickr's Blog This button. But unless I have a single photo to blog, and I don't want to add any links or formatting, I don't usually use Flickr's otherwise helpful "Blog This" button to blog about my photographs (or include photographs in my blog).

Blogger's Insert Images button, which you can find in the top part of the text box where you write your post is an easy way to add images to your blog.

Blogger's Insert Image button

To get started, click the Insert Images button. Your first task is to choose which image you want to insert. You can choose one from your computer by clicking on the Browse button or you can copy the URL of a photo out on the Web, for example, from Flickr.

Selecting an image from your computer is a simple way to get an image into your Blogger blog, but it has a couple of disadvantages. First, and foremost for me is that once you upload the image, it is somewhere on Blogger's servers. You can't edit, label, or tag the image, you can only replace it with another. And it's not easy to link to it from somewhere else, unless you upload it again following this same process. Still, if you don't have a Flickr account (or similar) to host your images, this is probably the easiest way to get them in your Blogger posts.

I do have a Flickr account though, so I want to enter the URL of my photo. Where do I find that URL?

First, view the image in Flickr. That URL up in the address bar will not do the trick unfortunately. (See how there's no ".jpg" extension at the end?)

Blog Flickr finding the URL

Next, click the "All Sizes" button, just above the image.

Flickr's All Sizes button

Which size should you use? The answer depends on how big you want the image to be in your blog post. Blogger will let you choose a display size of Small (200 pixels wide), Medium (320 pixels wide), or Large (400 pixels wide) and then will automatically resize your Flickr image accordingly. But since large images take longer to load than small ones (regardless of the size that you display them at), you want to choose the size that is larger than but as close as possible to the final display size. If you choose a Flickr size that is much smaller than the eventual display size, Blogger will increase its size automatically, and though it will load faster, it will end up pixelated and/or blurry.

Once you've chosen the optimum size (I usually choose Medium), scroll down below the image and copy the URL next to option 2:

Blogger Flickr get URL

Then paste the URL in the Upload Images box back in Blogger:
Blogger: Upload Images

Choose whether to flow the text around the image and on what side and choose whether the final display size should be Small (200 pixels wide), Medium (320 pixels wide), or Large (400 pixels wide).

Click Upload Image (which is a misnomer here since Blogger does not upload the image, but rather creates a link to the image that is already uploaded at Flickr).

The image is added to your blog post.

The advantage to using Blogger's Insert Images button is that it helps you size the image and flow the text around it without having to mess with the code.

You can, however, mess with the code if you're so inclined :)

Suppose you want more options than just Small, Medium or Large?

Once you've followed the steps above to add your image, click the Edit Html tab above the post box:

Blogger's Edit HTML tab

You'll see all the code that Blogger created for you in order to display your image at a particular size (and flow text around it). Slog through it until you see the Width information.

Blogger's code for displaying images

You can change that width to any number you like--in pixels.

Blogger change width of images

Remember to choose a display size that matches the Flickr size you chose as closely as possible.

You can find Part 1 of this article, where I talk about Flickr's Blog This button, here. My preferred way to insert Flickr images into Blogger posts is described in part 3 of this article. In part 4, I'll show you how to wrap text around images inserted this way.


  1. hi, need help please...trying to develop my birding blog and want to add a slide show like ? please come back to me on



  2. Piece of cake... go to Blogger, and click Layout for your blog.

    Then choose 'Add a Gadget'. You'll get a window with a selection of cool things... one of them is Slideshow. You can add slideshows from Flickr photos, Picasa Web Albums, Photobucket, and others (by specifying the feed).

    You can also drag it around to different places on your blog.

    Hope that helps,

  3. Thanks a million! I've been wondering why my flicker pics table that I created wasnt showing the pics. It was just a bunch of white spaces. Thanks soo much

  4. This method, as you explain it, is against Flickr community guidelines.

    The text directly under the Option 2 box that provides a direct link reads "Remember! Flickr Community Guidelines specify that if you post a Flickr photo on an external website, the photo must link back to its photo page. (So, use Option 1.)"

    If you use that option 2 link, it will link directly to the photo, and not to Flickr.

  5. @Marina
    Yes, Facebook asks that you link all your photos back to Flickr. At the same time, they have made this page, and in particular Option 2, available. They say, "To link to this photo on other websites, you can either:" and then they show you two options. It seems at best contradictory and at the least absurd to then say, "use Option 1". If that's how they feel, why do they even show you Option 2??

    At any rate, this isn't by any stretch my recommended technique. I much prefer the methods that do link back to Flickr. See here and here.

  6. This may sound really dumb -- but did you use the same steps to embed your slideshow -- I thought you had to use a gadget to do that?
    Confused -- cheers Charles.

  7. @Charles. Yes, the slideshow in the sidebar is the Blogger Slideshow gadget. Funny, I'm writing a new post all about it, should be up soon.

  8. thanks for your information

  9. This is great, thanks very much! I have been struggling to find the right link on Flickr!

  10. Hi Liz,

    Do you know why pictures become darker when they're uploaded from the computer to Blogger? I've noticed that the pictures were much clearer when I was viewing them in my PC (through Windows Picture and Fax Viewer), but they became darker, and somewhat blurry when I uploaded them to Blogger.

    Your answer will be greatly appreciated.

    Thanks so much and have a wonderful day!

    Lots of love,

  11. Thank you so much for the detailed description! You're a true lifesaver, Liz!

  12. hey liz! thx heaps for this post! your solution worked perfectly, i can now post from flickr to my blog. many thanks

  13. Flickr has made some changes... One can simply go to the photo page in flickr, click on "Grab the HTML/BBCode", copy and paste the code in blogger

  14. A really helpful article, thank you!

  15. Thank you so much for the simple and quick instructions! You rock!


More of my books