245 How to Create a Sitemap with Google Feed Control September 01, 2009 /

One question I am asked often is how to create a sitemap, where posts are organized by category (label) and link directly to blog posts.

There are several ways this could be achieved, such as manually coding a sitemap, or using a service to generate the feeds for each individual label.

In this article, I'll explain my favourite method for creating a sitemap/table of contents for Blogger blogs: using a modification of Google "Feed Control" to generate a sitemap automatically using the minimal amount of code.

Overview

Creating a sitemap using Google's Feed Control is a relatively simple task. You need not know anything about JavaScript or HTML code in order to use this tutorial: so long as you're able to copy and paste, this should be fairly easy to install!

The sitemap we will create will list all post titles from your blog, organized by their category/label on a post page. We can then link to this post page from elsewhere in the Blogger template, such as a link menu beneath the header, or a link list in the sidebar which details links to other important pages of your site.

Once complete, your sitemap will appear something like this, featuring the title of your label, followed by links to each post filed under this category:

You may also like to take a look at the sitemap I've created for Blogger Buster to see how this works in more detail.

Update - Easy install TOC/Sitemap Script for Blogger by Abu Farhan

Abu Farhan has created a very simple Table of Contents/Sitemap script for Blogger users which can be installed very quickly and easily.

This alternative script uses only two lines of code, and can easily be pasted into a post page (or even a sidebar widget if preferred). All we need to do is change the URL of our blog.

Once installed, this script automatically parses and displays each post under label headings and displays in alphabetical order. What's more, the latest 10 posts from each category are highlighted with "New" so readers can easily notice the most recent posts.

Unlike my Google Feed Control script, this installation is not limited to 100 posts per category.

Be sure to take a look at this excellent script and installation instructions on Abu's site as this is much easier to install and generated a very clean, organized sitemap with little effort.

Thank you for sharing your script, Abu!

How to create your sitemap with Google Feed Control

There are four main steps to creating a dynamic sitemap with Google Feed Control:

1. Generate an API key from Google
   
2. Add the template for your sitemap to a post page
3. Paste in your API key
4. Paste in the URLs for your label feeds

Let's look at each step in detail.

Generate your API key

In order to use Google's Feed Control, you'll need to generate a unique API key for your blog.

This key will be unique to your particular blog, and may only be used on the domain you specify during sign-up. If you have multiple blogs and would like to install a sitemap on each blog, you'll need to generate a new API key each time.

Your API key is provided free of charge, and enables you to utilize scripts which are hosted on Google servers (so we don't need to upload and host these scripts elsewhere!).

So, first things first! Generate a Google AJAX API key for your site, and copy this long string to your clipboard (or your favourite text editor) for later use.

Paste the template for your sitemap into a post page

The next step to installing a sitemap is to paste the "template" on which your sitemap will be based into a post page.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:

<style type="text/css">
  /**
   * Suppress everything except for title
   */
  #feedControl .gf-snippet,
  #feedControl .gf-author,
  #feedControl .gf-spacer,
  #feedControl .gf-relativePublishedDate {
    display : none;
  }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
    /*
    *  How to use the Feed Control to grab, parse and display feeds.
    */
   
    google.load("feeds", "1");
   
    function OnLoad() {
      // Create a feed control
      var feedControl = new google.feeds.FeedControl();
   
      // Add blogger label feeds.
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
     
      feedControl.setNumEntries(-1);
   
      // Draw it.
      feedControl.draw(document.getElementById("content"));
    }
   
    google.setOnLoadCallback(OnLoad);
    </script>
<div id="content">
Loading, please wait...</div>

The <style> section at the head of this code prevents the summary (usually printed by the Feed Control script) being displayed, so that only the linked title is displayed on the sitemap page.

You may notice I've also highlighted other sections in bold coloured text. These are the sections we need to edit for your particular blog, as outlined below.

Paste in your unique API key

In the code you have pasted in your post page, you need to replace "YOUR-API-KEY" with the unique API key you generated at the beginning of this tutorial.

It is easiest to have your API key copied to your clipboard; then highlight YOUR-API-KEY and key CTRL+V (or CMD+V) to paste the key instead of the phrase.

Paste in the URLs and titles for your Label Feed URLS

This step of the tutorial is a little more complex.

We need to paste the URLs of the label feeds we would like to use for the sitemap in place of YOUR-LABEL-FEED-URL, and replace TITLE-OF-YOUR-LABEL with an explanatory title for each relevant line of the Feed Control script.

Each line we need to edit looks like this in the script we have pasted into the post editor:

      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");

In total, I have used 10 lines (for 10 different labels) in the template script. If you require more, simply duplicate this line and add your label feed urls and titles as appropriate.

Similarly, lines may be deleted if you need to use less than 10 labels for your sitemap.

Your label feed URLs will be something like this:

http://your-blog.blogspot.com/feeds/posts/-/LABEL-NAME
or
http://www.yourblog.com/feeds/posts/-/LABEL-NAME

where LABEL-NAME is the name of the label you are using in your blog.

We also need to include the variable "?max-results=100" at the end of the label feed URL to ensure the maximum 100 posts from each label will be displayed. Otherwise, only the first 25 posts will display in our sitemap.

For example, the URL I use to display all posts filed under the Gadgets label is

http://www.bloggerbuster.com/feeds/posts/-/Gadgets?max-results=100

If any of your labels include spaces, you must replace the spaces with %20 instead.

Here's another example, using my Customize your Blogger Template label:

http://www.bloggerbuster.com/feeds/posts/-/Customize%20your%20Blogger%20Template

Finally, the URLs of your label feeds are case sensitive. If you use any capital letters in the names of your Blogger labels, you will need to match these in the label feed URLS.

The LABEL-NAME element of each line is where you need to type the name/title of the label feed. This aspect is not case sensitive, since it is not generated by your label feeds. If you like, you can use a title which is not the same as the label feed to offer a more explanatory title for your readers.

Here is how I have coded the sitemap for Blogger Buster:

<style type="text/css">
  /**
   * Suppress everything except for title
   */
  #feedControl .gf-snippet,.gf-author,.gf-spacer,.gf-relativePublishedDate {
    display : none;
  }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY-API-KEY"></script>
<script type="text/javascript">
    /*
    *  How to use the Feed Control to grab, parse and display feeds.
    */
   
    google.load("feeds", "1");
   
    function OnLoad() {
      // Create a feed control
      var feedControl = new google.feeds.FeedControl();
   
      // Add blogger label feeds.
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20News%20and%20Issues?max-results=100", "Blogger News and Issues");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Gadgets?max-results=100", "Gadgets");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Free%20Blogger%20Templates?max-results=100", "Free Blogger Templates");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Resources?max-results=100", "Resources");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Custom%20Domains?max-results=100", "Custom Domains");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Images%20Icons%20and%20Badges?max-results=100", "Images and Icons");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Labels%20Categories%20and%20Tags?max-results=100", "Labels, Categories and Tags");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Monetize%20Your%20Blog?max-results=100", "Monetize Your Blog");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/RSS%20Feeds%20and%20Syndication?max-results=100", "RSS Feeds and Syndication");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/SEO%20and%20Blog%20Traffic?max-results=100", "SEO and Blog Traffic");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20Template%20Resources?max-results=100", "Template Resources");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Announcements?max-results=100", "Blogger Buster Announcements");
      feedControl.setNumEntries(-1);
   
      // Draw it.
      feedControl.draw(document.getElementById("content"));
    }
   
    google.setOnLoadCallback(OnLoad);
    </script>
<div id="content">
Loading, please wait...</div>

Once you have finished adding the Label feed URLs and titles to your Sitemap post, you can publish your post and enjoy using your new Blogger sitemap!

Troubleshooting your FeedControl Sitemap

Here are a few issues which you may encounter when installing your sitemap:

The sitemap takes ages to load!
This may happen if you use a large number of labels in your sitemap. Few label feeds will load quickly, while many will take a long time to load.

If this is of particular issue, try to reduce the number of labels/feeds in your sitemap.

The sitemap does not display!
If the sitemap does not load at all, this may be due to an error when pasting the initial template code, your API key or a label feed.

The best advice would be to begin the installation again, making sure you use the Edit HTML mode of your post editor and are careful not to accidentally delete any other elements of the code.

You should also take care not to switch to "Compose" mode while editing your sitemap as this sometimes makes involuntary changes to HTML code which could corrupt the sitemap script.

Certain Labels do not display any posts
This may happen in cases where the URL of your label feed is not quite correct, for example, the title is not capitalized, or spaces are not replaced with %20.

In this case, edit your template and check the URL of the offending label feed carefully for any involuntary errors. Make changes as appropriate, and save your template.

I have more than 100 posts filed under a particular label. How can I display all posts?
Google's Feed Control can only be used to display up to 100 posts from a particular feed. In order to display more results, we need to add a new feed variable, in which the start index is 101.

In the Blogger Buster sitemap, for example, I need to display more than 100 posts for the Customize your Blogger Template category. In the line after the first 100 results for this category, I paste a new line where the start index of the feed is the 101st post, like this:

      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");

If your label includes more than 200 posts, you can add a third variable where the start index is 201, and so on.

Adding extra content, and styling your sitemap

It is possible to add extra content to your sitemap page, for example, a explanatory paragraph or links to other important pages of your template.

Ideally, you should add this content while editing your sitemap in Edit HTML mode. Be sure to add this content above or below your sitemap script to prevent any errors which would prevent the sitemap displaying properly.

If you would like to style elements of the sitemap, you can achieve this using CSS (either by adding to the <style> section in the Sitemap script, or within the <b:skin> section of your Blogger template.

Here are the classes you can use for styling your sitemap:

• #feedControl - the ID for the overall sitemap
  
• .gf-title - the title of each label
• .gf-author - the author of each post
• .gf-relativePublishedDate - the published date displayed beneath each title

Final Thoughts

I hope this tutorial offers a comprehensive guide to using Google's Feed Control to create a dynamic updating sitemap for your Blogger blog! I understand this is not a simple "one click install" sitemap, though as this sitemap updates automatically each time we create a new post, I find this is the easiest, most flexible option to use.

I would love to know of any simpler installations for this sitemap, so if you have written one (or have discovered a tutorial), please feel free to let us know in the comments.