I have visited many blog sites and most of them have "Related Posts" or "You may also like - " section for visitors who like to discover more related articles or stories. I am one of those visitors who likes to find out more interesting posts which are related to the original article I have read. Indeed, having related posts section will increase your exposures of your site. That is no doubt about it.
Unfortunately, I didn't have this feature on my site since I started to customise it. Of course I then started to do some research about building a "Related Posts" widget for Blogger. Obviously, there are lots of articles talking about "adding" related posts widget to your Blogger site but not many of them have detailed explanations. Well, fortunately some of them guided me to create this jQuery plugin.
So first of all, what does related posts mean? Are they related to the title of the original article? Or are they related to the category of the original post? Or are they related to the author's posts? Well, I would answer yes to all of them. You may have other supportive answers too.
In this plugin, I find related posts based on the current article's "labels" via the Blogger's RSS feed. So you need to label your article in order to make this plugin work. Since the RSS feed provides all information I needed, I just need to extract and parse the data to what I need for "related posts". So what do I need from the RSS feed?
The post id or labels of current article
The labels of each article
The URL link of each article
The title of each article
The thumbnail link of each article
Luckily Google provides a comprehensive documentation for its data APIs for Blogger developers so if you want to dig more information out, just pay a visit to here.
Anyway, the concept is to use the labels of current article to find related posts and the post id or article link as identifier to exclude current article from the collection of related posts. When the labels are retrieved, then we start to find and collect posts whose labels contain the original article's labels. Finally, we output these collected posts to the site. Here is the source code of this plugin.
(function($){$.fn.relatedPosts=function(config){varme=this,blogId,postId;varsettings=$.extend(true,{url:'',postId:'',labels:[],title:'Related Posts: ',itemClass:'related_item',wrapperClass:'related_items_wapper',titleClass:'title',shuffle:true,thumbUsePost:true,thumbWidth:100,thumbHeight:75,maxPosts:6},config);if(!$.isArray(settings.labels)){settings.labels=settings.labels.trim().split(',');}returninit();functioninit(){$.ajax({url:settings.url+'/feeds/posts/default?alt=json&max-results=500',type:'get',dataType:"jsonp",cache:true,success:function(data){// get the blog feed idblogId=data.feed.id.$t;if(settings.postId!==''){// get the current post idpostId=blogId+'.post-'+settings.postId;}// get related postsvarposts=findRelatedPosts(data.feed.entry);// add section titleme.append($('<h2/>').text(settings.title));varwrapper=$('<div/>',{'class':settings.wrapperClass});// construct the outputfor(vari=0;i<posts.length;i++){varentry=posts[i];varhref=getLink(entry);// the linkvarlink=$('<a/>',{'href':href});// the thumbnailvarthumb=findThumbnail(entry,entry.title.$t);// the post titlevarpTitle=$('<div/>',{'class':settings.titleClass});// the item blockvardiv=$('<div/>',{'class':settings.itemClass});// add thumbnaildiv.append(thumb);// wrap the linkthumb.wrap(link);// add post titlediv.append(pTitle);pTitle.append(link.text(entry.title.$t));// add the item blockwrapper.append(div);div.click(function(){window.location=href;})}me.append(wrapper);// clear the layoutme.append('<div style="clear:both;"></div>');}});}// gets the entry linkfunctiongetLink(entry){varhref='#';$.each(entry.link,function(i,v){if(v.rel=='alternate'){href=v.href;returnfalse;};});returnhref;}// find related entriesfunctionfindRelatedPosts(entries){varposts=[];varcats=settings.labels;for(vari=0;i<entries.length;i++){if(!matchCurrentPost(entries[i])){if(matchCategory(entries[i],cats)){posts.push(entries[i]);}}}// shuffle arrayif(settings.shuffle){posts.sort(function(){return0.5-Math.random()});}returnposts.slice(0,settings.maxPosts);}functionfindThumbnail(entry,title){if(settings.thumbUsePost){if(entry.content){vardiv=$('<div/>').html(entry.content.$t);varimgs=div.find('img');if(imgs.length>0){return$('<img/>',{'src':imgs[0].src,'alt':imgs[0].alt,'title':title,'width':settings.thumbWidth,'height':settings.thumbHeight});}}}else{return$('<img/>',{'src':entry.media$thumbnail.url,'title':title,'alt':title,'width':entry.media$thumbnail.width,'height':entry.media$thumbnail.height});}}functionmatchCurrentPost(entry){varmatch=false;if(postId){varid=entry.id.$tmatch=(id==postId);}else{varhref=location.href.replace(location.hash,'');href=href.split('?')[0].toLowerCase();$.each(entry.link,function(i,v){if(v.rel=='alternate'){if(v.href.toLowerCase()==href){match=true;returnfalse;}}});}returnmatch;}// find any matched categoryfunctionmatchCategory(entry,tags){if(entry.category){for(vari=0;i<entry.category.length;i++){vartag=entry.category[i].term;if($.inArray(tag,tags)>=0){returntrue;}}}returnfalse;}};})(jQuery);
You may notice that I use the url /feeds/posts/default instead of /feeds/posts/summary. If I use summary, then I cannot extract the original images for thumbnails. Also if the images of the article were not uploaded via Blogger then you don't have the thumbnail link from the feed. Therefore the most secure way is use the original image link from the article itself.
So how can I use this widget?
There are 4 key factors you need to do:
Make sure you have jQuery library loaded
Make sure you have the plugin placed after the jQuery library link
Place the div container to the place you want to show (usually we place it at the end of the article)
Call the plugin when the document is ready
Let's get started and we only need 3 steps to make it work
1. Place the code to the section you want to show the related posts
Below is the code you need to put to the place you want to show on your page
<b:ifcond='data:blog.pageType == "item"'><!-- related posts --><divid='related_posts'></div><script>varlabels='<b:loopvalues='data:post.labels'var='label'><data:label.name/><b:ifcond='data:label.isLast != "true"'>,</b:if></b:loop>';</script></b:if>
First you need to open your HTML template editor and search for
<divclass='post-footer'></div>
if you cannot find above, then we need to find below text
<b:includableid='post'var='post'>
when you found above part, you need to scroll down until you see
</b:includable>
when you see it, place the sample code above it.
2. Place the CSS code to your skin
Search the text below in your HTML template editor
Search the text below in your HTML template editor
</body>
then place the code below above
<!--commentoutbelowifyouhavejQuerylibraryloadedalready--><scriptsrc='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><scriptsrc='https://dl.dropboxusercontent.com/u/99319532/Blogger/host/related_posts.js'/><script>// related postsif($('#related_posts').length>0){$('#related_posts').relatedPosts({labels:labels,title:'You may also like -'});};<script/>
Now, you should be able to see your related post on your page. You can tweak the query to search articles related to the author or give it a date range. If you don't know how to do it, just leave a comment and I will help you. If you have other suggestions or ideas, please also leave your comment.
The standard paragraphs Welcome to this demo page! Here, you’ll get an exclusive preview of our cutting-edge platform designed to revolutionise your digital experience. Our...