Custom Search

Tuesday, June 29, 2010

How add Facebook like button on Blogger (Blogspot) and how customize it.


Few days ago, facebook surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,  In this tutorial you’ll learn how to add it to your blogger blog and you’ll learn how to customize. Change the verb, like or recommend, change it’s color and change it’s font.

STEP 1:

Add the button code it to your template script.

  • Log into your blogger account, then go to Design >> Edit Html.
  • Then check on Expand Widget Templates box.
  • Find the Code below and paste the Facebook like button script after it.
<div class='post-header-line-1'/>
  • If you didn’t find the code above in your template, Then try to find the following and paste the Facebook like button script before it.
<data:post.body/>
  • Facebook like button script.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <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=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if> 
  • Create your own Facebook like button script Click Here

    • click on Save Template and you are done.
    STEP 2:
    Customize your Facebook like button.


    in the above code you can customize 3 Parts. and i’ve colored them to make it easy for you to recognize, in the above code change the following parts:
    • like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
    • Arial this part controls the font type, keep it or change it to one of the following:
    lucida+grande
    segoe+ui
    tahoma
    trebuchet+ms
    verdana
    • Light this part controls your button color theme, and you have three options
    Light
    Evil
    Dark
    • Update, How to make it appear on your home page.
    In the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    </b:if>
    UPDATE
    if you want facebook like button individual blog post. follow below instructions.

    Paste below script at button of
    <b:includable id='post' var='post'>. this line.

    <iframe 
    allowTransparency='true'
    frameborder='0'
    scrolling='no'
    expr:src='"http://www.facebook.com/plugins/like.php?href="
    + data:post.url
    + "&amp;layout=standard&amp;show_faces=true&amp;"
    + "width=530&amp;height=60&amp;action=like&amp;"
    + "colorscheme=light"'
    style='border:none; overflow:hidden; width:530px; height:60px'/>

    In case you have issues, here is the version with all the clarifying formatting removed and no line breaks:

    <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show_faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

    Need More Help Just Ask In The Comments.

    16 comments:

    Matthew Rudd said...

    It's probably staring me in the face, but is there a way to get the 'Like' button to appear at the bottom of posts? I've followed the above instructions but it makes the button appear at the top of posts, and I'd prefer it to be at the foot. Thank you.

    W.A.K. said...

    yes there is way @ matthew. paste Facebook script after/below this code
    <data:post.body/>c

    Matthew Rudd said...

    That's worked a treat, thank you!

    Matthew Rudd said...

    It looks so awful that I've reverted to default widget template and removed the Facebook Like button entirely. I would like to restore it, however, with your help. Thank you.

    W.A.K. said...

    See update brother.

    Matthew Rudd said...

    Thanks!

    Shahrina Lawrence said...

    i want like button with every post that i post..but which code should i paste?blur me a little bit..

    Donna said...

    I am having the same issue as Autumn Leaf where the FB message does not link back to the blog. Thanks for any advice.

    ryan said...

    THANK YOU!!!!!!!! I spent about 3 hours (much time wasted on an extremely temperamental wireless connection... nevertheless!) trying to get the like button on individual posts.

    THANK YOU!!!

    Marie Green said...

    Okay, what did I do wrong? I followed every step and the only place the like button shows up is in the Blog Archives. I want them to show up on individual post. Help!

    Thank You

    http://MGHairDesign.blogspot.com

    Carolina said...

    I was able to link the facebook button to individual posts, but it appears just before the post, while I'd like to add it at the bottom of each post (after date, labels, etc..)
    Is there any way I can do that?

    Thanks for your help!

    Liliana said...

    Yes, I did it at the beginning of each post. Is it not better to put it at the end? any experience?

    Debbie B. said...

    Very helpful! Thanks!!

    ext12 said...

    Very helpful! Many thanks!

    Mumma's Mini Me's - Kym said...

    HELP!!!!!!!!!!!!!!!!!! No one can help me!! I have being trying for days to add my FB like button for to the sidebar and I get a black rectangle!!! What is going on! I have tried different codes and everything I can think of. Please any help would be great...........

    Amit Sarvaiya said...

    Thkx bro................

    Post a Comment