Blogger Related Posts

Blogger Related Posts is a plugin that easily generates related posts for Blogger using an enhanced algorithm based on date or relevance. Live Demo →

Features

• Easy to use: Just include the script and call the init() method — no setup hassle.
• Customizable: Style and configure related posts via options and data attributes.
• Lightweight: Minimal footprint with zero dependencies.
• Lazy loading: Loads related posts efficiently using IntersectionObserver.
• Shuffle algorithm: Randomize the order of related posts using a shuffle algorithm.
• YouTube integration: Automatically retrieves video thumbnails from YouTube.
• Always relevant: Generates related content even when labels are missing.

Requirements

• The blog must be public and have feeds enabled.

Installation

npm

npm i blogger-related-posts

cdn

<script src="https://cdn.jsdelivr.net/npm/blogger-related-posts@1/dist/main.min.js"></script>

How to use

You can use blogger-related-posts as an ES6 module or as a global script. For example:

import BloggerRelated from 'blogger-related-posts'

new BloggerRelated().init()

If you are using it as a global script, you can access it via the BloggerRelated global variable:

new BloggerRelated().init()

if you want to run JavaScript code after the related posts are generated, you can use the init method, which returns a promise that resolves when the related posts are ready:

new BloggerRelated().init().then(() => {
  // Your code here
})

Now, you need create a container for the related posts (with the id blog-related by default). For example:

<div id="blog-related"></div>

Options

You can customize blogger-related-posts using the following options:

Option	Type	Description	Default
relatedSelector	String	Selector for the related posts container	#blog-related
template	String	Template for the related posts	See defaults.js
textOnlyTemplate	String	Template for the related posts without image	null
defaultImage	String	Default image for the related posts	''
directory	String	Directory for the related posts	summary
imageParams	String	Image parameters for the related posts	s120-c
maxResults	Number	Maximum number of related posts	5
observer	Boolean	Use IntersectionObserver for lazy loading	true
orderby	String	Order by relevance or date	relevance
postId	Number	Post ID for the current post	0
postTitle	String	Post title for the current post	document.title
rootMargin	String	Root margin for the IntersectionObserver	200px
shuffleLevel	Number	Shuffle level for the related posts	5
summaryLength	Number	Maximum length of the summary	120
tags	Array	Tags for the related posts	[]
ytThumbnail	String	YouTube thumbnail type	mqdefault

For example, to customize the number of visible pagination links and disable update checking:

new BloggerRelated({
  maxResults: 10,
  tags: ['tag1', 'tag2']
}).init()

Additionally, you can configure the instance in the HTML using data-* attributes on the container. For example:

<div id="blog-related" data-max-results="10" data-tags='["tag1", "tag2"]'></div>

Templating

These elements are used in the HTML of the templates and return the corresponding value:

Element	Description
{postId}	Entry ID
{title}	Entry title
{published}	Entry publication date
{summary}	Entry summary
{postUrl}	Entry URL
{authorImage}	Entry author's image
{authorName}	Entry author's name
{authorUrl}	Entry author's URL
{featuredImage}	Entry featured image

When writing the template, you can include these elements in the HTML. For example:

<a href="{postUrl}">
  <img src="{featuredImage}" alt="{title}" />
  <h2>{title}</h2>
  <p>{summary}</p>
  <p>By {authorName}</p>
  <p>Published on {published}</p>
</a>

Methods

All methods are available through the instance of BloggerRelated:

Method	Description	Returns
init()	Initializes the related posts	Promise

Supporting

If you want to help me keep this and other related projects always up to date, you can buy me a coffee ☕. I will be very grateful 👏.

License

blogger-related-posts is licensed under the MIT License