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

  1. Replies
    1. Yeah, Its one time popup but you can change it. See widget customization options for more info.

      Delete
  2. Thanks very much. I Like it :)

    ReplyDelete
  3. Great Post i am find this from many month and its working also on my blog. Thanks :)

    Aishwarya Rai Latest Wallpapers

    ReplyDelete
  4. "WordPress Style Facebook Popup For Blogger " This Blogger Widget Do't work my Blogger. Please why. Momtajol hoq. My Blogger name is http://bd786m.blogspot.com

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Nice and thats a huge explanation. Thanks for posting this kind of useful chat.
    Digital Marketing Services in Coimbatore | Best SEO Companies in Coimbatore

    ReplyDelete
  7. Thanks for your informative article. Your blog is loaded with awesome information. Please include RSS field shat that we can receive your latest post direct to my inbox. Wordpress Course in Chennai

    ReplyDelete
  8. It is a good attempt. Jai Odisha.
    Invites comments on www.OdiaTastyKhana.blogspot.in #OdiaTastyKhana
    ଜୟ ଜଗନ୍ନାଥ

    ReplyDelete
  9. đồng tâm
    game mu
    cho thuê nhà trọ
    cho thuê phòng trọ
    nhac san cuc manh
    số điện thoại tư vấn pháp luật miễn phí
    văn phòng luật
    tổng đài tư vấn pháp luật
    dịch vụ thành lập công ty trọn gói
    lý thuyết trò chơi trong kinh tế học
    đức phật và nàng audio
    hồ sơ mật dinh độc lập audio
    đừng hoang tưởng về biển lớn ebook
    chiến thắng trò chơi cuộc sống ebook
    bước nhảy lượng tử
    ngồi khóc trên cây audio
    truy tìm ký ức audio
    mặt dày tâm đen audio
    thế giới như tôi thấy ebook

    Tên tri khách nọ nghe vậy, lạnh lùng nói: “Không có quy củ không thành phương viên, Thiên Thượng Nhân Gian có quy củ là chuyện tốt, bất quá, quy củ cũng tùy từng đối tượng. Chẳng lẽ không thể phá lệ cấp cho Chu tam công tử chút mặt mũi?”

    Nực cười, lão tử và Yến Vương phủ đã ở thế đối lập, bảo lão tử cho các ngươi mặt mũi sao? Nằm mơ đi. Chu tam công tử thì sao? Lão tử chẳng những không để gái cho ngươi mà còn cướp vị hôn thê của ngươi, xem ngươi làm gì được lão tử.

    “Phá lệ? Ngươi bảo có được không?” Lưu Phong liếc mắt đánh giá tên tri khách nọ, khóe môi khẽ mỉm cười hỏi lại.

    Tên tri khách nọ cười cười đáp: “Nếu ta là công tử, dám chắc ta sẽ phá lệ…”

    Lưu Phong cười nói: “Nếu ngươi là ta, dám chắc ngươi có thể phụng tống miễn phí phải không?

    Tên tri khách nọ hắc hắc cười nói: “Công tử quả nhiên là người thông minh. Nói chuyện cùng người thông minh thật là sảng khoái.”

    “Đúng vậy, con trai thật sự là vô cùng thông minh. Điều này ai cũng có thể công nhận. Nhưng ta phỏng đoán con trong khi sinh đầu rơi xuống đất”. Lưu Phong buồn bã cười nhạt.

    Tên tri khách nọ nhất thời sửng sốt, vẻ mặt rồi bời không hiểu nổi ngụ ý bên trong.

    Vương Bảo Nhi hé miệng cười trộm, thầm nghĩ: người này quả nhiên ngu ngốc, câu nói như vậy cũng không hiểu thâm ý bên trong. Nhìn vẻ mặt người nọ, Vương Bảo Nhi đột nhiên tràn ngập tin tưởng vào trí tuệ mình, một loại cảm giác ưu việt xông lên trong lòng.

    ReplyDelete
  10. Get more widgets here:
    http://trickzbucket.blogspot.com/

    ReplyDelete
  11. Thanks for sharing your post! I got a lot of useful information from it! Here is some additional information on the topic A Cheat Sheet for WordPress.

    ReplyDelete
  12. Backing up data in advance is really important. Or you would have to use
    data recovery software or tools for help, which is really troublesome.

    ReplyDelete
  13. Tanx very much... working on my blog www.mimichannel.com

    ReplyDelete
  14. Thanks for your Great post.....Here you will get more social bookmarking websites list.Please visit this websites.... Social Bookmarking Sites List

    New Social Bookmarking Sites List

    ReplyDelete

  15. Thanks for sharing,this great information....visit our Top Social Bookmarking sites list Submityourwebsite.xyz
    Addlinks.xyz
    Addwebsite.xyz
    Addyourwebsite.xyz
    Freelinking.xyz
    Freesubmission.xyz
    Freeurl.xyz
    Freeurls.xyz
    Freewebsitesubmission.xyz
    Linkyourwebsite.xyz
    Postwebsite.xyz
    Publishednews.xyz
    Seosubmission.xyz
    Submitanewstory.xyz
    Submitbookmark.xyz
    Submitlinks.xyz
    Submitnewlink.xyz
    Submitnewlinks.xyz
    Submitwebsites.xyz
    Websitelinking.xyz
    Postclassifieds.xyz
    Postfreead.xyz
    Postfreeclassifiedads.xyz
    Show less

    ReplyDelete
  16. Thanks and keep update with latest information…. Visit our Latest Bookmarking sites Social Bookmarking Sites List
    www.2morelinks.net

    ReplyDelete
  17. Awesome list! Thank you so much. This is very helpful to improve your search engine ranking. visit our Social Bookmarking sites……… Linktoday.xyz
    Publishedlinks.xyz
    Superlinking.xyz
    Seoonlinenews.xyz
    Getbestseorank.xyz
    Writeanewpost.xyz
    Bookarkseo.xyz
    Bookmark143.xyz
    Seosocialbookmarking.xyz
    Socialposts.xyz
    Mybestlinks.xyz
    Bestseorank.xyz
    Amazinglinks.xyz
    Myfavoritelinks.xyz
    1morelink.xyz
    Createfreeblog.xyz
    Yourfreeblog.xyz
    Savemylink.xyz
    Sharemypost.xyz
    Twomorelinks.xyz
    Shareyourwebsite.xyz
    Seobacklinks.xyz
    Myseonews.xyz
    Thenextlink.xyz
    Getfreewebsite.xyz
    Yourfreewebsite.xyz
    Dailybookmark.xyz
    Givemelink.xyz

    ReplyDelete
  18. Don't try to cover that and desirethe actual menace goes away completely! Utilize the get in touch with numbers and also inform them your reason for giving them a call. By simply talking to existing divorcees, you can find out which in turn divorce attorney is mandatory. Locate a attorney class, one that has several attorneys obtainable and may set up free of charge consultation services using them to determine if just about any fulfill your specifications. Check on attorney data in the court technique.
    Divorce Attorney Virginia
    You will have good starting point generally there, since you can obtain on the inside data out of your buddy on what properly the attorney functions, precisely how tough he will do the job, and what the end result of the situation was. Usually, a great divorce attorney will attempt to your own scenario with no going to trial. Hips are usually increased the longer plus more complicated the situation receives. Therefore, if the divorce might be resolved with out going to trial, the particular fees will usually always be decrease.

    ReplyDelete
  19. One Of The Best Site That I Have Ever Visit,I am a regular visitor of this Site Keep Going Regards From,Tech Geek Tricks

    ReplyDelete
  20. WordPress Software, while originally designed for bloggers, has become an outstanding platform for business websites. This article details what you should look for in a WordPress website theme/template to make sure your website blows away your competition. More Information

    ReplyDelete

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