Domain Hosting Sale: Slideshows

Showing posts with label Slideshows. Show all posts

Friday, 3 June 2011

Showing a PowerPoint presentation in your blog as an embedded slideshow

You can show content from a PowerPoint presentation inside your blog, by converting it to a Google Docs document and then using the "embed" code that Docs provide.

Overview:

This article shows you how to put a PowerPoint file into Google Docs, and then use the "Publish" feature from Docs to show the presentation right inside your blog - in slideshow mode.

For many presentations, this is currently my favourite way of displaying them, because it gives a very nice-looking display.   Here's an example of a presentation displayed like this:

Follow these steps to embed a presentation in your blog:

1 Upload the PowerPoint file to Google Docs, making sure that the "Convert documents, presentations, and spreadsheets to the corresponding Google Docs formats"... option is ticked.

2 Once it's uploaded, choose Return to Google Docs

3 Open the presentation (by clicking on it)

4 Click on the Share button in the top RIGHT corner of the Presentation Editor, and choose Publish / Embed.
(Note: for this option, you must be inside the Presentation Editor. You know you are in the correct place if the Share button is on the far right of the screen.   If it's on the left, then you are possibly going to share the document, but this won't get you the embedding code).

5 Click the Publish Document button.

6 Choose your options.   These include:

a player size (I like Medium for presentations that are going inside posts),
how fast to advance slides,
whether to start the presentation as soon as the player loads (I don't like this - readers may want time to take in the rest of the article first)
what to do when the last slide is reached.

7 Copy the HTML that is provided.

8 Return to Blogger, and paste in the HTML code, in any of the ways that 3rd party HTML can be added.

What your visitors see:

People who read your blog directly through a web-browser see the first slide of the presentation, with controls (play, back, forward) in the bottom left corner. When they click the Play icon, the slideshow plays, and at the end it shows a summary slide and gives the code that your reader can use to embed the same slideshow themselves.

I'm still investigating what people who see your blog in a feed reader (eg Google Reader) or via an email subscription see: it's possible that the embedded slideshow won't actually display in these tools.

Are you reading this in a feed-reader (other than Google Reader)?
I'd be very grateful if you could leave a comment about how the slideshow looks for you.

Saturday, 21 May 2011

Putting a slideshow from Picasa into your blog

This article is about how to put a Picasa slideshow into your blog, using Picasa's slideshow tool.

It also looks at the security issues that may be involved in doing this, and suggests some ways around these.

Picasa, Albums and Slideshows

Previously I've explained what Picasa is and how it is used by Blogger as the default place to store uploaded pictures.

You can also use Picasa in more complicated ways. You can put a set of pictures in a separate "album" (Picasa's word for a user-defined group of photos), and it will give you the HTML code to use to show these photos in your blog (or any other website).

There are two ways of doing this:

Link to the album: clicking on the link takes your visitor away from your website and into Picasa-web-albums, where they can use the PWA tools to look through the pictures
Link to a slideshow: this scrolls through the photos that are in the album at the time, right inside your website. Here's an example of a slideshow:

This article is a step-by-step guide to the second option, is showing a Picasa-web-album in your Blogger as a slideshow. A similar approach will work for other websites, thought the details will vary slightly.

How to insert your slideshow

Go to Picasa Web Albums (http://picasaweb.google.com/home), and log in with the Google account that owns (or you want to own) the album. Note: you may need to use this trick to stay inside Picasa-web rather than being automatically re-directed to Google+ Photos.

Check that you have already uploaded the album you want from your PC to Picasa-web-albums.
(and if you haven't, go back to Picasa and upload it now)
Choose an album by clicking on it.
The album view opens, showing you a thumbnail of all the photos in it on the left of the screen. On the right of the screen, there is a sidebar of useful tools.
Under the Edit drop-down (the one in the album, not the edit menu in the browser), check that Visibility is set to either "Anyone with the Link" or "Public on the web"
Click on "Link to this Album" (currently it's in a small font, 3/4 of the way down the right-hand sidebar - this may change if Picasa changes its interface)
Click on "Embed Slideshow" (currently this shows up underneath "Link ... " - and only AFTER you've clicked link...)
This opens a new dialog box, over the top of your current browser window.
Fill in the details you want
(slideshow size, whether or not to show captions and to autoplay the slides, etc)
Copy the HTML from the box at the bottom of the left hand-side (the one labelled "Copy and paste ..."
Go to Blogger and log in with a Google account that has rights to edit the the blog - note that this doesn't need to be the same account that owns the Picasa album.
You can put the code that you copied into your blog in the same way you would adding any other 3rd party HTML to it.

What you see in the Post Editor:

If you put the slideshow into a blog-post, the the way that the post-editor currently works with code means that the slideshow is not visible while you are editing the post. This means it's easy to accidentally over-write or delete the code.

One way around this is to put some "marker text" before and after it.

For example, I've put in <hr /> and <blockquote> </blockqoute> statements before and after the code just underneath this paragraph. While I'm in the editor, all I can see is a pair of parallel lines, with nothing between them. But (because you're visiting the blog after it's published) you can see a slideshow in between.

This makes the code look like:

<blockquote>
<hr />
<embed flashvars="host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F105223767362417288786%2Falbumid%2F5439615839989953921%3Falt%3Drss%26kind%3Dphoto%26authkey%3DGv1sRgCK7yg5XUpNHZtAE%26hl%3Den_US" height="192" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" type="application/x-shockwave-flash" width="288"></embed>
<br />
<hr />
</blockquote>

What your visitors see - and can access:

The steps above puts a slideshow of the photos in the album at the current time into your blog post.

You can use the examples above to get an idea of how these slideshows work: they have next, play / pause, and previous buttons, and you can toggle captions on/off. The top example has auto-play ON, while the second one has it OFF.

On important thing to note: when your visitors click on the slideshow itself (anywhere but on previous / play / next buttons), they are taken to the place in Picasa-web-albums where the album is.

From here, they can get to ANY other albums owned by the same Google account that are either Public or Visible to Anyone With the Link.

This may or may not be a problem for you - but it's something that you should be aware of. It certainly was a problem for me initially, and I had to go and get a slideshow in a Google account with no personal pictures to make the examples in this post.

If you are not willing to live with this level of security, then I suspect (am yet to confirm) that using the RSS feed provided by Picasa with Blogger's own slideshow gadget may be a better approach. This will only work in places where you can put a gadget - although it may be possible to use a 3rd party service that converts a feed into Javascript to make code that can be put inside a post. Or totally different solution is to put your pictures into a PowerPoint slideshow and display it in your blog.

Picasa & Blogger - Part 1, What is Picasa?

Picasa & Blogger - Part 2, Options for linking Picasa into your Blog

Showing a PowerPoint presentation as a slideshow in your blog

Putting 3rd party HTML into your blog

Wednesday, 13 January 2010

Putting a Picasa slideshow into your sidebar

This article shows how to put a slideshow from Picasa-web-albums into a gadget on your blog.

Overview

Previously I've described the options for linking your blog and Picasa-web-albums, and noted that putting a slideshow into a gadget is one option.

A slideshow is a set of photos that automatically advance from one to the next - it's a little different from an album, which is just a collection of photos with no auto-advance feature.

There are two approaches you can take to putting a PWA slideshow into your blog:

Getting the code from Picasa and using a HTML/Javascript gadget.
Using Blogger's slideshow gadget.

The 2nd option is easier, but the first (usually) gives you more control over how the slideshow works.

HTML/Javascript Gadget Approach:

(NB a similar approach will work for other blogging tools, eg Wordpress, thought the details will vary slightly)

Go to Picasa Web Albums (http://picasaweb.google.com/home).
Check that you have already uploaded the album you want from your PC to Picasa-web-albums.
(and if you haven't, go back to Picasa and upload it now)
Choose an album by clicking on it.

The album view opens, showing you a thumbnail of all the photos in it on the left of the screen. On the right of the screen, there is a sidebar of useful tools. One of these is "Link to this Album".
Click on "Link to this Album"
Click on "Embed Slideshow"
This opens a new dialog box, over the top of your current browser window.
Fill in the option details you want (slideshow size, whether or not to show captions and to autoplay the slides, etc)
Copy the HTML from the box at the bottom of the left hand-side (the one labelled "Copy and paste ..."
You can now put this HTML into your blog, the same way you would add any other 3rd party HTML : option 1 in this article describes how to put it into a gadget.

Alternative:

You may be able to use the slideshow gadget instead. To do this, follow steps 1 and 2, and then:

Go to Picasa Web Albums (http://picasaweb.google.com/home).
Check that you have already uploaded the album you want from your PC to Picasa-web-albums.
(and if you haven't, go back to Picasa and upload it now)
Return to Blogger, and:
In pre-Sept-2011 Blogger, go to Design / Page Elements in Blogger, or
In post-Sept-211 Blogger, to do the Layout tab
Click "Add a gadget" in the area where you want to put the slideshow.
Choose the Slideshow gadget,
Choose these options - in the order shown (ie work down the page - some of the bottom options won't have the right values availabl until the earlier ones are set)

Source = Picasa web albums
Option = Album
Username = the name of the google account where the album is stored. (eg, mine is maryc.fromnz)
Album = which ever album your photos are in.

Save the gadget, and check that the position is correct.

Some people advise against saying that Picasa-web-albums is the source: they suggest choosing Other, and just pasting in the album's URL. I haven't yet found any reasons for this, but it's worth trying if using Picasa as a source doesn't work for you.