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