Monday 7 June 2010

Howto Embed Flickr Slideshow into Google Sites (Cont.)


My previous blog showed in detail how to embed a Flickr slideshow into a Google Sites web page.

This blog adds a couple of features,

  • Change size of slideshow
  • Use Flickr search to select photos

This time the slideshows are embedded into a two column Google Site web page.

flickr-slideshow-extra-01, originally uploaded by rodtuk.


Before using Flickr search, make sure that the search is limited to your own Photostream.
flickr-slideshow-extra-02, originally uploaded by rodtuk.


I have added the search criteria.

Note: What I consider to be my better photographs I tag as A1, so this is just selecting the better photographs of the Millennium Green.

flickr-slideshow-extra-03, originally uploaded by rodtuk.


Click on the slideshow icon to start the Flickr slideshow for the selected photos.
flickr-slideshow-extra-04, originally uploaded by rodtuk.

Display the share options, as described in the previous blog.

To change the slideshow take the customization option.

flickr-slideshow-extra-05, originally uploaded by rodtuk.


Note the default size before customization is 400 x 300.
flickr-slideshow-extra-06, originally uploaded by rodtuk.


I am going to change this to 300
flickr-slideshow-extra-07, originally uploaded by rodtuk.



flickr-slideshow-extra-08, originally uploaded by rodtuk.


Copy the provided HTML.
flickr-slideshow-extra-09, originally uploaded by rodtuk.



Go to your Google Sites web page, edit page and select click on edit HTML tab. Paste the copied code at the relevant position and press Update.

flickr-slideshow-extra-10, originally uploaded by rodtuk.


The new slideshow gadget has been added to my Google Sites web page,

Unlike my previous blog this is using a two column template so the 300x300 slide shows are aligned side by side. You may have to do a bit of editing to align them horizontally.

flickr-slideshow-extra-11, originally uploaded by rodtuk.



There is no indication which slide show it is so I usually add a title which I format to h2 level.
flickr-slideshow-extra-12, originally uploaded by rodtuk.



To move to the other column select the heading and slideshow gadget and cut (Ctrl-X).
flickr-slideshow-extra-13, originally uploaded by rodtuk.



Paste (Ctrl-V) in the other column.
flickr-slideshow-extra-14, originally uploaded by rodtuk.


You may need to change some of the options.

Do as explained in previous post, click on gadget to show options and select the ones you need.

In this case I want to align to the right.

flickr-slideshow-extra-15, originally uploaded by rodtuk.



Now the slide show gadget is in the 2nd column and aligned to the right to match the other 2nd column gadgets
flickr-slideshow-extra-16, originally uploaded by rodtuk.



Save the page to see the final result.
flickr-slideshow-extra-17, originally uploaded by rodtuk.

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.