Facebook slide left-right widget with jquery

This is a widget that will make a Facebook widget page to appear when you hover the mouse over the Facebook image.

Add this code before the /body html tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
<!--start facebook slide widget-->
<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding:0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 0;margin-top: 0;position: absolute;left: 247px;width: 47px;background-image: url('http://incvice.com/wp-content/uploads/2017/06/facebook-slider-button.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = 'medium'; // Duration of Animation
            w2b('#fbplikebox').css({left: -250, 'top' : 350 })
            w2b('#fbplikebox').hover(function () {
                w2b(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    left: -250
                }, $dur);
            });
            w2b('#fbplikebox').show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpizzeriacalabriagalati%2F&tabs&width=250&height=260&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=259068537450595" width="250" height="260" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>  
<div class='fbplbadge'></div>
</div>
<!--end facebook slide widget-->

This will make the widget to appear on the left side of the page.

To make the widget appear on the right, use this code.

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
<!--start facebook slide widget-->
<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url('http://incvice.com/wp-content/uploads/2017/06/facebook-slider-button.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = 'medium'; // Duration of Animation
            w2b('#fbplikebox').css({right: -250, 'top' : 350 })
            w2b('#fbplikebox').hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b('#fbplikebox').show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
    <div class='fbplbadge'></div> 
    <iframe src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&amp;width=250&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:260px;background:#FFFFFF;' allowtransparency='true'></iframe>
</div>

ADD A COMMENT: