" العاب العرب "

Showing posts with label Ajax. Show all posts

2009-05-15

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

Image

Add Google Ajax Feed To your Blogger Templates

First of all, i want to give credits for New Blogger's (blogspot.com) recent posts widget using Google's Ajax Feed API to Hecto, i just modified the script to make it open in the same window, work with FeedBurner and a few other minor tweaks.

Now we can begin. You can see this New Blogger Recent Posts Widget using Google's Ajax Feed API in the right side of my blog. Move your mouse over it to see how it works.

1. You will need a key from Google which you can get in a second without any registration, by going to this link.

2. Go to your Blogger Dashboard > Layout > Edit HTML, check "Expand Widget Templates" and find: </head> and paste the following code above it

<script src='http://www.google.com/jsapi/?key=YOUR KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
width : 353px;
margin-left : 1px;
background : white;
font-size: 13px;
float:left;
}
.gfg-title {
font-size: 17px;
border-bottom: 1px solid #307396;
font-weight: normal;
color : #BF0000;
background-color: #FFFFFF;
}
.gfg-title a {
color : #005580;
}
.gfg-root {
border: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color : white;
}
.gfg-list {
background-color : white;
}
.gfg-listentry-odd {
background-color : white;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 7.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gfg-listentry-highlight {
background-image : url('http://nilarimogard.googlepages.com/garrow.gif');
background-repeat: no-repeat;
background-position : center left;
background-color : #F6F6F6;
}

</style>
<script type='text/javascript'>

function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "atom.xml?redirect=false";
new GFdynamicFeedControl(feed, "feedControl",
{linkTarget : google.feeds.LINK_TARGET_SELF, numResults : 5, title : 'Recent Posts'});
}

google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

Change YOUR KEY with the key you got in point 1. The bold code above can be changed to suit your needs. numResults : 5 is the number of posts in this widget, change the number to the number of posts you want to show up in your recent posts widget. title : 'Recent Posts' can also be changed with the title you want for your widget, or you can remove title : 'Recent Posts' if you want your feed's default title to be displayed.

3. Create a new "HTML/JavScript" widget, then add this line to the content:

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

Save it and you're done.

Customizing the recent posts Ajax widget

To change the font, colors and so on of your widget, modify the CSS styles:

#feedControl {
width : 353px;
margin-left : 1px;
background : white;
font-size: 13px;
float:left;
}
.gfg-title {
font-size: 17px;
border-bottom: 1px solid #307396;
font-weight: normal;
color : #BF0000;
background-color: #FFFFFF;
}
.gfg-title a {
color : #005580;
}
.gfg-root {
border: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color : white;
}
.gfg-list {
background-color : white;
}
.gfg-listentry-odd {
background-color : white;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 7.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gfg-listentry-highlight {
background-image : url('http://nilarimogard.googlepages.com/garrow.gif');
background-repeat: no-repeat;
background-position : center left;
background-color : #F6F6F6;
}

To change the red arrow, save this image: http://nilarimogard.googlepages.com/garrow.gif, edit it with the color you want and upload yours to some host, then change it in the above code.

You cand find all the CSS elements for the Google Feed API, here.

For further documentation regarding the Google Feed API, visit it's homepage.