Related Posts - Blogger - Integration - Widget

We have seen a glimpse of the code to accomplish the task of displaying related posts in blogger. But that is not a complete working one to directly plug into blogger and get going. It is a synopsis to make you understand the approach of created a related post widget for blogger. To integrate, we have to follow the approach given below.

1) Add the relevant code to the HEAD tag.

2) Create a post widget in blogger and add the required Javascript code.

Having said this, we should also convert some of our code before we put these things into blogger. Before you do anything, you will have to take a backup of your current HTML template in blogger. To do so, go to Layout -> Edit HTML -> Download Full Template. Take a copy of this and save it somewhere..(we might not need this..but keep your fingers crossed!)

Step1 :- Add the relevant code to HEAD tag.

Click on the 'Expand Widget Templates' checkbox. Search for </HEAD> and insert the following code just above it. This is shown below. (You have to include only the tags highlighted in green)

<script src='http://www.google.com/jsapi' type='text/javascript'/> <script type='text/javascript'>google.load(&quot;gdata&quot;, &quot;1.x&quot;, { packages : [&quot;blogger&quot;] }); </script> </head> => This is already available. Do not add it again.

Step2:- Create a post widget in blogger and add the required Javascript code

Find a '<b:widget' tag in the code and include this code just above one of them. This will bring our new element inside the blogger layout. We can then move it anywhere we need.

<b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'> <b:includable id='nextprev'> </b:includable> <b:includable id='backlinks' var='post'> </b:includable> <b:includable id='post' var='post'> </b:includable> <b:includable id='status-message'> </b:includable> <b:includable id='comment-form' var='post'>   <div class='comment-form'>     <a name='comment-form'/>     <h4 id='comment-post-message'><data:postCommentMsg/></h4>     <p><data:blogCommentMessage/></p>     <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>     <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>     <data:post.iframeColorizer/>   </div> </b:includable> <b:includable id='backlinkDeleteIcon' var='backlink'> </b:includable> <b:includable id='postQuickEdit' var='post'> </b:includable> <b:includable id='main'> <div class='widget-content'> <h5>Related Articles</h5> <div id='123' style='padding:15px;'/><br/> <h6>Widget customized by <a href='http://thinktibits.blogspot.com'>Yellowrose</a></h6> <script type='text/javascript'> function init2() { var finalurlarray = new Array(); function eliminateDuplicates(arr) {   var i,       len=arr.length,       out=[],       obj={};   for (i=0;i&lt;len;i++) {     obj[arr[i]]=0;   }   for (i in obj) {     out.push(i);   }   return out; } var finalurlarray1 = new Array(); var funcvar1=0; var bloggerService = new google.gdata.blogger.BloggerService(&#39;com.appspot.interactivesampler&#39;); var handleQueryResults = function(resultsFeedRoot) { var blogFeed = resultsFeedRoot.feed; var html,postTitle,entryUri; var postEntries = blogFeed.getEntries(); for (var i = 0; postEntry = postEntries[i]; i++) { postTitle = postEntry.getTitle().getText();          entryUri = postEntry.getHtmlLink().getHref(); html = &#39;&lt;a href= &#39;+entryUri+&#39;&gt;&#39;+ postTitle + &#39;&lt;/a&gt;&#39; + &#39;&lt;br&gt;&#39;; finalurlarray1.push(html); } funcvar1++; if (funcvar1 == filtArray.length) { var urlarrayfinal=eliminateDuplicates(finalurlarray1); for (var i = 0; i &lt; urlarrayfinal.length; i++){ document.getElementById(&quot;123&quot;).innerHTML += urlarrayfinal[i]; } } };         var handleError = function(error) { document.write(&quot;unable to load the related posts now&quot;); };               var labelArray = new 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> var filtArray=eliminateDuplicates(labelArray); var feedUri,query; for (var i = 0; i &lt; filtArray.length; i++){ feedUri = &#39;http://thinktibits.blogspot.com/feeds/posts/default/-/&#39; + filtArray [i]; query = new google.gdata.blogger.BlogPostQuery(feedUri); bloggerService.getBlogPostFeed(query, handleQueryResults, handleError); } } google.setOnLoadCallback(init2); </script> </div> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> </b:includable> <b:includable id='feedLinks'> </b:includable> <b:includable id='feedLinksBody' var='links'> </b:includable> <b:includable id='comments' var='post'> </b:includable> </b:widget>

You have to change the feedUri to point to your blogspot site. You can find a working demo of this here. This is just version 1 of my attempt to deliver a widget.The scope of customization on this is just unlimited and we do much more. (I will be dwelling more on this as well later).

For now, let us compare the performance of this widget with the one by Hoctro, on a performance wise.