How to Add a Comment Widget to Blogger

Blogger already has comments, so be clear on what you are replacing

Every Blogger theme ships with a comment block, drawn by the same Blog widget that draws your posts. Blogger's layout data tags list allowComments, numComments and addCommentUrl beside the post title and body, which tells you how deep the native form sits: it is part of the theme, not a feature bolted on top. Restyling it means editing template code either way.

People replace it to moderate several sites in one place, to lose a comment box that looks like the year the theme was written, or to keep one comment style across a blog and whatever else they publish. Nobody should expect a migration: comments posted through Blogger's form stay in Blogger, and a new widget starts empty on every post.

One thing works in your favor. BootSignal comments ask the visitor to sign in with Google, and on a Google-run blogging platform most of your readers arrive signed in already.

See the thread before you open the theme editor

Two routes in, and what each one costs you

Blogger gives you three places to paste HTML, and only one of them puts a thread under a post. Pick the row that matches what you actually want before you start clicking.

None of this is gated behind an upgrade: Layout > Add a Gadget, Theme > Edit HTML and Theme > Backup all appear in Blogger's help pages with no paid tier attached. Google publishes no Blogger pricing page, so read that as nothing standing in your way rather than a quotable promise; the only money blogger.com mentions is buying a custom domain instead of a blogspot.com one. The paid part here is BootSignal, priced further down.

Route A: the gadget, for a sidebar thread in five minutes

1. Register the blogspot address, or the domain that replaced it

   A Blogger blog lives at yourname.blogspot.com from the day it is created, and it stays there unless somebody attaches a domain of their own under Settings > Publishing > Custom domain, after which the blogspot address forwards to that domain instead of serving the blog itself. Blogger's note on that screen is that the forward takes a while to come into effect. So open your BootSignal site settings and add whichever hostname a live post shows in the address bar, plus the blogspot one alongside it if the switch is recent enough that old links still land on it. Country-code spellings need no entry of their own: yourname.blogspot.co.uk and its siblings answer with a redirect to the .com address, so a reader in any country arrives on the hostname you registered. What comes back is a site id, and that id is the whole of what you type into Blogger; the widget matches location.hostname against the list behind it and draws nothing anywhere else.

2. Add the HTML/JavaScript gadget

   Sign in to Blogger. Choose the blog to update. In the left menu, click Layout. In the area you want to modify, click Add a Gadget. In the window that opens, choose HTML/JavaScript and click Add. The gadget has exactly two fields, a title and a content box. Leave the title empty unless you want a heading above the thread, paste both lines below into the content box, and at the bottom left click Save.

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="en" defer></script>
   <div data-bootsignal="comments" data-thread-id="blogger-sidebar"></div>

   Copy

3. Open the live blog and look at it

   The gadget renders where its layout section sits. Put it in the sidebar and the thread is in the sidebar, on every page, and it is one shared conversation rather than one per post: the data-thread-id you pasted is a single fixed key. That is the honest limit of this route. It suits a guestbook-shaped thread, and it is not what a reader means by commenting on a post.

Route B: a real thread under every post

1. Open the theme editor

   Sign in to Blogger. Choose the blog to update. In the left menu, click Theme. Under My theme, click More, then Edit HTML. You are now looking at the whole template in one text box, which is why you downloaded the backup.

2. Find the Blog widget and the post body tag

   Look for the b:widget tag with type='Blog', conventionally id='Blog1'. Every Blogger widget has one includable with id='main', and official themes split the post markup into a second includable (commonly id='post') that main pulls in with b:include. You do not have to follow that chain. Search the file for <data:post.body/>, documented as the content of the post. That tag is your anchor.

3. Paste the mount immediately after the post body

   Everything between the b:if tags renders on individual post pages only, since data:blog.pageType is documented as one of 'item', 'archive' or 'index'. Blogger writes attribute quotes XML-escaped, which is why the condition reads "item", and that is Blogger's own example rather than a workaround. The expr: prefix is how a data tag reaches an attribute value instead of printing as content, and data:post.id gives each post its own thread key. data:post.url works too, with one consequence: change a permalink later and the conversation stays behind under the old key.

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div data-bootsignal='comments' expr:data-thread-id='data:post.id'></div>
   </b:if>

   Copy

4. Add the loader once, near the end of the template

   The loader belongs anywhere that runs on every page, and just before </body> in the same file is the least surprising place. Add five more mounts next year and this stays the only script tag in the template. The file is XML-shaped, so give defer an explicit value and close every tag you open.

   <script src='https://bootsignal.com/bootsignal.js'
           data-site-id='YOUR_SITE_ID' data-lang='en' defer='defer'></script>

   Copy

5. Save, then check a published post

   Click Save, open a real post on the live blog, and scroll past the body. Do not judge it from the theme preview: that is Blogger rendering inside its own editor, not the page your readers get, and Blogger Help does not document how third-party scripts behave there.

Turn Blogger's own comment form off

Leave both running and every post ends with two comment boxes. Readers pick one at random, the conversation splits, and you answer in two places. Decide which one wins before the new widget goes live.

There are two switches. The blog-wide one lives on Blogger's Settings screen, in the group covering comments; Blogger Help's post editor article does not document those labels, so read what is on your screen rather than a label copied out of a tutorial, this one included. The theme-side switch is the certain one, and you are already in the right file: inside the Blog widget the native comment section is pulled in with b:include. Fence that include in a b:if that never fires, or delete the line, and the form leaves the page.

Per post, themes typically gate the native form on data:post.allowComments, so switching comments off for one post hides the form there and nowhere else. Whichever switch you use, the block you remove is the block that was drawing your existing comments: they stay stored in Blogger and stop appearing on the page.

Where Blogger installs actually go wrong

Mixed content, which Google treats as a hard failure

The wording is Google's: mixed content errors happen when a page downloads its initial HTML securely over HTTPS but then loads follow-up content over insecure HTTP, which "will degrade both HTTPS security and the user experience of your blog." The prescribed fix is bisection: remove your non-Google gadgets, check the blog, and re-add them one at a time until the offender identifies itself. The BootSignal loader and everything it fetches are HTTPS only, so if your blog already throws these warnings, clear them first or you will spend an afternoon blaming the new widget.

The save that refuses to save

Blogger's theme is its own XML-style tag language: b:section, b:widget, b:includable, b:include, b:if, b:loop, with XML-escaped attribute values. The practical consequence is that a pasted script carrying raw <, & or && can stop the file from saving. Blogger Help documents neither this failure mode nor any CDATA requirement, so treat it as a suspect rather than a rule: if Save refuses and the editor points near your paste, those characters are where to look. Neither snippet here contains any.

The hostname the widget checks

If the mount renders but no thread loads, or sign-in bounces, check the domain first. The widget answers only on hostnames registered to your site id, and Google sign-in checks the page origin, so yourname.blogspot.com and yourname.com are two registrations rather than one blog with two names. Check on a phone too: b:widget carries a mobile attribute beside pageType, and a theme can show a widget on desktop and drop it on a small screen.

Why the bill does not move when a post takes off

BootSignal is $20 per month or $200 per year, per registered domain. Every widget in the catalog is included, the ones you add next year too, and nothing in the price is tied to pageviews or comment volume. That matters more on Blogger than most places: a blogspot post that gets picked up somewhere can go from forty readers a day to forty thousand for a week, and traffic-priced comments choose exactly that week to get expensive. A second blog on its own address is a second registration, added from the dashboard.

The catalog runs to 31 paid widgets plus 31 free browser tools, and the pricing page lists which is which. Priced comparisons against other hosted comment systems live in the alternatives section, because those numbers move and a stale one is worse than none.

One more line while the theme file is open

The loader you pasted powers every other BootSignal widget, so the second one costs a single div. On a Blogger post the obvious companion is a view counter, which takes a thread id the same way and can share the post key.

<div data-bootsignal='viewcount' expr:data-thread-id='data:post.id'></div>

Before you close the editor, download the theme backup again, now that it holds your edits, and drop both snippets and your site id into a text file you keep with your blog notes. The next time you change themes Blogger replaces the HTML and both mounts go with it, and with that file open, putting them back takes two minutes instead of an evening rereading this page.