Sliding Facebook Fanpage/likebox panel

Sliding Facebook Fanpage/likebox panel

Hi guys, Today I am going to share some useful tips to improve your facebook followers in your website by adding this simple jquery and css code.

Let us called Facebook FanPage Slider – both right side & left side of any web page. Fixed Facebook Fan Page / Like Box Slider.

Jquery Code

 $(function(){
        $(".facebook_right").hover(function(){
        $(".facebook_right").stop(true, false).animate({right: "0" }, 800, 'easeOutQuint' );
        },
  function(){
        $(".facebook_right").stop(true, false).animate({right: "-245" }, 800, 'easeInQuint' );
        },1000);
  });

  $(function(){
        $(".facebook_left").hover(function(){
        $(".facebook_left").stop(true, false).animate({left: "0" }, 800, 'easeOutQuint' );
        },
  function(){
        $(".facebook_left").stop(true, false).animate({left: "-245" }, 800, 'easeInQuint' );
        },1000);
  });

CSS Code

.facebook_left {
    width: 245px;
    height: 389px;
    position: fixed;
	left: -245px;
	top: 220px;
	z-index: 99997;
}
.facebook_right {
    width: 245px;
    height: 389px;
    position: fixed;
	right: -245px;
	top: 220px;
	z-index: 99997;
}
.facebook_left #facebook_icon {
	float: right;
	height: 60px;
    width: 34px;
	right: -34px;
    background: url("fb.png") no-repeat;
	cursor: pointer;
	position: relative;
    z-index: 99998;
}
.facebook_right #facebook_icon {
	float: left;
	height: 60px;
    width: 34px;
	left: -34px;
    background: url("fb.png") no-repeat;
	cursor: pointer;
	position: relative;
    z-index: 99998;
}
.facebook_right .facebook_box {
    background-color: #FFFFFF;
	border: 4px solid #3B5998;
    float: right;
	top: -60px;
	position: relative;
    z-index: 99999;
}
.facebook_left .facebook_box {
    background-color: #FFFFFF;
	border: 4px solid #3B5998;
    float: left;
	top: -60px;
	position: relative;
    z-index: 99999;
}

Html Code

<div class="facebook_right">
<div id="facebook_icon"></div>
<div class="facebook_box">
  <fb:fan profile_id="201941943231818" stream="0" connections="16" logobar="0" width="237" height="389"></fb:fan>
</div>
</div>

<div class="facebook_left">
<div id="facebook_icon"></div>
<div class="facebook_box">
  <fb:fan profile_id="201941943231818" stream="0" connections="16" logobar="0" width="237" height="389"></fb:fan>
</div>
</div>

View Demo Download Now

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
Sliding Facebook FanPage, Like Box Panel using Jquery & CSShttp://w3lessons.info/wp-content/uploads/2012/12/sliding-facebook-fanpage-panel1.pnghttp://w3lessons.info/wp-content/uploads/2012/12/sliding-facebook-fanpage-panel1-150x150.pngKarthikeyan KfacebookFreebiesjqueryWeb DesignCascading Style Sheets,Design,facebook,freebies,Jquery,tips & tricks
Hi guys, Today I am going to share some useful tips to improve your facebook followers in your website by adding this simple jquery and css code.Let us called Facebook FanPage Slider - both right side & left side of any web page. Fixed Facebook Fan Page / Like...