Sliding Facebook FanPage, Like Box using Jquery & CSS

Hi guys, Today I am going to share some useful tips to increase your facebook followers in your website by adding this simple jquery and css code. This code is used to show Sliding Facebook Like Box using jQuery & CSS

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>

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

Thanks!