竹部落

How does related posts work? The scenario is easy to understand. When you want to write new post, you will add Labels for this post on the bottom of Blogger editor. You add tags for the post you wrote. When web user visit your blog, related posts feature will list other relation posts following post content by specific tag. (you have three types can show related posts on your blog depending Blogger template pageType: 'item', 'archive', or 'index').[1]

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
    type='text/javascript'>
    </script>
</b:if>

I want to show related posts in user view specific page. So, i assign pageType is 'item'. As you can see. you can receive specific tag post content by callback function using Google Data Protocol[2]. Following is complete code to get all tage you add.

<b:loop values='data:post.labels' var='label'>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
  type='text/javascript'>
  </script>
</b:if>
</b:loop>

Finial, you need to render those data to web page. You can have simple function to do that like this.

After solving how receive data from Blogger template Layout data and render to web page. The key point of Related posts is parse data you need.

We receive Blogger template Layout data by callback function and return JSON data. The render data include post url, post title and post date (depending what you need). It's better to keep value in an object. Object is easier to understand and manipulate.

function RelatedLabels(json) {
var entries = json.feed.entry;
for (var key in entries) {
if (entries[key]) {
var item = {};
item.title = entries[key].title.$t;
item.url = entries[key].link[4].href;
item.date = entries[key].published.$t.substr(0, 10);
relatedPosts.push(item);
}
}
}

You might add multiple tags in different posts, and therefore might receive the same post in different tag by loop. There are many solutions to solve duplicate post in an object.

var relatedPosts = [];
relatedPosts.push = function (data) {
 var _push = true;
 var length = this.length;
 for (var i = 0; i < length; i++) {
     if (this[i].url == data.url) _push = false;
 }
 if (_push) return Array.prototype.push.call(this, data);
 else return this;
}

function RelatedLabels(json) {
 var entries = json.feed.entry;
 for (var key in entries) {
     if (entries[key]) {
         var item = {};
         item.title = entries[key].title.$t;
         item.url = entries[key].link[4].href;
         item.date = entries[key].published.$t.substr(0, 10);
         relatedPosts.push(item);
     }
 }
}

function ShowRelatedPosts(PostUrl) {
 var count = 0;
 var eleLi, link, date, fragment = document.createDocumentFragment();
 for (var key in relatedPosts) {
     if (typeof(relatedPosts[key].url) != 'undefined' && relatedPosts[key].url != PostUrl && count < 5) {
         eleLi = document.createElement('li');
         link = document.createElement('a');
         date = document.createTextNode(' (' + relatedPosts[key].date + ')');
         link.setAttribute('href', relatedPosts[key].url);
         link.innerHTML = relatedPosts[key].title;
         eleLi.appendChild(link);
         eleLi.appendChild(date);
         fragment.appendChild(eleLi);

         count++;
     }
 }
 var eleOl = document.createElement('ol');
 eleOl.appendChild(fragment);
 document.getElementById('relatedPosts').appendChild(eleOl);
}

• Blogger Layout Data Tages [1]
• Google Data Protocol Reference [2]
• Speeding up JavaScript :Working with the DOM [3]