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.

30 comments:

  1. Hello, I want to limit the entries to 8. How can I do that?

    ReplyDelete
  2. @ David.

    That is relatively simple. You can find this line of code

    for (var i = 0; i < urlarrayfinal.length; i++){
    document.getElementById("123").innerHTML += urlarrayfinal[i];
    }

    and change urlarrayfinal.length to 8. That would retrive the first eight elements of the result array.

    ReplyDelete
  3. if i'm not false, in case for own blog we can't write it without
    http://thinktibits.blogspot.com/feeds/posts/default/-/
    may be...:P

    ReplyDelete
  4. @Beben

    You will have to replace it with your blog feed URL.

    ReplyDelete
  5. yes, i mean we can write like
    /feeds/posts/default/-/
    without url own blog...
    btw if want show 10, how do that...
    for (var i = 0; i < urlarrayfinal.length; i++){
    be...
    for (var i = 0; i < urlarrayfinal.length; 10){ <--- like this my friend...i dont understand :D

    ReplyDelete
  6. hehehe...i'll not careful...sorry
    its a good look now...
    promote this posted...;)
    aw aw aw

    ReplyDelete
  7. @Beben, thanks it motivates.

    You can just break out of the loop when i equals 10. For example,

    for (var i = 0; i < urlarrayfinal.length; i++){
    document.getElementById("123").innerHTML += urlarrayfinal[i];
    if (i==10)
    {
    break;
    }
    }

    ReplyDelete
  8. Just when I was answering this, found a small correction which is very unlikely to create any problems, but good to incorporate.

    var handleError = function(error) {
    document.write("unable to load the related posts now");
    };

    this needs to be replaced with

    var handleError = function(error) {
    };

    so that entire content won't get overwritten.

    ReplyDelete
  9. weks !@#$%^...i'll writed like it bro...and that worked...it never mind bro?

    for (var i = 0; i < urlarrayfinal.length; i++){
    document.getElementById("123").innerHTML += urlarrayfinal[i];
    be...
    for (var i = 0; i < 10; i++){
    document.getElementById("123").innerHTML += urlarrayfinal[i];

    ReplyDelete
  10. hmmm...i changes like what you say
    for (var i = 0; i < urlarrayfinal.length; i++){
    document.getElementById("123").innerHTML += urlarrayfinal[i];
    if (i==10)
    {
    break;
    }
    }
    its instead not working :(...
    i'll change anymore...hohohoho
    i am just user not understand javascript...:">

    ReplyDelete
  11. for (var i = 0; i < 10; i++){
    document.getElementById("123").innerHTML += urlarrayfinal[i];

    this is also fine.

    Can't understand why the break stuff isn't working for you though..

    ReplyDelete
  12. For my blog, I have give it like this

    if(i==25) {
    break;
    }
    and it works..:(

    ReplyDelete
  13. hu`uh...my template little unique...:D
    never mind...thanks...

    ReplyDelete
  14. hmmmm...i have found the trouble...
    cek your first xample
    urlarrayfinal[i];
    if (i==10)
    {
    break;
    and next you writed...
    if(i==25) {
    break;
    }
    and it works..:(
    you forget { to first navigated<--- hihihihi

    ReplyDelete
  15. { or } ... hauahuhahauha
    forget that

    ReplyDelete
  16. i think its the trouble...
    if(i==25)
    sometimes any template can't prase
    ==
    and for dissolve it we just change writing in javascript...
    <script type='text/javascript'>
    //<![CDATA[
    content heres
    //]]>
    </script>
    that's make script writing a HTML file...i am just now
    thanks ^^

    ReplyDelete
  17. ugh?@ i have a new 'blog post' widget in my page elements.. is this correct? and i cant remove the 'widgets by Yellowrose'? lol, ;p

    ReplyDelete
  18. @Astried

    Just find that word and replace it with your name :)

    ReplyDelete
  19. Thanks for this widget, and the instructions! :0) I was able to get it working for me no problem, which is more than I can say for a couple others with similar functions...

    I do have a question though, about how it works. I just started blogging, so it shows all three of my current posts as "related" right now. Once I have written more though, how do I choose which posts appear as "related" to each one? Will it just automatically pick the most recent posts as being related? Or is there a way to select the ones I want, to go with each post (since they won't necessarily be "related" to one another...)

    ReplyDelete
  20. @Katie,

    I just visited your blog. All the blog posts are related by the labels you use to describe them..If I get you right, are you after a sorting on the labels by timestamp?

    ReplyDelete
  21. Ah, that makes sense...

    Right now my labels are listed by frequency, though they each only appear once so far. I wasn't trying to sort by timestamp, but was just wondering how to keep posts that are actually related (by content) together.

    If they will be grouped by label though, that solves the problem. :0)

    ReplyDelete
  22. yeah, they are grouped by labels. I saw your blog, it loads incredibly fast in my PC.(Firefox 4)

    ReplyDelete
  23. Please help!!

    I am completely unable to access my blog now, for some reason! It loads the page fine then redirects to a page that simply says "unable to load the related posts now"... Any idea why?

    (Sorry, I know nothing about HTML...)

    ReplyDelete
  24. @Katie,

    This may happen when Google goes down for a moment. It should work fine after. Have you given labels for your posts? If you are not keen to get this message, you can remove this line of code;

    document.write("unable to load the related posts now");

    Hope this helps.

    ReplyDelete
  25. It has been like this for over a month... I have been busy working on my thesis though, so I haven't been posting. I can't even get into it long enough to remove any code... :0(

    ReplyDelete
  26. @Katie, it works on individual blog posts on your site when I checked earlier today :)..it is just one line that needs to be removed...

    ReplyDelete
  27. ya its a gud widget but it fails 2 work in ie.how 2 splve that

    ReplyDelete
  28. @Mux99

    Why? What error you are getting? it works for me in IE too

    ReplyDelete
  29. i have just do this.. but somehow,, i need to remove it back.. how ?

    ReplyDelete
  30. @Aiman..

    What do you want to remove? Entire related post widget? or customize it?

    ReplyDelete