How to add Tweet, +1 and Facebook Like buttons to Blogger

First, generate the code for the buttons you need:

  • 👻 This domain switched off its wifi for good.
  • 👻 This page moved out and left no forwarding address. (preferably HTML5; if you want xFBML, add xmlns='http://ogp.me/ns/fb#' xmlns:fb='http://ogp.me/ns/fb#' to your HTML)
  • 👻 RIP – this server didn’t even survive its own hosting.

Now go to Blog settings > Design > Page Elements and add a custom html/javascript widget. Paste into it all the JavaScript snippets you got when generating the buttons. If you can’t add anything there, you have the wrong template.

The rest of the guide is inside

This happens when the template doesn’t come directly from Blogger. In that case you have to switch to a Blogger template, set it up there, then upload a backup of the old one and confirm that you want to keep the widgets. Once added, it might look something like this:


Inserting JS in Blogger

Then just switch to Edit HTML (I have the old Blogger interface), check Expand Widget Templates if it isn’t checked yet, and after <data:post.body/> paste your HTML snippets that you generated. Finally, for the Tweet button change the attribute data-url='w/e' to expr:data-url='data:post.canonicalUrl', for the FB Like button change href='w/e' to expr:href='data:post.canonicalUrl', and for the +1 button replace href='w/e' with expr:href='data:post.canonicalUrl'. You can also add other tags, but I’m not sure whether Blogger will allow all of them. And that’s it, now your blog has buttons for direct sharing, just like the ones here on this one :).

Categories

Leave a Reply