October 06, 2020

Show Related Posts on Blogger Post

Displaying a related posts section in blogger can increase user engagement and reduce the bounce rate. This post demonstrates how to add blogger related posts using JavaScript and blogger JSON feeds.

Related Posts on Blogger Post

Showing related posts are helpful in a way when it comes to increasing user engagement, enhance user experience and reduce bounce rate. Learn in this post how to display blogger related posts with thumbnails in blogger with code examples.

 

How to Show Related Posts with Thumbnails in Blogger

It is very simple and easy to show related posts in blogger in few steps with a little knowledge of JavaScript and JSON feeds. Following are the involved 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.

Step 1: Fetch Related Posts by Labels in 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 section. Whereas max_related_posts is the number of related posts we want to show. Place the below code snippet where you want the blogger 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>
 

Step 2: Prepare and Display Related Posts Section

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 related_posts and related_filled variables. The related_posts variable will hold the posts we need to render and related_filled will be used to avoid duplicate 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 related_filled array.
  • Finally add the window load event listener and render the related posts using render_related_posts() function.
<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>

Now we have a functional blogger related posts section which will appear on a post page of blogger and display related posts with thumbnails associated with labels of current post. The working example of this code can be seen below this post under related posts section.

Home