Sunday, January 20, 2013

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: (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=''>
  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=''  xmlns: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="" 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.
  • 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!

1 comment:

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


Related Posts with Thumbnails