Facebook likebox popup is one of the evergreen blogger widget. Till now I have shared many versions of facebook likebox popups but this one is totally different among of them, you may have seen this type of popup on wordpress blogs. But today I am sharing a totally bloggerized version of this popup.

Live Widget Demo

Before going further have a look on other popup widgets by Helper Blogger

Other Popup Widgets By Helper Blogger


Widget Installation

The installation of this widget is damn easy, you can add this widget as an simple HTML/JavaScript widget. Follow below steps to add this widget
  • Go to Blogger Dashboard
  • Select your blog from
  • Go to Layout > Add Widget > HTML/JavaScript
  • Copy and Paste code (don't forgot to change our username with yours)
  • Save your widget

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
<style>
    #hbfanback {
        display: none;
        background: rgba(0, 0, 0, 0.8);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
    }
    #hbfan-exit {
        width: 100%;
        height: 100%;
    }
    #hbfanbox {
        background: white;
        width: 420px;
        height: 270px;
        position: absolute;
        top: 58%;
        left: 63%;
        margin: -220px 0 0 -375px;
        -webkit-box-shadow: inset 0 0 50px 0 #939393;
        -moz-box-shadow: inset 0 0 50px 0 #939393;
        box-shadow: inset 0 0 50px 0 #939393;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: -220px 0 0 -375px;
    }
    #hbfanclose {
        float: right;
        cursor: pointer;
        background: url(http://1.bp.blogspot.com/-FNtcBhH50iA/VKGx_CODj0I/AAAAAAAAD5w/rbd0OLy5lDs/s1600/hb-fanclose.png) repeat;
        height: 15px;
        padding: 20px;
        position: relative;
        padding-right: 40px;
        margin-top: -20px;
        margin-right: -22px;
    }
    .hbremove-borda {
        height: 1px;
        width: 366px;
        margin: 0 auto;
        background: #F3F3F3;
        margin-top: 16px;
        position: relative;
        margin-left: 20px;
    }
</style>
<script type='text/javascript'>
    //<![CDATA[ 
    jQuery.cookie = function(key, value, options) {
        // key and at least value given, set cookie... 
        if (arguments.length > 1 && String(value) !== "[object Object]") {
            options = jQuery.extend({}, options);
            if (value === null || value === undefined) {
                options.expires = -1;
            }
            if (typeof options.expires === 'number') {
                var days = options.expires,
                    t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }
            value = String(value);
            return (document.cookie = [
                encodeURIComponent(key), '=',
                options.raw ? value : encodeURIComponent(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 
                options.path ? '; path=' + options.path : '',
                options.domain ? '; domain=' + options.domain : '',
                options.secure ? '; secure' : ''
            ].join(''));
        }
        // key and possibly options given, get cookie... 
        options = value || {};
        var result, decode = options.raw ? function(s) {
            return s;
        } : decodeURIComponent;
        return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
    };
    //]]>
</script>
<script type='text/javascript'>
    jQuery(document).ready(function($) {
        if ($.cookie('popup_user_login') != 'yes') {
            $('#hbfanback').delay(100).fadeIn('medium');
            $('#hbfanclose, #hbfan-exit').click(function() {
                $('#hbfanback').stop().fadeOut('medium');
            });
        }
        $.cookie('popup_user_login', 'yes', {
            path: '/',
            expires: 7
        });
    });
</script>
<div id='hbfanback'>
    <div id='hbfan-exit'></div>
    <div id='hbfanbox'>
        <div id='hbfanclose'></div>
        <div class='hbremove-borda'></div>
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhelper.blogger&amp;width=340&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowTransparency="true"></iframe>
    </div>
</div>

Widget Customizations

  • If you have already installed jQuery library then remove below code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
  • Replace helper.blogger with your facebook fanpage username.
  • This widget appears only once in 7 days (per person), if you want to appear it on every page load then remove below code snippet from widget code
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
  • By default, This popup appears on screen for 10 seconds . If you wish to change it then edit below code. (Note: 1 Second = 1000, 10 Seconds = 10000, 20 Seconds = 20000)
.delay(10000)

That's All
Have a nice day and Happy Blogging :)

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM

 
Top