October 06, 2020

Show Related Posts on Blogger Post

Do you host a blog at blogger and want to show related posts without using a widget? This post demonstrates how to show related posts on a blogger single post page.

Related Posts on Blogger Post

Showing related posts are helpful in a way when it comes to increase user engagement and user experience. Showing related posts may increase page visits if user finds something else related to current post or page he is on. This post demonstrates how to show related posts with thumbnails in blogger. 


How to Show Related Posts with Thumbnails in Blogger

You can show related posts in blogger with simple and easy steps. Follow these steps to show related post in blogger on post page:

  • Loop through all the labels of current post in view.
  • Call blogger API to get posts with same labels.
  • Prepare HTML of related post box and exclude the post in view.
  • Finally render the related posts on post page where you want to display them. 

Code to Fetch Related Posts from Blogger

The below code snippet will check if the current page is an item (post) then it loops through all the labels of current post. It then hits the blogger's feed URL to return JSON formatted posts of current label in loop. We also set the maximum number of posts to 6 so it returns no more than 6 posts for each label and then we pass a callback function which prepares a related posts list. 

After loop we declare two variables current_post_link and max_related_posts. The current_post_link will be used to exclude the current post from related posts list so we do not show the same post in view in related posts. Whereas max_related_posts is the number of related posts we want to show. Place the below code snippet where you want the related posts section to appear.

<b:if cond='data:blog.pageType == "item"'>
    <div class='related-posts'/>
    <b:loop values='data:post.labels' var='label'>
        <script defer='defer' expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=prepare_related_posts_list&max-results=6"' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>
        var current_post_link = '<data:post.url/>';
        var max_related_posts = 4;
    </script>
</b:if>
 

Prepare and Render Related Posts

Now we need the callback function that we passed to blogger API endpoint. This is what we need to implement in callback function: 

  • Before function declare two variables "related_posts" and "related_filled". The "related_posts" variable will hold the posts we need to render and "related_filled" will be used to avoid duplicated posts in related posts list. 
  • Set the posts data in a variable "posts".
  • Loop through each post and prepare JSON of single post containing the key values for "title", "image" and "URL".
  • Use another function get_single_post_link() to prepare of post.
  • Fetch HTML content of post and loop through all images in content. Set the first image found in content in JSON of single post.
  • Check if post is not added to related_posts array then add it to related_posts and and related_filled array.
  • Finally add the window load event listener and render the related posts using function render_related_posts(). 
<script type='text/javascript'>
//<![CDATA[
var related_posts = [];
var related_filled = [];
function prepare_related_posts_list( json ){
    let posts = json.feed.entry;
    posts.forEach(function(p, v){
        //-- Prepare the link of related post
        let p_link = get_single_post_link(p);
        let related_post = {
            title: p.title.$t,
            link: p_link,
            image: {
                el: "",
                src: ""
            }
        };
        
        //-- Get the html content of post that will be used to retrieve post image
        let content_html = new DOMParser().parseFromString(p.content.$t, 'text/html');
        let image = content_html.querySelector("img");
        //-- If image is found set the image src
        if (image instanceof HTMLImageElement) {
            related_post.image.el = image;
            related_post.image.src = image.src;
        }
        //-- If post link is not equal to current link and not already filled then add to list
        if (p_link != current_post_link && !related_filled.includes(p.title.$t)) {
            related_posts.push(related_post);
            related_filled.push(p.title.$t);
        }
    });
    //-- Finally print the related posts on after document has loaded
    window.addEventListener("load", function () {
        render_related_posts();
    });
}
//-- Function to prepare the post link in loop
function get_single_post_link(p) {
    var link = "javascript:void(0)";
    if ("link" in p) {
        for (let i = 0; i < p.link.length; i++) {
            if (p.link[i].type == "text/html" && p.link[i].rel == "alternate") {
                link = p.link[i].href;
                break;
            }
        }
    }

    return link;
}
//-- Function to print related post after document load
function render_related_posts() {
    if (related_posts.length) {
        var html = "";
        html += '<h3>Related Posts:</h3>';
        html += '<div class="row">';
        //-- If related posts list has reached the number of posts we need, break the loop
        for (let i = 0; i < related_posts.length; i++) {
            if (i >= max_related_posts)
                break;

            html += '<div class="col-xs-6">' +
                    '<div class="related-post">' +
                    '<div class="related-post-image">' +
                    '<a href="' + related_posts[i].link + '">' +
                    related_posts[i].image.el.outerHTML +
                    '</a>' +
                    '</div>' +
                    '<div class="related-post-title">' +
                    '<a href="' + related_posts[i].link + '">' + related_posts[i].title + '</a>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
        }
        html += '</div>';
        document.querySelector(".related-posts").innerHTML = html;
    }
}
//]]>
</script>

The demo of the code above can be seen below this post under related posts section.

Home