The Rotating Post Titles with Post Preview Gadget

Exclusive offer: get 50% off this eBook here
WordPress Complete

WordPress Complete — Save 50%

A comprehensive, step-by-step guide on how to set up, customize, and market your blog using WordPress

$23.99    $12.00
by Narayan Bhat | May 2009 | Content Management Open Source PHP WordPress

In this article by Narayan Bhat, we will see how to install The Rotating Post Titles with Post Preview Gadget in your blog. This gadget contains Official Google code created using the Dynamic Feed Control from the Google AJAX Feed API. It will show all the post titles in your blog classified according to Labels (in Blogger) or Categories (in Wordpress). It will also show a brief rotating post preview at the top.

The Rotating Post Titles with Post Preview gadget lists all your blog posts classified according to labels or categories. Blogger uses Labels to classify posts while Wordpress uses Categories for the same. Clicking on a Label or a category in the sidebar of a blog brings up all posts associated with that particular label or category. However, you will see only posts associated with that one label. In this gadget post titles are grouped under their respective labels. In this gadget in one look you can see all the post titles in that blog and all the labels in it. Thus you get a full summary of the blog. Hovering on a post title shows the Post Preview in the top pane. You can then click on it to go to that post to read it in full detail.

What is Google AJAX feed API?

AJAX (shorthand for asynchronous JavaScript and XML) is a web development technique which retrieves data from the server asynchronously in the background without interfering with the display, and behaviour of the existing page. The whole page is not refreshed when data is retrieved. Only that section of the page which is a part of the gadget shows the data brought. With the Google AJAX Feed API, you can retrieve feeds and mash them up using Javascript. In this gadget, we will retrieve the post titles from the label feeds and display them using Javascript code. See picture below:

WordPress 2.7 Cookbook

This gadget shows list of posts grouped by label from my blog http://www.blogdoctor.me. Four post titles from three labels are shown but the code can be modified to show all posts from all labels (categories). This label is also shown as Gadget No 4 in My Gadget Showcase blog. The cursor autoscrolls down the post titles, and each post preview is shown at the top as an excerpt for five seconds before moving on to the next post.

Obtaining the Google AJAX API Key

The first step in installing the above gadget is to get the Google AJAX API Key. It is free and you can easily obtain it for any site blog or page by signing up for the key at the API key signup page.

Type in your blog address in the My web site URL text box and click the "Generate API Key" button. On the resulting page copy the key and paste it in code below as shown.

Customizing the code

In the code below replace PASTE AJAX API KEY HERE with your actual key obtained above.

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!-- // Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html -->
<!-- // The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page. -->
<div id="content">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>
<!-- Google Ajax Api -->
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.google.com/jsapi?key=PASTE AJAX API KEY HERE"
type="text/javascript"></script>
<!-- Dynamic Feed Control and Stylesheet -->
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>
<script type="text/javascript">
google.load('feeds', '1');
function OnLoad() {
var feeds = [
{
title: 'LABEL_1',
url: 'http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL1?max-results=100'
},
{
title: 'LABEL_2',
url: 'http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL2?max-results=100'
},
{
title: 'LABEL_3',
url: 'http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL3?max-results=100'
}
];
var options = {
stacked : true,
horizontal : false,
title : "Posts from BLOG_TITLE"
};

new GFdynamicFeedControl(feeds, 'content', options);
document.getElementById('content').style.width = "200px";
}
google.setOnLoadCallback(OnLoad);
</script>

In the above code replace LABEL_1, LABEL_2 and LABEL_3 and LABEL1, LABEL2 and LABEL3 by respective Label Names and BLOG_TITLE by the actual title of your blog. Also replace MYBLOG by actual blog subdomain. This is for blogspot blogs only. For Wordpress blog you will have to replace the label feeds::

http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL1?max-results=100

http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL2?max-results=100

http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL3?max-results=100

by the Category feed URLs from Wordpress blog.

After customizing the above code in Blogger paste it in a HTML gadget while in Wordpress paste it in a Text widget.

Further Customization

To show more than four posts per label or category, you will have to modify the following Javascript code file:

http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js

In the above mentioned Javascript code file, alter the following code line in it :

GFdynamicFeedControl.DEFAULT_NUM_RESULTS = 4;

Change '4' to '1000' and save the file as a MODgfdynamicfeedcontrol.js file in a text editor like Notepad. Upload the file to a free host and replace the link of the file in the above code.

To change the styling of the gadget, you will have to modify the following file:

http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css

Then save the modified file and upload it to a free host and replace its link in the above code.

Working Example

 

Summary

The Rotating Post Titles with Post Preview gadget provides an at-a glance summary of your blog. All the posts are grouped by label or category and are linked to their post pages. The constantly rotating post excerpts at the top draws the attention of the reader and gets him/her more involved and eager to explore your blog. This increases the traffic and decreases the bounce rate of visitors from your blog.nara

WordPress Complete A comprehensive, step-by-step guide on how to set up, customize, and market your blog using WordPress
Published: November 2006
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Narayan Bhat is an avid user of Blogger, Twitter, and other useful web applications. He is a Top Contributor to the Blogger Help Group with more than 50,000 posts to date. Get Blogger tips and tricks and hacks at his blog at http://www.blogdoctor.me.

Books From Packt


WordPress Complete
WordPress Complete

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

WordPress Theme Design
WordPress Theme Design

Plone 3 Theming
Plone 3 Theming

Drupal 5 Views Recipes
Drupal 5 Views Recipes

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

Blogger: Beyond the Basics
Blogger: Beyond the Basics

WordPress for Business Bloggers
WordPress for Business Bloggers

 


No votes yet
Hello! by
Very effectively written information. Will probably be priceless to anybody who usess it, including myself. Sustain the great work – for certain i will try extra posts. I have to admit that i generally get bored to learn the entire thing but i feel you can add some value. Bravo ! What i discover troublesome is to find a weblog that may seize me for a minute but your blog is different. Bravo.

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
T
k
q
t
X
9
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software