Add a Facebook Popup Like Box to Blogger

A Facebook Like Box is a great plugin for developing your Facebook community. Facebook like box allow you visitors to join you on Facebook without leaving the page. After joining the person will receive all the updates from your page in his/her feed. Whatever, Facebook like box plays an important role in building your blog's audience and your social activity. The widget we're going to share with you today is an amazing widget, when someone visits you blog while loading the page, page gets dark background and this widget appears in order to ask your visitor to like your page. This widget has a beautiful look and a smart design. And on the top right corner there is a close button for closing the widget.

How to Add Facebook Popup Like Box to Blogger

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Edit HTML >> and Search (Ctrl + F) for the following tag

</body>

Step 3. Now Copy the below code and Paste it Just Before/Above the </body> tag

    <style type='text/css'>
    #bgtfbpopup {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:auto;
    padding:16px;
    background:#FEFEFE;font:normal Dosis, Georgia, Serif;
    color:#111;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    }
    #bgtfbpopup a.bgtclose {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#fff;
    font:bold 16px Arial, Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#000000;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:22px;
    -moz-border-radius:22px;
    border-radius:25px;
    cursor:pointer;
    }
    </style>
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(window).bind("load", function() {
    $('#bgtfbpopup').animate({top:"150px"}, 1000);
    $('a.bgtclose').click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>
    <div id='bgtfbpopup'>

    <center>
    <b>Don't Forget To Join US On Facebook</b></center>
    <center>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogolect&width=300&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/>
    </center>

    <a class='bgtclose' href='#'>×</a>
    <center style='float:right; margin-right:10px;'>
    <span style='font-size:xx-small; color:#000; text-decoration:none;'></span>
    <a href="http://www.blogolect.blogspot.com.com" rel="dofollow" target="_blank" title="blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizAICHt7N-6v-gFDKilU0UqBX0_OfhNlwRz0X_qIqOOX1mZ6ABZKJszVfFvAfadQM57-3T2gex7vQltk1ItKBtn4clQDqJb4GMTnGZ4jxZNYtmovYk4Ps5dEefVoS64hq-4EBGOqP2rGQ/s1600/bgt-blank.gif" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href='http://blogolect.blogspot.com/2014/02/add-facebook-popup-like-box-to-blogger.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Provided by Blogolect</a></center>
    </div>