SEO Blog

Adding images to your blog posts with Flickr

In blogging on October 28, 2007 at 1:17 pm
Hi, welcome to my blog, please consider subscribing

Some of you might have heard of a website named Flickr. I like flickr its a cool little place to share your photos or store them online, anyhow…did you know that you can also access these pictures and add them to your blog posts?

The code below will show all images that have been tagged sunny

<p id=”flickr_badge_wrapper” align=”center”>
<script src=”http://www.flickr.com/badge_code_v2.gne?count=5&
display=latest&size=s&layout=h&source=all_tag&tag=sunny” type=”text/javascript”></script></p>

This how it looks when outputted to the blogpost 5 small horizontal images.

You can specify,horizontal,vertical by picture size and number too.

Here is the same keyword but larger and with only one image specified.

All you need to do is play with the variables size=s gives you small size=m gives you medium and size=l gives you large. Count specifies the number eg count=4 would show 4 images.

The downside is that it’s a little random, but if you want to show images from people who have ok’ed public distribution then it’s a handy little way of adding an extra dimension to your blog posts or pages.

Ifyou you’d like the images to look like those above then you’ll need to add the code below  to your stylesheet or head of your post but do make sure to include the <style></style> tags if going via the head option.

#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}

Tell others:
  • del.icio.us
  • Fark
  • Furl
  • digg
  • Reddit
  • Slashdot
  • Technorati
  • YahooMyWeb
  • Digg
  • Facebook
  • LinkedIn
  • Pownce
  • Sphinn
  • StumbleUpon
  • TwitThis
  1. Wow, cool! Bookmarked this page. Random way of adding images, true, but very cool.

  2. Hi Adam, glad you like it, simple but effective. Until they withdraw the service that is!

  3. Excellent post, I learned a few things; thank you!
    I also recommend picasa, you can blog pictures and embed a slideshow. The reason I recommend them is I found out the hard way that you can only have 200 pictures on flickr for free, any more and you have to pay for the service.

All comments are screened for appropriateness. Commenting is a privilege, not a right. Good comments will be cherished, bad comments will be deleted.