In the realm of blogging, showcasing a list of posts with similar labels or categories is a common practice to engage readers and facilitate easy navigation through related content.
While platforms like Google's Blogger offer built-in features for displaying post lists, they sometimes fall short when users switch domains or require more customization.
To address these limitations, we can implement a dynamic scripting solution that empowers bloggers to effortlessly generate post listings with enhanced features.
This blog post explores an innovative approach to displaying a dynamic list of recent posts from similar blogs within your Blogger template.
We'll delve into the script's functionality and guide you through its implementation for a more engaging user experience.
Understanding the Challenge:
The conventional Blogger listing script encounters limitations when using a custom domain purchased through "Bye Domain." This script relies on accessing the feed directly from Blogger's subdomain, causing errors when the domain is changed.
Our Solution: A Custom Script in the Blogger Template Header
This solution introduces a custom script placed within the Blogger template header (<head> section). Here's a breakdown of the script:
Function Creation:
The script defines a function named createScript. This function takes three parameters:
- labelPostListURL: The URL of the website you want to fetch posts from.
- labelPostListLabel: A label for the post list (e.g., "ServiceNow").
- labelPostListOrder: Determines the order of displaying posts ("desc" for descending, "asc" for ascending).
Script Element Creation:
<script>
// Create a function to create a script element with a specified level parameter
function showMyPosts(labelPostListURL, labelPostListLabel, labelPostListOrder) {
// Create a new script element
var script = document.createElement('script');
// Define the URL for the feed
var feedURL = `https://${labelPostListURL}/feeds/posts/summary/-/${labelPostListLabel}?max-results=150&alt=json-in-script&callback=recentpostslist`;
// Define the recentpostslist function based on labelPostListOrder
if (labelPostListOrder === 'desc') {
window.recentpostslist = function (json) {
var container = document.createElement('div');
container.className = 'postListDivTime';
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = json.feed.entry[i].link[j].href;
var entryTitle = json.feed.entry[i].title.$t;
var link = document.createElement('a');
link.className = 'postListDivCSS';
link.href = entryUrl;
link.target = '_blank';
link.textContent = entryTitle;
var paragraph = document.createElement('p');
paragraph.appendChild(link);
container.appendChild(paragraph);
}
document.body.appendChild(container);
};
} else if (labelPostListOrder === 'asc') {
window.recentpostslist = function (json) {
var container = document.createElement('div');
container.className = 'postListDivTime';
for (var i = json.feed.entry.length - 1; i >= 0; i--) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = json.feed.entry[i].link[j].href;
var entryTitle = json.feed.entry[i].title.$t;
var link = document.createElement('a');
link.className = 'postListDivCSS';
link.href = entryUrl;
link.target = '_blank';
link.textContent = entryTitle;
var paragraph = document.createElement('p');
paragraph.appendChild(link);
container.appendChild(paragraph);
}
document.body.appendChild(container);
};
}
// Set the script source to the feedURL
script.src = feedURL;
// Append the script element to the body of the HTML document
document.body.appendChild(script);
}
</script>
Inside the function, a new script element is created using document.createElement('script').
Feed URL Definition:
The script defines the feedURL using a template literal, incorporating the provided labelPostListURL. This URL points to the specific blog's feed where recent posts reside.
recentpostslist Function Definition:
Depending on the labelPostListOrder parameter, the script defines a function named recentpostslist. This function processes the retrieved JSON data containing post information.
Creating the Post List Container:
The recentpostslist function creates a container element (div) to hold the list of posts. This element is assigned a class name for styling purposes (postListDivTime).
Iterating Through Posts:
The function iterates through the retrieved posts using a loop.
Extracting Post Details:
Within the loop, it extracts the post's URL and title from the JSON data.
Creating Post Links:
The function creates anchor elements (<a>) for each post, setting the link (href) to the post's URL, the target (target) to _blank to open in a new tab, and the text content (textContent) to the post's title. Additionally, a class name (postListDivCSS) is assigned for styling.
Appending Links to Container:
Each created link is appended to a paragraph element (
), and all paragraphs are then added to the container element.
Appending Container to Document:
Finally, the complete container holding the list of posts is appended to the document body, making it visible on the webpage.
Setting Script Source:
The script element's src attribute is set to the feedURL, essentially defining the source for fetching post data.
Appending Script to Document:
The created script element is appended to the document body, allowing it to execute and retrieve the post information.
Implementing the Script in Blogger Posts
To utilize this script and display a list of recent posts from another website:
- Access the Blogger post where you want the list to appear.
- Navigate to the "Edit HTML" section.
- Locate the <head> section within the HTML code.
- Paste the entire script provided earlier within the <head> section.
Calling the createScript Function:
Within the same Blogger post (where you want the list to display), add another script element like this:
<script>
showMyPosts('www.indiantechnoera.in', 'ServiceNow', 'desc');
</script>
Replace the following in this script:
- 'www.indiantechnoera.in': Change this to the actual URL of the website you want to fetch posts from.
- 'ServiceNow': This is the label displayed for your post list. Customize it as needed.
- 'desc': This determines the order (descending in this case). Change it to 'asc' for ascending order.
Use code with caution.
Saving and Publishing
Once you've added both script elements, save the changes to your Blogger post and publish it live. Now, when visitors view the post, they'll see a dynamically generated list of recent posts from the website you specified, labeled accordingly and ordered based on your preference.