make Ajax Slideshows with Google Ajax Feed In Your Blogger

Today I have something very unique to share with my readers and fellow bloggers. I will be providing a simple tutorial on how to make Ajax Slideshows with the Google Ajax Feed API and how to easily embed them in your website or blog.
Google Ajax Slideshows
For those who don't know Google Ajax Slideshow is a simple application of the Google AJAX Feed API that is designed to let you add photo slide shows to your pages, sites, and blogs. The slide show control takes photo feeds from all popular sites, such as PhotoBucket, Flickr, and Picasa Web Albums. Any feeds that use Media RSS can be used without customization.

Things You Can Do with Ajax Slideshows
The Slide Show control is highly customizable, allowing you to specify options such as the number of photos to display, display and transition time between photos, how the photos link back to their source. Here are some amazing things you can do with with Google Ajax Slideshows

Make Slideshows of Your Personal Photos
Make Slideshows out of any Media Feed
Share Slideshows with Your Friends
Display Slideshows on Your Blog

For those Flickr and Photobucket Feed Sticker geeks this is the best thing so far.
How To Make Google Ajax Slideshow
I will be discussing particularly how you can embed the Google Ajax Slideshows in your Wordpress Blog. Lets say I want to make Ajax Slideshow of a Sunset Media Feed then here are the steps you need to follow to display the slideshow in your sidebar.

Sign up for Ajax Feed API key for your blog
Open header.php file in your theme and add this script code after body

<script src="http://www.google.com/jsapi/?key=Your-Key"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
<script type="text/javascript">
function LoadSlideShow() {
var feed = "http://www.google.com/uds/solutions/slideshow/sample.rss";
var options = {displayTime:2000, transistionTime:600, scaleImages:true};
var ss = new GFslideShow(feed, "slideShow", options);
}
/**
* Use google.load() to load the AJAX Feeds API
* Use google.setOnLoadCallback() to call LoadTuneBar once the page loads
*/
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);

</script>

3- Replace Your-Key with your real Ajax Feed API Key.
4- Open style.css and define some styling for your slideshow

#slideShow {
width : 300px;
height : 250px;
padding : 10px;
}

5- Call the script function anywhere in your sidebar using this code

<div id="slideShow">Loading...</div>

You are done

2009-05-15