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 IDEA PhpStorm PyCharm RubyMine WebStorm AppCode CLion 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.
Post a Comment
Read more

Make Samsung DVD-C350 region-free

Update 2: An anonymous commentator has shown me a way to make Region 1 players (such as DVD-H1080R) region-free by first converting it to Region 3, then applying my region-free hack below. For details, click here or look for a comment by an Anonymous user dated 18 April 2011. Update: The instructions in the original post below did not make the DVD player region-free. Instead it only locked it to region 1. Many thanks to Anonymous who posted the first comment on this post, I now have alternate instructions. Note: If you have edited the numbers menu (see original post) , I suggest you return it to the original settings you had backed up. A modified numbers menu may prevent the instructions below from working properly.
62 comments
Read more

Group, Ungroup and Regroup disabled in Word

I was editing a Microsoft Word document which had a collection of shapes and text boxes grouped together. I wanted to modify some of the shapes, and therefore I had to ungroup them. But when I right-click the group and open the Group menu, all three options namely Group, Ungroup and Regroup are completely disabled or grayed out. I couldn’t figure out what’s wrong. This group of objects is perfectly ungroupable, and I can even select objects within the group. However, Microsoft Word 2007 is not letting me ungroup it. I searched the Internet for a solution, but did not find anything very useful. The closest I came across is this statement: “The type of Text Wrapping doesn't make any difference as long as it isn't In Line with Text.” ( Link here ) Anyway, I changed the text wrapping of the group of objects from ‘In line with Text’ to ‘Tight’ and viola! I could now ungroup it and edit it. The document got a bit messed up when I did so, but after I ungrouped, edited and regro...
10 comments
Read more