Dear Friend,
As far as I could tell, "Related Articles" Widget is my most successful hack I've done so far for the last two years on the internet. I have seen countless blogs employing this hack. Somebody even said that the hack leverages Blogger users to have the same capability as Wordpress users in that regards.
For this new and improved version, I use the more reliable Ajax Feed API from Google rather than using my own library code. Also, I have added code to eliminate redundant headlines so what you will see is a set of unique "related articles" headlines. I would like to thank Jackbook.com again to help improving the original hack. I've incorporated both fixes from him as well.
I'm going to show you how to add this
"Related Articles Widget" to your blog, with just
three simple steps!. If you're already installed either one or both of the earlier
"Blog List" or the
"Latest Posts" Ajax Feed widgets, you can
skip step 1 and 2, and just simply cut-and-paste the code from step 3 to your template!
Before installing, All I ask for is that you
must keep the credit
Widget by Hoctro, and not to get rid of it. After all, I spent lots of my personal time on weekends to write these widgets. I'm not asking for money, just a little recognition, so others will know where the widget comes from, and could install it too by following the link. Not including my credit on your blog is also a form of plagiarism, and I don't think you want your readers to label your blog as such.
1. Get the key from Google:
http://code.google.com/apis/ajaxfeeds/signup.html2. Follow the instructions from this article
Hacking Technique: How To Modify and add Widget to the Template, in particular section
C.1, and add this CSS style code to the header, right in front of the </head> tag. Remember to replace
YOUR-KEY text with the new key.
<script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>
3. Add this code to the widget list, from the Layout->HTML short form, following the instructions from this article
Hacking Technique: How To Modify and add Widget to the Template, in particular section
B.4.
<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='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</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='feedLinksBody' var='links'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Oct,2008********** -->
<!-- ***Related Articles by Labels Written by Hoctro- Take Four******* -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
<div class='widget-content'>
<h5>Related Articles</h5>
<div id='data2007'/><br/><br/>
<h6>Related Article Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-and-improved-related-articles.html'>Hoctro</a></u></h6>
<script type='text/javascript'>
// Incorporating modified by Jackbook to the next line, thank you very much.
var homeUrl = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 8;
var maxNumberOfLabels = 10;
var urlArray = new Array();
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 15;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 4;
</b:if>
var titleArray = new Array();
var titleTest = 0;
function relInitialize() {
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
// Do not add identical labels from posts
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
var url = homeUrl + 'feeds/posts/default/-/'
+ encodeURIComponent(textLabel);
var feed = new google.feeds.Feed(url);
feed.setNumEntries(maxNumberOfPostsPerLabel);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("data2007");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
titleTest = 0;
for (var i = 0; i < titleArray.length; i++)
if ( titleArray[i] == entry["title"] ) titleTest = 1;
if (titleTest == 0 ) {
titleArray.push(entry["title"]);
var div = document.createElement('div');
var a = document.createElement('a');
a.href = entry["link"];
// Adding an if statement to exclude current post.
// Addition from Jackbook.com. Thank you
if( a.href!=location.href ) {
var txt = document.createTextNode(entry["title"]);
a.appendChild(txt);
div.appendChild(a);
container.appendChild(div);
} // if not home page
}// if titleTest
} // for
}// if result is not error
}); // feed.load
numLabel++;
}
}
</b:loop>
</b:loop>
}
google.load("feeds", "1");
google.setOnLoadCallback(relInitialize);
</script>
</div>
<!--</b:if>-->
</b:includable>
</b:widget>
We're done! I have installed the new widget on my blog already for you to see.
Important features & notes:1. To set the maximum of headlines per label, change the number on this line (right now it's 4.)
var maxNumberOfPostsPerLabel = 4;2. To set the maximum of labels, change the number on this line (right now it's 10.)
var maxNumberOfLabels = 10;My experience using Labels is that you should try to minimize down each post to just two labels only, then in conjunction with the
maxNumberOfPostsPerLabel you will get your list to look more effective.
Until next time,
Hoctro.
Update:08 Jan 09: Happy New Year to my readers! Hajunik.com puts together a tutorial on how to add more formatting to the hack. It does look inpressive and seamlessly integrated into his blog theme. Please take a look at the tutorial at
Ajax Related Posts widget for Blogger
0 comments:
Post a Comment