Add A Floating Facebook Like Box For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Thursday 22 December 2011

Add A Floating Facebook Like Box For Blogger

Here are 2 Simple Steps

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

  1. a. Go to Blogger Dashboard > Design tab > Edit Html 
  2. Search for </head> tag
  3. Add below line of code Before </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Widget Code
a. Copy below code

  1. Replace Fbtsnts with your Facebook Username Don't forgot Add F before your username without any space.
  2. again copy the code.
  3. Go to Blogger Dashboard > Design tab > Page Elements
  4. Add a Gadget > HTML/Javascript



<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgg6zQli25nLEEE64D_M2ifAsWD1nRiw_WEjunByG1JwTvLpiJwQK8n4eLxZk2Ee4fmT4Givt_AuZnkIZLDCRk_GY2HvU7d6UJtEzxATDMu3ZYWwsz1A6wR2phOElpEdpOmVTNoiVfkAFO/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbtsnts&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://btsnts.blogspot.com/">BtsNts</a> / <a href=" http://btsnts.blogspot.com/2011/12/add-floating-facebook-like-box-for.html "> Get This!</a></span></div></div>


Don't remove F which I have added before my username


Watch the live demo at Right of this Page  

5 comments:

  1. https://www.facebook.com/profile.php?id=100000023460367
    my facebook id i have trouble in adding my page and i have added f before also it is showing that "Could not retrieve id for the specified page. Please verify correct href was passed in." what to do..

    ReplyDelete
    Replies
    1. there is one correction with this post, you also have to replace btsnts.blogspot.com with your blog URL.

      Delete
  2. Nice Rahul.. I was searching for this Plugin. I have intalled on my Blogger Blog.

    How To Words

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM