Skip to main content

Facebook Like button on Blogger blog

So how did I get that conspicuous Like button on all the posts in my blog?

Well it was pretty simple although I had to do a little bit of experimenting to get it work properly.
  1. Go to the Like Button Facebook Developers page.
  2. In the section "Step 1 - Get Like Button Code", select/enter:
    • URL to Like: http://example.blogspot.com (we will change this later!)
    • Send Button: this is up to you. Check and uncheck to see the difference on right.
    • Layout Style: button_count recommended, unless you have something else in mind.
    • Show Faces: highly recommended to turn this off! Otherwise people who didn't set their privacy settings properly may be shocked and appalled to find their face on your blog.
    • Width, Font, Color Scheme, Verb to display: leave as default (450, blank, light, like)
  3. Click on Get Code, then in the popup, click on XFBML at top. (You may use HTML5 but I recommend XFBML for more backwards compatibility). Note that you will have to copy code 1, 2 and 3 from here in later steps below.
       
  4. Now in another tab/window, launch your blogger dashboard and start managing your blog.
  5. On the left menu (or the More Options dropdown on your dashboard), click Template.
  6. Click Edit HTML.
  7. IMPORTANT! In the pop-up, click Expand Widget Templates to turn it ON.
  8. Cut the entire HTML code in the big box (click inside and hit Ctrl-A -> Ctrl-X).
  9. Open Notepad or your favorite text editor and paste it there. (This may be a good time to save a backup of your original HTML.)
       
  10. At the top, there will be an <html> tag with a bunch of attributes, like:
    <html b:version='2' class class='v2' .... .... xmlns:expr='http://www.google.com/2005/gml/expr'>
  11. Add a new attribute to the <html> tag. Copy this attribute alone from code 2. If you did it correct it should be like this:
    <html b:version='2' class class='v2' .... .... xmlns:expr='http://www.google.com/2005/gml/expr'  xmlns:fb="http://ogp.me/ns/fb#">
       
  12. Next, hit Ctrl-F and search for <body
    You will come across the <body> tag that looks like this:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  13. Add a new line after this tag and paste code 1 here.
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    <div id='fb-root'/>
    <script> ... ... ... </script>

       
  14. Again, hit Ctrl-F and search for post-footer
    You will come across a <div> tag that looks like this:
    <div class='post-footer'>
  15. Add a new line after this tag and paste code 3 here.
    <fb:like href="http://example.blogspot.com" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
  16. Modify the code you just pasted as follows. Note that href changes to expr:href, double quotes change to single quotes, and the URL changes to a special code that only Blogger understands.
    <fb:like expr:href='data:post.url' send="true" layout="button_count" width="450" show_faces="false"></fb:like>
       
  17. Copy the entire HTML code and paste it back in the big box in Blogger Template page (from step 8).
  18. Click the Preview button below. Check that everything is in order and you like your new Like button (no pun intended!).
  19. Once satisfied, click Save template. Once saved, click Close and go check out your blog.
Tips:
  • You may proceed to add code from "Step 2 - Get Open Graph Tags" to customize your Like button features further, but be careful to not fill up URL here (or remove it later from generated code). This is because the URL here will override the post-specific URL used by the Like button we created.
  • In step 14, you found the <div> tag mentioned. If you keep searching, you may find the same <div> tag twice. The second one is probably for mobile layout. I tried adding Like button here but it didn't really work in my mobile phone. Feel free to experiment.
  • In step 14 again, adding code 3 after the <div> tag should work for most people. But I had my LinkWithin widget adding content above the Like button, so I had to place code 3 somewhere else to make sure the Like button appears above the LinkWithin widget content. If you wanna know where, drop me a comment.
  • Finally if you're completely clueless on what you're supposed to do, get someone to do it for you!

Comments

Post a Comment

Comments are moderated, and are usually posted within 24 hours if approved. You must have a minimum of OpenID to post comments.

Popular posts from this blog

Disable auto save in JetBrains IDE software (IntelliJ IDEA, PyCharm, PhpStorm)

JetBrains provides the following IDE software:
IntelliJ IDEAPhpStormPyCharmRubyMineWebStormAppCodeCLion Google also provides Android Studio which is powered by the IntelliJ platform.

If you come from a different IDE such as Eclipse, you will be unpleasantly surprised to find that JetBrains-branded IDEs automatically save everything the moment you look away. The proponents argue that as you work on your project, you should not have to worry about saving files. But to others, this auto-save behavior which is enabled by default is a curse that catches them by surprise, and a shocking departure from the workflow they are very much used to.

You can change the behavior by altering some settings.

Stop having to click Unblock on every downloaded file

CAUTION: The blocking of downloaded files in Windows is a security and safety feature to help prevent your computer from being infected by viruses and other malware. Only disable this feature if you know what you're doing.

I had been plagued by this annoyance since the days of Windows Vista. Any downloaded file, no matter what browser I use, gets tagged as "blocked" by Windows. You can open downloaded documents even though they are blocked, but when you run a downloaded application (such as a setup file) you're presented with a "Security Warning" before you're allowed to run it. It's worse if you extract a downloaded ZIP file with the Windows' built-in ZIP management. Every extracted file is blocked by default.

Being a geek who finds unnecessary "security" prompts annoying, the first thing I do in Windows is to disable the User Account Control (UAC). But I couldn't quite figure out how to disable blocking of downloaded files until …

Install Windows 10 Tech Preview when setup says media driver missing

Skip to the end for instructions.
I had been trying to install Windows 10 Pro Technical Preview onto a VHD, as I have Windows 7 Ultimate and can run an operating system from VHD (this feature is apparently limited to Enterprise and Ultimate editions).

While I had successfully managed to install it on a virtual machine in Oracle VirtualBox, I was dissatisfied with the sluggish performance of a VM. At the same time, I also did not want to dedicate a real hard disk partition for the sole purpose of installing Windows 10 TP.

Hence the decision to install into a VHD, which is a very neat solution that lets me keep Windows 10 TP separate from my real hard disk partitions and still enjoy the full native speeds of my real hardware. I had previously installed Windows 8 RC successfully into a VHD so I knew what I was up against.

Or so I thought. As soon as I booted up the setup disk (the ISO I had downloaded) and clicked on Install Now, I received this very unhelpful error asking for device dri…