Jquery Sidebar popup for social plugin to your website

Dear Friends,

Today I will be explaining you, how can we write code for sidebar popup for social plugin or contact us page. Sometimes we need to display a popup from the screen side, where, we click and popup will be display on mouse hover. From there we can use Facebook like button that will be display your all current update status to user. I will be design popup with the help of jquery, html and css.

Now I am going to explain all steps one by one-

Step 1: first of all we place css and Jquery external file link to header of page.

<script src="src/jquery.js" type="text/javascript"></script>

    <link href="css/dark-glass/styleform.css" rel="stylesheet" type="text/css" />

Step 2- Now we write code for popup

<div id="feedback" style="">    

<div id="feedback_data">

  <table width="80%">

     <tr><td style=" width:320px; height:300px ; background:#fff;">

<div class="fb-activity" data-site="The domain to show activity for e.g. &#039;http://www.example.com&#039;. In XFBML, defaults to the domain the plugin is on." data-action="Comma separated list of action of action types" data-width="300" data-height="300" data-header="true"></div>

</td></tr></table>    

 

  <span></span>

</div>

   <a href="#" class="pull_feedback" style="color:#000; font-size:35px;"><img src="images/face.jpg"  alt="Facebook" title="Facebook"/></a>

       </div>

    <script type="text/javascript">

        jQuery(document).ready(function () {

            jQuery("#contact_loading").hide();

            jQuery('.error').hide();

            jQuery("form#jfrom").submit(function () {

                jQuery("#contact_loading").hide();

                jQuery('.error').hide();

              

 setTimeout(function () {

                    document.location = "#";

                    jQuery("#feedback_data").html(">").append("");

                    // Do something after 5 seconds

                }, 3000);

                return false;

            }); //submit

            jQuery(".pull_feedback").toggle(function () {

                jQuery("#feedback").animate({ right: "0px" });

                return false;

            },

                    function () {

                        jQuery("#feedback").animate({ right: "-284px" });

                        return false;

                    }

             ); //toggle

            jQuery("#feedback").css("z-index", "10001");

        }); //document.ready 

      

       </script>

Step 3: This is the code for Facebook social plugin

div id="fb-root"></div>

<script>    (function (d, s, id) {

        var js, fjs = d.getElementsByTagName(s)[0];

        if (d.getElementById(id)) return;

        js = d.createElement(s); js.id = id;

        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

        fjs.parentNode.insertBefore(js, fjs);

    } (document, 'script', 'facebook-jssdk'));</script>

You can download  complete source code from here.