Design & Development

How to Embed Photos and Slideshows from Picasa, Flickr and Photobucket

Photographs enhance an ecommerce site. Photos can feature products, customers or even a company’s staff. Photos can personalize a site and increase ecommerce sales.

But, depending on a merchant’s ecommerce platform, photos can be tricky to upload and limited in their location, quantity and size. To overcome these limitations, try uploading your photos to a popular photo sharing service, and then use simple HTML code to embed them — either individually, as an album, or in a slideshow — on your site.

Picasa, Flickr and Photobucket are popular photo sharing services. I’ve provide step-by-step instructions, below, on embedding photos from these sites into your own website using simple HTML code.

I’ve used personal photos from my own gallery to illustrate the various aesthetic styles of each of the embedded examples below. When you embed your own image or slideshow, you’ll notice the that embed HTML code is quite lengthly, it’s not just a simple URL.

Picasa

Picasa is a robust image editing and sharing service, but it requires a bit of work getting it started. Once you have Picasa up and running you can share single images, albums or slideshows.

Embed as an Album

  1. To embed an album, start by going to the Picasa website, just copy and paste this URL into your browser: picasa.google.com.
  2. If you don’t already use Picasa, you’ll have to download and install the latest Picasa software and then set up a public Google Profile through Picasa.
  3. Once Picasa is installed it will automatically search out any photos you have on your computer and sort them for you.
  4. From the Picasa desktop software, simply select the photos you wish to include in your album or slideshow.
  5. Once you’ve selected the photos, click “Upload.”
  6. Next, go to picasaweb.google.com and sign in to your Picasa account on the web if you are not automatically logged in. You’ll find your album that you uploaded in your web gallery under “My Photos.”
  7. Click on your album so all the images inside the album are displayed. From there, you’ll click the “Link to this album” button on the right side of the window.
  8. After clicking the “Link to this album” button, you will have three options to choose from: two separate HTML codes for sharing the album as-is and a slideshow-embedding button. The first line of HTML code is for email or instant messenger sharing. The second line of HTML code is to embed into your website. To simply share the album, copy-and-paste the second-line of code by highlighting the code and copying it. Then paste the code into the source code of your website or blog. Your slideshow will look something like this:

Embed as a Slideshow

  1. To embed as a slideshow, follow steps 1-8 above, but simply click the “Embed Slideshow” button. A window will pop up with the slideshow embed code, slideshow size, auto-play and caption options.
  2. To share the slideshow, copy the code and then paste it into the source code of your website or blog. The slideshow will look something like this:

Embed a Single Image

  1. To embed a single image, again follow steps 1-7 above, but click on a single image in your album this time. On the right hand side of the window you’ll see the “Link to this Photo” button, click it.
  2. You will have two separate HTML codes for sharing again: First line of HTML code is for email or instant messenger sharing. The second line of HTML code is to embed into your website. Copy the second-line of code and then paste it into the source code of your website or blog. The single image embed will look something like this:

Flickr

Flickr is a simple web tool and requires no additional software or installation, unlike Picasa. With its web tools you can embed a slideshow or an individual image relatively quickly.

Embed as a Slideshow

  1. To embed as a slideshow, start by going to the free Flickr website, just copy and paste this URL into your browser: www.flickr.com.
  2. If you don’t already have a Flickr account, you can set one up instantly. All you need is a Yahoo! or Gmail email account.
  3. Once logged in, click the “Upload your first photos” button.
  4. Next, click the “Choose photos and videos” button.
  5. Select the photos you wish to upload from your computer.
  6. Once uploaded, click the “slideshow” button in the upper right corner of the Flickr window. The slideshow will begin to play.
  7. From the slideshow, click the “Share” button in the upper right corner. Two HTML code lines will appear, the second line of code is the embed code. You can copy and paste here or make adjustments to size by clicking the “Customize this HTML” button. The slideshow will look something like this:

Embed a Single Image

  1. To embed a single image, simply select the photo you want to add to the album. From within the image select the “Share this” drop-down button at the top of the window and select, “Grab the HTML/BBCode” button.
  2. Select the size of the image that you are embedding and then copy-and-paste the code into your website’s source code. The embedded individual image will look something like this:

Photobucket

Photobucket is even more streamlined than Flickr and Picasa. It doesn’t come with a lot of editing tools, but it’s very easy to use and you can get the same embed of individual images, albums or slideshows that the other more robust services offer.

  1. Start by going to Photobucket and setting up an account if you don’t already have one. Copy-and-paste this URL to go directly to Photobucket: www.photobucket.com.
  2. Once your account is set up, click the “Upload now” button at the top of the window. Select the photos you wish to upload and click “Save.”
  3. You’ve just created a photo album. From within this album you can embed an individual image, an album or a slideshow.

Embed as a Slideshow

  1. To embed an album as a slideshow, you’ll find the HTML code on the right hand side of the window in the “Share this album” field, adjacent to the “HTML link” text.
  2. Click the HTML link field and the code will automatically copy. Paste the HTML embed code to your website source code. Photobucket will always create a slideshow of the album for embedding. It doesn’t provide a way to embed as a standalone album. The slideshow will look something like this:

Embed a Single Image

  1. To embed a single image, simply move your mouse cursor over the image you wish to embed. A menu will automatically appear offering links and codes to that image. Click the “HTML code” field and it will automatically copy the code for you. Paste the code into your website source code. The individual image will look something like this when embedded:
PEC Staff
PEC Staff
Bio   •   RSS Feed


x