Blogger Blog Feed to HTML Book; Useful for Recent Posts HTML backup and Searching Posts

Last updated on 25 Apr. 2024

This post is about the app/program, "Blogger Blog Feed to HTML Book" that I have published on https://bloggerfeedtobook.netlify.app/ . It should work with any Blogger blog. I have tested it with one of my Blogger blogs and some other Blogger blog. The associated source code is on Github. It should be easy to run the program on local computer by downloading the source code (HTML, CSS and JavaScript) and using a minimal web server like nginx to host the files. More on that is given later on in this post.

Contents

App/Program Usage

The app/program can be used in an easy way for:
  1. Getting HTML blog book of last published (recently published) x number of (upto 150 usually) posts of blog. This is a useful HTML backup of recently published posts. Note that Blogger backup/export backs up the whole blog and in XML format. I prefer to do whole blog export once in a while, and backup of recent posts regularly.
  2. Getting HTML blog book of posts published or updated in last y days: If the Updated in last y days specifies y as > 0 (as 3, for example), then posts published and/or updated in last y days, up to the max posts specified (or 25 if max posts is blank/0), is returned as a blog book. [Related post: Blogger feed request to get posts updated in last x days includes posts published but not updated in last x days] Note that search field has to be empty/blank in this case.
  3. Getting HTML blog book of x number of (upto 150 usually) posts of blog that match a search/query criteria. This is a convenient way of browsing through posts matching search criteria. Blogger dashboard search or blog search widget shows a list of matching posts (search widget shows initial content of matching posts), each of which have to be individually opened and viewed. This program's blog book is one HTML page having matching posts (upto a max. of 150 posts typically) and so is more convenient for browsing through the matching posts.
The above ways are the main ways in which I am currently using this program. I do find it to be useful for some of my needs.

More complicated ways of using the program would be to use "Full blog feed URL to be sent to blog server" field where the user would need to know what feed requests are supported by Blogger.

Beautification of initial part of output blog book can be easily done by saving the blog book as HTML and then editing it. The (table of) contents list for each post title can also be similarly edited. 

I use the program on my PC desktop and I think it should be usable on laptops and tablets. The program also works on mobile but if the output blogbook is large, the user may have to do lot of scrolling.

The user interface styling and error handling are somewhat minimal/not sophisticated as I did not want to invest too much time on this program.

Main Input Form

[On PC desktop/laptop, to open pic in larger resolution (if available), right-click on pic followed by open link (NOT image) in new tab/window. In new tab/window you may have to click on pic to zoom in.]



Form fields/elements

Note that query string parameters are supported to specify initial values of all input fields. Examples are provided at the end of this section.
  1. Blog address: Blog URL with protocol and hostname. If no protocol is specified the program appends https:// at the beginning. If / is not specified at end of field, the program appends it. Example value: https://raviswdev.blogspot.com/ . Query string parameter name: blog-address 
  2. Max posts: Maximum number of posts to be returned. It corresponds to max-results parameter used in the final URI sent to blog server. This field cannot be greater than 150. If the field is blank or 0, max-results is not specified and in this case, Blogger seems to return a maximum of 25 posts. Query string parameter name: max-posts 
  3. Search: This field corresponds to q parameter used in the final URI sent to blog server. Example values are:
    • react
    • react router
    • "react router"
    For more details and examples, see q parameter info. in Google Data API Protocol Reference (v2.0), Queries section. Query string parameter name: search 
  4. (Updated): This field provides two options of Updated (date) and Published (date) range specification. If Search field is non-empty (q parameter is specified in final URI) then the date range specification sent to blog server seems to get ignored. But if Search field is empty (q parameter is not specified) the date range specification is used by the blog server. Query string parameter name: last-days-type . Values can be 'published' or 'updated'.
  5. The last days field is related to above (Updated) date range field and has to be greater than 0 otherwise the date range is not specified. Query string parameter name: last-days-period 
  6. Full blog feed URI (encoded): User can use this field to ignore above fields and specify a raw blog feed request which is URL/URI encoded (escapes special characters). A simple example value: https://raviswdev.blogspot.com/feeds/posts/default/?max-results=2&alt=json-in-script&callback=handleFeed
    Note that the request has to have 'alt=json-in-script&callback=handleFeed' which is typically but not necessarily, the last part of the request. More examples . Query string parameter name: full-blog-feed-uri . As this parameter would typically have & characters in it which will be viewed as parameter end, the parameter value will have to be URL encoded. 
  7. Show Blog Book button: On clicking/touching this button, the input form data is picked up and some limited validated is done. If validation fails, the error is shown in Status field/element and command is aborted. If validation goes through, the feed request is sent to the blog server as the src attribute of a dynamically created script element. If the blog server responds with the expected data then a blogbook page is opened in a pop-up window where the blog book contents are dynamically added, replacing the initial placeholder content shown in that page.
  8. Status: Shows status of the command including error messages and loading (in progress) message.
  9. Final blog feed URI used: Shows the final blog feed URI request specified as src attribute of dynamically created script element which results in the blog server receiving the final blog feed URI request.
Examples of using query string to initialize fields to specific values:

Blog Book Page





The "Save Blogbook" button saves the blogbook shown in the page to a file specified by user on his/her device. The file is HTML only with image links being saved in the HTML file but not images themselves. Later the user can view the saved HTML file on his/her device by opening it in a browser.

Installing/Hosting the App/Program on Local Computer

I deliberately chose the simple platform of HTML, CSS and JavaScript only instead of using React or something similar as I wanted the program to be easy to deploy on platforms like Netlify, easy to install on local computer, and also easy to read and understand.

This app/program can be fully setup on local computer and used with a minimal web server like nginx. The files of this program can be downloaded from Github into appropriate nginx directory and/or nginx can be configured to use the directory having the downloaded files as the server root directory. For more on using nginx, please see my post: Running HTML, CSS and JavaScript programs that need a localhost web server hosting them, using very lightweight free nginx web server.

Easy to Read and Understand App/Program

The app/program being easy to read and understand may help interested persons to easily modify the program to add more features or to fix bugs. If I had used React, it would have put in a limitation that developers would need to know React if they wanted to modify the program. I felt that React was not necessary for this program and would be an overkill.

App on Mobile - Screenshots

These screenshots were taken on a later version of the program with some small changes like favicon being added. The first set below is screenshots of app on my Samsung M21 mobile:







The second set below is using mobile simulator of Chrome DevTools for iPhone SE:





 











Comments

Post a Comment

Archive