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 is helpful in a way when it comes to increasing user engagement, enhancing user experience and reducing 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 a few steps with a little knowledge of JavaScript and JSON feeds. The following are the involved steps to show related posts in blogger on a post page:

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

Step 1: Fetch Related Posts by Labels in Blogger

The code snippet below will check if the current page is an item (post), and then it loops through all the labels of the current post. It then hits the blogger's feed URL to return JSON-formatted posts of the current label in a 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 the 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 the related posts list, so we do not show the same post in view in the related posts section. Whereas max_related_posts is the number of related posts we want to show. Place the code snippet below 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 the blogger API endpoint. This is what we need to implement in a callback function:

  • Before the 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 the related posts list.
  • Set the posts' data in a variable "posts".
  • Loop through each post and prepare a JSON of a single post containing the key values for "title", "image" and "URL".
  • Use another function get_single_post_link(), to prepare the post.
  • Fetch the HTML content of the post and loop through all images in the content. Set the first image found in the content in JSON of a single post.
  • Check if the post is not added to the 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 the 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 that will appear on a post page of blogger and display related posts with thumbnails associated with labels of the current post. The working example of this code can be seen below this post under the related posts section.

Home