© Other

Attractive Facebook Like Box For Blogger

14:57 |

Hi readers,  

After writing Remove ''Powered by BLogger'' From Blog.

Now I'm going to write How to  place attractive facebook like box in blogger ...  :D

Hope you like this one....

Facebook Like Button allows you to provide more Sharing Options to your Readers. Your readers can share your posts on Facebook using the Like Button. Have you added the Like button and still not getting any “Likes”? :(. Ok then we will present the Like button in a much better and elegant way.

Here is a Screenshot of the Facebook Like Box. Isn’t it lovely and more “Likable” than the default Like Button?
image
The  Facebook Like box also includes a link to  your Facebook Fan Page. This FB Like Box was Designed Styled and coded by Mia of Dezign Matterz .  Thanks to her for designing and styling  this awesome Like Box.

How to install the Facebook Like Box?

1. First Fill in the following Details (Code will be updated with these details)
Width of the Like Box                      (Enter the appropriate width of the FB like box)
Facebook Fan Page / Profile URL 
2. Now Login to your Blogger Account and navigate to Design > Edit HTML and check the option which says “Expand Widget Templates”
3. Look for  ]]></b:skin> in your template and just above that place the following code (You can use Ctrl +F to find the code).
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQnRZY1b7eR31nWmqEqda17Y0sb6D46_hDqt87YZzp7Z4S0k3VSGDzc2n4zy8k7djSoTevJflT-q7YXqmiiSmIL_c2gjccyksZqkdK6sdGa50qiOmMd_K-a_YwFDHWFESnjKgVU7HsSF4/") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GHvW9iHGFzUWCRcLCrBPkSsgrXil1GzWqeiuJWSJ8-4xUIEkeHWZ9WIpYwwTVj_Ov3BzyWrgbnc1sjL_kfrakL3C2WQXVsH90-IrPogIk_BjFnkynsm83kKT7-dbNUf9e7uiD_G2NA/") no-repeat scroll left top transparent;
display:block;
margin-left:425px;
text-indent:-5000px;
}.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:515px;
height:42px;
}
4. Now Look for <data:post.body/> in your template and just below that add the following code.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='http://www.facebook.com/o2trick'>Be a Fan</a></div>
<div class='fb_like_button_holder'>
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:like expr:href="data:post.url" layout='standard' send='true' show_faces='false' width="450" font="arial" action="like" colorscheme="light"></fb:like>
</div>
</div>
</b:if>
5.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find
<html
and change it to
<html xmlns:fb="https://www.facebook.com/2008/fbml"
The following screenshot will help you out.
imageThis is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.
6. Now Save your template and you will see a Facebook Like Box on your post pages.

For more tips, trick and tutorial . Subscribe IT.

Please give me your feedback in comment box...

1 comments:

Nitesh Rathi said...

How can i remove the top most blogger search bar that has follow,share,report abuse ....and my other problems are as follows:
1)I have applied both facebook like box and also subscribe box but I am getting facebook box below the subscribe box and I want Facebook box to be above the subscriber box so what should i do?

2)And also the subscriber box is not showing the "Enter Your Email Address...." in blank space as it is showing in yours. please suggest me the solutions.
Please see my blog at www.nitesh-rathi.blogspot.com
and suggest what improvement can i do more.

31 January 2012 at 08:20

Post a Comment