Related Post Widget for Blogger - Identify Labels

In an attempt to demystify the logic behind developing a related post widget for blogger, we have had an introduction where we defined the approach for creating a widget. In this post, we will examine each and every section of the approach we have laid on and dwell more on that with examples. I'm going to explain each of the code snippets in the form of separate Javascripts and we will integrate all of them together and give a widget for that in the end.

The first step to arrive at the related post scenario is to collect all the labels attached to a post. As you may be aware, it would be nearly impossible to relate each post word by word and arrive at a set of related posts. So, we will go by the preferred path -> labels. For every blog post, we would obviously provide some labels and we will use them to get the relevant related posts. In doing so, our first gate would be to collect the labels. Hence the objective is, "Collect all the labels that are available in the current post, to get the relevant related posts".

A code snippet to accomplish the same task is provided below. We will have a walkthrough of the code to understand it better:

var labelArray = new Array(); => Create a label Array <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; labelArray.push(textLabel); </b:loop> </b:loop>

We are going to use both blogger and Javascript together here to grab all the labels. To do so, we create a labelarray in the first line. We then loop through all the available posts in the blogger page, and collect all the labels in a child loop. Each of these labels is grabbed in a field called 'textLabel' and this is inturn pushed into the labelArray.

At the end of this step, we will have all the the labels grabbed from the current blog page into the labelarray. The next step for us would be to eliminate the duplicates from this labelArray.