Scrolling likebox at bottom of the page

 Scrolling facebook likebox

How to create scrolling facebook like box as you can see on page.

Below is html page that you can use to create scrolling facebook like box at the bottom of the page.

 
//for maximize view of box
 
<div id="divfacebook" style="background-color: white; bottom: 10px; bottom: 5px; display: none; height: 273px; margin-bottom: 5px; padding: 2px; position: fixed; right: 0px; width: 300px; z-index: 999;">
 
//anchor tag for minimize button

<a href="javascript:void(0);" onclick="javascript:CloseDiv();" style="background: #3B5998; color: white; display: inline-block; font-family: Arial; font-size: 12px; font-weight: bold; height: 16px; padding: 3px; position: absolute; right: 10px; text-align: center; text-decoration: none; top: 15px; width: 12px;">-</a>

//generate iframe from facebook likebox plugin http://developers.facebook.com/docs/reference/plugins/like-box/ and untick show stream checkbox

       <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBridzetech&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false&amp;appId=140536862789242" style="border: none; height: 258px; overflow: hidden; width: 292px;"></iframe>
    </div>

//for minimize version of box

<div id="divshowfacebook" style="background-color: white; border: 1px solid #315C99; bottom: 5px; display: none; height: 57px; left: 0px; margin-left: 5px; padding: 12px; position: fixed; width: 198px; z-index: 999;">

//generate iframe from facebook likebox plugin http://developers.facebook.com/docs/reference/plugins/like-box/ and untick show stream checkbox and untick show faces.

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBridzetech&amp;width=292&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false&amp;appId=140536862789242" style="border: none; height: 62px; overflow: hidden; width: 292px;"></iframe>
//anchor tag for maximize button

         <a href="javascript:void(0);" onclick="javascript:ShowFacebook();" style="background: #3B5998; color: white; display: inline-block; font-family: Arial; font-size: 12px; font-weight: bold; height: 11px; padding: 3px; position: absolute; right: 9px; text-align: center; text-decoration: none; top: 8px; width: 9px;">+</a>
    </div>
<input id="hidflag" type="hidden" value="move" />

//javascript for scrolling box
 
    <script language="javascript" type="text/javascript">
        var flag = document.getElementById('hidflag').value;
        var bwidth;
        $(document).ready(function () {
            viewfacebox();
       });
        function viewfacebox() {
            if (typeof window.innerWidth != 'undefined') {
                bwidth = window.innerWidth
            }

            // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
            else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
                bwidth = document.documentElement.clientWidth
            }

            // older versions of IE

            else {
                bwidth = document.getElementsByTagName('body')[0].clientWidths
            }
            bwidth = bwidth - 320;
            if (flag == "move") {
                setTimeout("Move();", 5000);
                setTimeout("Change();", 12000);

            }
            else {
                DisplaySmallBox();
                Change();
            }
        }
       
        function Move() {           
            document.getElementById("divfacebook").style.display = "";
            $(function () {
                $('#divfacebook').stop().animate({ 'right': 0 }, 2000);
                $('#divfacebook').stop().animate({ 'right': bwidth }, 5500, function () {
                });
            });
        }

        function Change() {
            document.getElementById('divfacebook').style.left = '';
            document.getElementById('divfacebook').style.left = "0px";
        }
        function CloseDiv() {
            document.getElementById("divfacebook").style.display = "none";
            document.getElementById("divshowfacebook").style.display = "";
        }
        function ShowFacebook() {
            document.getElementById("divfacebook").style.display = "";
            document.getElementById("divshowfacebook").style.display = "none";
        }
        function DisplaySmallBox() {
            document.getElementById("divfacebook").style.display = "none";
            document.getElementById("divshowfacebook").style.display = "";
        }   
           
    </script>

-

+