Monday 7 June 2010

How to Embed Flickr Sideshows into a Google Sites web page


This blog describes how to embed Flickr Sideshows into a Google Sites web page.


flickr-slideshow-1, originally uploaded by rodtuk.

This first example simply embeds one of my Flickr Sets into a single column Google Sites page.


flickr-slideshow-2, originally uploaded by rodtuk.

Select the Set you wish to embed.


flickr-slideshow-3, originally uploaded by rodtuk.


Click on the Slideshow icon to start Flickr slideshow in the normal manner.


flickr-slideshow-4, originally uploaded by rodtuk.

Click on the Share which is top right of slide show.


flickr-slideshow-5, originally uploaded by rodtuk.

Copy the "Embed HTML" copy button.
flickr-slideshow-6, originally uploaded by rodtuk.
Return to the Google Sites web page, and click on the Edit HTML to display the source HTML code.
flickr-slideshow-7, originally uploaded by rodtuk.

Paste the HTML code into the web page at the position you want.
flickr-slideshow-8, originally uploaded by rodtuk.

Click on the Update button, bottom left.
flickr-slideshow-9, originally uploaded by rodtuk.

Save the changes.
flickr-slideshow-10, originally uploaded by rodtuk.

The outline of the gadget is shown in the Google Sites web page edit. You can modify the defaults by clicking the gadget to show the options at the bottom.

Make any changes you require.

flickr-slideshow-11, originally uploaded by rodtuk.

In this example the Alignment = Centre was chosen.

Save the changes to see the finished page.

flickr-slideshow-12, originally uploaded by rodtuk.

The embedded Flickr Slideshow should appear as shown. To staret the show click on the usual "Play" triangle.
flickr-slideshow-13, originally uploaded by rodtuk.

The final result with the slideshow in progress.
flickr-slideshow-14, originally uploaded by rodtuk.



Move your mouse into the slideshow to reveal the Flickr options.

If you click on the photo you will be taken to the Flickr page for that photo in a new tab.


Click the bottom right icon to start a full page version of the slideshow.


To resume slideshow click Play icon on bottom left.


It is also possible to navigate using the small thumbnails.

flickr-slideshow-15, originally uploaded by rodtuk.

This is the Flickr page for the photo selected as described above.
flickr-slideshow-17, originally uploaded by rodtuk.

Next Blog Post - Two up slideshows & Flickr Search results.

1 comment: