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 …

How to change default and internal currency in self-hosted Odoo or OpenERP

If you wish to use Odoo in a single-currency environment, you will find issues changing the currency in the Odoo interface itself. If you have a self-hosted solution of Odoo or OpenERP, you already have unprecedented control over the system, unlike the cloud-based solution from Odoo. This means that you can very easily fix the issue by hacking the database that Odoo is relying on. Even in a multi-currency environment, you can use the same trick to change the global default currency - the fix is very clean for any environment - there is just an extra step to update the currency rate settings.

Even in the latest version of Odoo, we still face the ridiculous bug that Odoo internally ALWAYS uses EUR (Euro) as the internal currency. This has created many problems for many users wanting to use a different currency. Despite being set to a different currency from the Odoo interface, the eCommerce site, reports, accounting, etc are still shown using EUR and the Euro symbol, creating confusion…