Setting up WordPress blogs on Flickr properly

Flickr allows you to connect your WordPress blog, which allows you to use a Flickr photo to illustrate a blog posting by pressing a button.

(I always use this in conjunction with Donncha Ó Caoimh’s “Blog This To Draft” to prevent it from getting published immediately.)

However, Flickr’s standard WordPress code isn’t very good. It encapsulates the whole thing in <div>s, which means that WordPress cannot work out that it’s an image, which leads to all sorts of problems when you’re trying to pull out the first chunk of text from a posting, for instance in an RSS feed.

However, if you know what you’re doing, it’s quite easy to change. You need to go to your Flickr settings, and then click on the “Sharing & Extending” tab.

You should now see your blog (if it isn’t there, add it by clicking on “More sites” and following the instructions).

Now click on the “edit” button next to the name of your blog, and click on “select a blog layout”.

Now pick one of the layouts by clicking on it, and then choose “customize”.

This should display some HTML code such as this (I’ve added some white-space):

<div style="float: right; width: 240px;
    margin: 0 0 10px 10px; padding: 0;
    font-size: 0.8em; line-height: 1.6em;">
  <a href="{photo_url}" title="{photo_title}">
    <img src="{photo_src_m}" alt="{photo_title}
      by {uploader_name}" />
  </a><br/>
  <span style="margin: 0;">
    <a href="{photo_url}">{photo_title}</a>,
    a photo by <a href="{uploader_profile}">
      {uploader_name}</a>
    on Flickr.
  </span>
</div>{description}
<br clear="all" />

Now change it to use WordPress’s [caption] syntax, e.g.:

[caption align="alignright" width="240px"]
  <a href="{photo_url}">
    <img src="{photo_src_m}" alt="{photo_title}"
      width="240px" class="size-thumbnail" />
  </a>
  <a href="{photo_url}">{photo_title}</a>,
  a photo by
  <a href="{uploader_profile}">{uploader_name}</a>
  on Flickr.
[/caption]{description}

Now click “preview”. This will look dreadful, because this is WordPress code, not HTML, but just click on “save this layout” anyway.

You should now be able to use the “share” button on Flickr to generate pretty WordPress posts.