Adding the Boostpost Widget to Blogger

So the easy part is getting the Boostpost widget code. To do that, all you need to do is go over to http://www.boostpost.com/widget.php. Once there, you are presented with a bunch of options. You can take the time to learn each of them, or you can jump right in and click the button marked "Create Widget". This will result in a fully functional Boostpost widget that you can integrate anywhere, including your Blogger blog.

With the fully functional widget code present in the textbox, you are now ready to perform a basic integration with your Blogger blog. The first thing to do is to highlight all the text in the textbox, then right click on it and choose Copy.

With the code now copied to your system's clipboard, its time to head over to Blogger.com. I find it is much easier to do this if I open a new browser window, because we may choose to copy the widget code over a couple of times until we get it just right. In your new browser window, navigate to Blogger.com, and go to your dashboard.

To perform a basic integration with your Blogger.com blog, click on the link in your blog's dashboard which reads "Layout". This will take you to a screen which lays out the basic structure of your blog in a visual sense. If your dashboard does not contain a "layout" link, you may need to update your blog to a more current template. With an older template you can still integrate the Boostpost widget, but for now we are going to focus on the new Blogger template.

From the "Edit Layout" screen, click one of the links whichs reads "Add a Gadget". A window will open, and in this window, look for a gadget called "HTML/Javascript". It will likely be right there on the main page. If you click on the "plus" icon to add the gadget, you will be taken to a screen with the title "Configure HTML/Javascript". Leave the textbox beneath "Title" blank, and in the textbox beneath "Content" right click and choose Paste. This will add your Boostpost Widget code to the "Configure HTML/Javascript" editor. Click the Save button to save the code and close the window.

Now you should see a new Gadget in your Edit Layout Screen with the title "HTML/Javascript". Drag this gadget so it is placed underneath the Gadget called "Blog Posts".

Once you save the updates to your blog's layout, a link will appear inviting you to "View blog". Click it and take a look. The result should be that the Boostpost Widget appears as a seamless part of your blog. Your background colors are the background colors for the Boostpost Widget.

All is fine and dandy, with one minor problem: the Boostpost Widget appears in your blog, but after the comments section. For some bloggers, this may be preferred. But for my blog, I would rather have the Boostpost Widget appear under the post and above the comments. That way, no matter how many comments my blog gets, all my readers can see how the article ranks on the social networks I've selected for the widget.

Sometimes getting to the good stuff takes more work. It seems to me that it would be easy enough for Blogger to make it simple to add a gadget between the post and comments section. But they haven't exposed this functionality, so we'll have to improvise a little.

Return to your Blogger.com dashboard, and click on the "Layout" link again. If the HTML/Javascript gadget is still present, click on the "Edit" link for it, and in the window which appears choose "Remove". We will be adding the widget at the template level, and will no longer need the widget code in a Blogger gadget.

Now back on the "Edit Layout" screen, click on the link called "Edit HTML" at the top of the page. Beside the heading "Edit Template", there is a check box titled "Expand Widget Templates". Make sure it is checked. In the textbox under the title "Edit Template", look for the line "<data:post.body/>" (without the quotation marks). An easy way to do this is to press CTRL+f and type let the browser do the searching for you.

Once you have found that code, place your cursor at the end of the line and hit enter.
Add the following code:

<div>

At that insertion point, paste your widget code.

Add the following code:

</div>

Press Save, and then view your blog. Do you see the difference? Now the Boostpost Widget appears immediately after your post, but before your comments! And if you see 2 instances of the Boostpost Widget, please make sure you removed the HTML/Javascript gadget.

To this point, you have integrated the Boostpost Widget so it appears as a seamless part of your Blogger.com blogs. But for some, it's a little too seamless. Yes, we want to display the Boostpost Widget on individual blog posts, but with our current level of integration the Boostpost Widget will also appear on the blog's main page, where individual blog postings are shown as summaries.

To restrict the Boostpost Widget to only be shown on an actual blog post page, we need to get our hands dirty again in the blog template. Return to your blog's dashboard, then choose the "Layout" link. At the top of the "Edit Layout" page, click on the link marked "Edit HTML". In the textbox under "Edit Template", do a search for <data:post.body/>. At the end of the line, press Enter.

Add the following code:

<b:if cond='data:blog.pageType == "item"'>

Now go to the code you entered before called </div>. Press enter after that code, then enter:

</b:if>

Save your template, and view your blog again. Now if you go to the main page, you will not see the Boostpost Widget. But if you go to an individual blog posting, it will be there, just as you would expect.

Now you have a fully integrated Boostpost Widget. It looks like you coded it yourself, and to a certain level that's because you did!