Related Posts Script for Xtgem Blog (xtblog)

Related posts is one of pretty important section in a Blog. After visitor has finished reading the article, they can be engaged to stay longer in our Blog by providing similar articles after the post. And for xt blog or xtgem blog, we can easily add a related posts widget using some Javascript.

Update 09/5/2017
  • Fixed not showing the latest post.
  • Now the script is using pure Javascript without need of JQuery.


xtblog logo by weblogwap

Allright, if you want, you can use my related posts script I used on my xtgem site blog. Demo: http://unduhapp.wapgem.com.

This related posts script is using JQuery to make an AJAX call to the "related" page, manipulate the page called using Javascipt, and so on.

The script currently have a bug that it is not showing the latest post of the related articles in the list. I planned to fix it when I have a time in the future, so stay up to date to WeBlogWap.blogspot.com.

Related posts scripts in xt blog (Xtgem Blog) using Javascript and AJAX

1. Create a "related" page

The related page here will be used as a source of AJAX call to the related posts script. This page is actually just a normal html page in your xtgem site with blog function added. You can follow the following steps to create the related page:

  1. In your ROOT directory of your xtgem site, create a new html page and name the page to "related".
  2. Open the "related" page in code editor mode, then add this code after <body> tag and save it:
    <xt:blog tzone="0" format="Y-m-d" show_time="0" display="1" entries_per_page="50" comments_per_page="3" comments_sort="-1" display_limit="50" display_symbol="..." version="2" hide_tags="1" t_back_to_posts="" t_comments="" t_comments_empty="" t_post_a_comment="" t_name="" t_comment="" t_post="" t_tags="" t_search="" t_created="" t_showing_tagged_posts="" t_no_entries_found="" t_no_search_results_found="" t_show_all_comments="" t_see_parent_thread="" t_show_all_replies="" t_show_replies="" t_reply="" t_posting_as="" t_comments_login_required="" t_login="" t_signup="" t_confirm_email="" t_report_spam="" t_hidden_comment="" />
  3. Still in "related" file, now open it in building tools mode. Click "Options" to enter the file settings.
  4. Un-check all the include options:
    - Include "/_header" file in page header
    - Include "/_footer" file in page footer
    - Include "/global_stylesheet.css" file in page
    - Include "/xtgem_template.css" file in page

    Deleted <head> elements
    Edit "related" page again using code editor mode, and delete <head> element with it's content.

    Those steps above is necessary to make this related page as lightweight as possible so the AJAX call we use to this page later will be fast and less data.

  5. Check by visiting http://yourxtgemsite/related. If you did it right, you should see your xtblog post list with no header, no footer, and white plain without styling.

2. Add the HTML and Javascript code

Add the following html code in your xtblog.twig template file to where you want the related posts list to be appear. This must be placed in "entry" view or single post section inside the "{% block entry_post %}" section:

<!-- Start related posts script By Daryadi.S: http://weblogwap.blogspot.com -->
<div id="related-posts"><h3>Related Posts</h3><ul id="related-posts-ul"></ul></div>
<script>
var a, i, post, postTotal, rIndex, tag, tagsTotal, viewAll;
var relatedPosts = '';
var j = 1;
var limit = 5;
var allTags = '{% for tag in data.post.tags %}{{ tag.name }}{% if loop.last == false %},{% endif %}{% endfor %}';
if (allTags.match(/,/g)) {
	allTags = allTags.split(',');
	tagsTotal = allTags.length;
	rIndex = Math.floor( Math.random()*tagsTotal );
	tag = allTags[rIndex];
}
else {
	tag = allTags;
}
viewAll = '<li class="align-right"><a href="/index?__xtblog_tag='+tag+'" title="View all posts tagged '+tag+'">&#187; View all</a></li>';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
   		var items = this.responseText;
   		items = items.split('xt_item">');
      	postTotal = items.length;
      	if ( (postTotal-1) < limit ) {
      		limit = postTotal-1;
      	}
  		for (i=1; i<=limit; i++) {
        	var title = items[j].split('xt_heading">')[1].split('</span>')[0];
			var link = items[j].split('href="')[1].split('"')[0];
			link = link.replace('/related/', '/index/');
			var item = '<li><i class="fa fa-caret-right"></i> <a href="'+link+'" title="Read '+title+'">'+title+'</a></li>';
			relatedPosts = relatedPosts + item;
          	if (i == limit) {
          		relatedPosts = relatedPosts + viewAll;
          	}
          	j++;         	
    	}
      	document.getElementById('related-posts-ul').innerHTML = relatedPosts;
    }
}
xhttp.open("GET", "/related?__xtblog_tag="+tag, true);
xhttp.send();
</script>


The scripts more likely only work if you are using the default template file of xt blog, and your blog is located on your site homepage ("/index" file). If you have many elements changed in your xt blog template file or your blog is located on other page, you then need to change some parts of the script.

Comments on "Related Posts Script for Xtgem Blog (xtblog)"