Wednesday, April 15, 2009

How to use Flickr images in a blog, how to find and use HTML scripts to place Flickr photos or videos in your blog

So you want to know how to find and use HTML scripts to place Flickr images in your blog?

First you create a Flickr account, either the free or paid account.

Then either email your image to your Flickr account, or upload your image to your account any of 10 ways. For this article I am assuming you already have posted one or many images or photos you want to use on your blog to your Flickr account.

Then, here's the magic part! Flickr provides the script to post your image to any website including your own! Since Flickr is worldwide and uses Flash to display the image, it should display much faster than if it is on a local server in Paro, or Thailand or wherever even in the US, because they use Akamai servers which are all over the world.

Where is the script? When you are at your Flickr site looking at the image you wish to use click on the item "ALL SIZES" at the top of the image.

From there choose the size you want to use, such as "MEDIUM". From the MEDIUM scroll down and you will see the text in pink :

To link to this photo on other websites you can either:

1. Copy and paste this HTML into your webpage:
(And the HTML script is right there within the little box.) Copy the script and embed it into any HTML, and when connected to the Web the image will appear!
For example:
<a href="http://www.flickr.com/photos/wonderlane/3444186962/" title="Cat - Cute peed on bed by Steve D, on Flickr" > <img src="http://farm4.static.flickr.com/3593/3444186962_5651ea1920.jpg" width="500" height="300" alt="Cat - Cute peed on bed" /> </a>

A note - the other choice:
2. Grab the photo's URL:
"http://farm4.static.flickr.com/3593/3444186962_5651ea1920.jpg"
Is an "absolute reference" to a specific location on Flickrs servers - I have not found to be as reliable as the other method for some reasons.

Now for the next to last part of this lesson - you can edit the HTML because it is just TEXT! You can edit it so that it doesn't hurl the end users browser back to Flickr, but to any place you choose, or is not a hot link at all. For example:
<a href="http://www.papayayoga.com/" title="Cat - Cute peed on bed by Steve D on Papayayoga's Website" > <img src="http://farm4.static.flickr.com/3593/3444186962_5651ea1920.jpg" width="500" height="300" alt="Cat - Cute peed on bed" /> </a>

This script can be posted directly into your blog and it should display a cartoon by Steve D, and link to the Papayayoga Website...

The last part of this lesson is that you should be able to pick up the script for any image from just as I described, because all of the images on my Flickr site (http://www.flickr.com/photos/wonderlane/) are listed as Creative Commons, and thus the script to embed images or video for all of them is public.

The next lesson is How to Improve Search results also called SEO (Search Engine Optimization).

Let me know if you need any help with this because when one knows something one tends to forget to point out little details that the other person may not be equipted to figure out on their own...
Cheers!

By the way to display the code in this blog post I used the Code and Pre tags in HTML, and Note that you must URL encode "<" to the tag equalvant & l t ; and ">" to & g t ; (without the spaces). See how the font changed too? This indicates it is inside the code and pre tags. (How it appears depends on the CSS in use.)
Here's the result -- Cat - Cute peed on bed

No comments: