Facebook Like Button Widget for Blogger

Written By admin on Jan 10, 2011 | 10:34 PM

Home » , » Facebook Like Button Widget for Blogger
Do you want add widget “like this” as look like facebook?This widget is the most popular widget on social network (facebook). If you want to add this widget, follow this below step and enjoy it! But, before you doing all those tutorial, I recommend to back up your template first.

Step 1: Back it Up

Make sure to back up your Blogger Template before doing anything else!

Step 2: Change Page Element

Log into your blogger account, then go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste this button code

<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>

click Save Template and you are done.

That's all!
If you want to change your color, font, and verb recommend or like follow this step again.

Step 3: Customize your button

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, or 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>

Step 4: Save your work

Click (again) Save Template and you'll see

I hope this usefull. Thanks for read and come.

Source: AllBlogTools.com

0 comments:

Post a Comment