Saturday, February 5, 2011

How To Add a Facebook "Like" Button After Each Post on Blogger

Here's what you do:

  • Go to the "Design" tab under your Blogger Dashboard.
  • Click on the little words beneath the tabs that says "Edit HTML".
  • Above the html box, click the box that says "Expand Widget Template".
  • Go to your browser "EDIT" button at the top and go to "FIND"
  • In the FIND box at the bottom of your browser screen type in:  <data:post.body/>
  • Click the "Next" arrow next to the FIND box.
  • Right after <data:post.body/> add the following (Put a return or two after it so that you can see it easier in the Template box -- you can just copy and paste this from here):
<br/>
<br/>

<!-- Facebook Like button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:150px;'/>
</div>
</b:if>
<!-- Facebook Like button End -->

If you don't want faces showing, then change the word "true" (highlighted) to "false".  Also, you can adjust how many faces you see by adjusting the height (also highlighted).

That's it!  You should see the "Like" button under every post, like the one after this post.  If you find you don't like it, you can just reset the template by clicking on "Revert widget templates to default" beneath the template box.








CHICKY GROOVY COOLNESS GADGET


4 comments:

  1. Thanks for this post. This is the first version that worked on my blog - so I really appreciate it!!
    One question - do you know if there is any way to eliminate the blank space under the like button? I notice you have the space under yours also so it may be unavoidable...
    Thanks again!
    Jane

    ReplyDelete
  2. Hi, Jane! Thanks for your post! I'm glad it worked! You can actually reduce the white space by decreasing the height (highlighted). Change this to 50 or something even smaller and see if that works for you.

    God bless!

    T.K.

    ReplyDelete
  3. Thanks T.K!
    Sorry for all the questions but I have one more :)
    Do you know is there any way to have people like your entire blog (as opposed to individual posts)so that the numbers of likes would keep adding up (like they do on a FB fan page)??

    ReplyDelete
  4. Hi Jane! You can use the same code to put in your sidebar. It will work the same way. If you notice on my first page (http://www.chickyrama.blogspot.com) I have a bunch of faces on there that liked that page (my blog is made up of 11 different blogs and I just connect them, but I use that page as my home page). If you don't want the faces, you can go to the place in the code and where it says "faces=true" change it to "false".

    Let me know if you have any more questions! I will be happy to answer them, if I know!

    ReplyDelete

T.K. Goforth is a musician and author of the well-received book "Chord Piano is Fun!" She also writes a music blog called "Chord Piano Chick's Mostly Musical Musings.
Chord Piano Is Fun