Automatic Updating Recipe Index on Blogger- An Update

Have you ever had something that just gnawed at you? It happens to me a lot but I tend to get them resolved reasonably quickly. But this one has hung out there for over a year.

Let me briefly explain what the heck I'm talking about. Food bloggers are starting to list their past post (i.e. recipes) on one "index page" to help visitors find the recipes. Well, most bloggers are making a static page but that requires an update with every post to keep it current. A pain I refuse to do. There is enough to do with cooking, photography, writing, photo editing, posting links to Facebook and much much more. I refuse to update the index manually every time. So my solution was a dynamic page that pulls data from the RSS blog feed and can pull that data and display it as a click-able link. This is call RSS to Java or RSS to HTML.  Original instructions at  Making An Automatic Updating Recipe Index in Blogger

I have not for the life of me been able to get my recipe index to list more than 25 posts under any category. I first published a technique for an automatic updating recipe index for a food blog in November 2011. It worked really neat BUT would only list the latest 25 recipes in any one category. I worked around this by not have "Chicken" as a category but "Chicken - Skinless Boneless" but as I published more, even this did not work well. I lost the earlier posts from the index and hence became hard for visitors to find. I tried multiple techniques, 30 day trials of this software or that web site. Nobody wanted to let me have more than 25. (Actually one did let me have 28...)

The Solution

Before you go any farther, you need to be aware that this will take a few seconds to load on my site with a desktop or laptop with a good connection.  But on something like an iPad or iPhone with a relatively slow processor compared to a real computer, loading is slow if it completes at all. So I use this and then will block copy onto a static page that will load quickly for my visitors. That is what you will see on my site.

The solution comes from Google Feed API in Google Developers Network . From there you can read all about it if you want. Good luck with that. I went to the Code Playground/Blogger/Posts/List Posts. After a lot of play in the playground, I had my solution.

First there is code they want in the Head area of the page. The code is needed but can be placed at the top of the page. Second, the page gets very long so a directory at the top with anchors is a must. Third, the data section for each category must have a unique name. I just went with content1, content2, etc.

Lastly, you CAN NOT do the editing within the Blogger editor if you use the anchors. The Blogger editor will "relate" them back to the location in the editor, not on the site and you are sxxxwed. I use Dreamweaver which I have used for years for other projects. Any HTML editor, many of which are freeware or shareware will do.

Step by Step

1) Open a blank page. Here is the required Java code. Place this at the top

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("gdata", "1.x", { packages : ["blogger"] });
    </script> 

2) I now inserted an anchor for the top of the page so readers can clink on a graphic and go back to the top. Plus I used a graphic for the title of the page.

<a name="RETURN TO TOP"></a>
<img src="http://1.bp.blogspot.com/-wFCu1jqlVIA/UCbh5QQdEuI/AAAAAAAAFLs/FNHWABcqKls/s1600/recipe-index1.jpg" width="800" height="150" align="middle"> <br />
<br />

3) I used 3 columns at the top to list all the categories I wanted with links to the anchors that are down the page.

<div style="float: left; width: 30%; padding: 4px;"><i><u style="color: blue;">


insert links to your anchors and categories here like this
<a href="#Bacon">Bacon</a><br />


</div><div style="float: left; width: 30%; padding: 4px;">  

insert more categories here

</div><div style="float: left; width: 35%; padding: 1px;">

and more here

</div>
you will needs lots of line breaks here to space down past the categories


4) Now the code for each category. I start with the anchor that will allow the visitor to jump down the page to the category from the list at the top. Then the title of the category followed by a link back to the top of the page with a graphic that says top. Then a picture and the the Java script to generate the list of posts.

In this example I use "content2" as the name of the content. It must be unique to each category and appears 5 times in this code. You must be sure they all match. Also note the address for the link to the feed specific to my bacon label.

<a name="Bacon"><u><b><span style="font-size: xx-large;">Bacon</span></b></u> </a><a href="#RETURN TO TOP"><img border="0" src="http://3.bp.blogspot.com/-ha2Bgj8RYqM/Tr7KK_O-AfI/AAAAAAAAED4/8N2zTt5kd-4/s1600/top.gif" /></a><br /> <img src="http://3.bp.blogspot.com/-5x74VQR-Ykg/TpCQHtXd53I/AAAAAAAADyY/X6cZRazx-O0/s1600/DSC00630b.jpg" width="240" height="180" /><br />

<script type="text/javascript">
      function _run() {
      var content2 = document.getElementById('content2');
        var bloggerService = new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');

        var feedUri = 'http://www.101cookingfortwo.com/feeds/posts/default/-/bacon?max-results=100';

        var handleBlogPostFeed = function(postsFeedRoot) {
          var posts = postsFeedRoot.feed.getEntries();
          var html = '';
          // Display blog posts
        html += '<dd><ul>';
  for (var i = 0, post; post = posts[i]; i++) {
    var postTitle = post.getTitle().getText();
    var postURL = post.getHtmlLink().getHref();
    html += '<li><a href="' + postURL + '" target="_blank">'
              + postTitle
              + '</a></li>';
  }
  html += '</ul></dd>';
          content2.innerHTML = html;};
        var handleError = function(error) {
          content2.innerHTML = '<pre>' + error + '</pre>';};
        bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
      }
      google.setOnLoadCallback(_run);
    </script>

        <script type="text/javascript">
      google.load("gdata", "1.x", { packages : ["blogger"] });
    </script>
    <div id="content2" style="width:100%;">Loading...</div>


  <br />