• Open Account
  • Premium
  • Thursday 1 January 2015

    Pop up Facebook LIke box for blogger

    Pop up Facebook LIke box for blogger

    Facebook is the greatest website in the internet with over 3 billion users and having more 900 Billion users that log in a single day which shows the power of Facebook into bringing web traffic. In my Blog itself Facebook has been a great source of traffic ranking second from search engines . The Facebook like box can be horrible because it appears all the time but thanks to your complaints about the recent one which has lead me to customising it to pop up once the visitor visits your site.

    Marketers have been using Facebook to promote their products and the same cab be done on blogger by adding this cool subscription Facebook widget below.



    STEP 1

    Log into your blogger dashboard and select design/layout as shown in the image below

    STEP 2

    Paste the code below in the HTML box that will appear .

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
    #fbox-background {
        display: none;
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;

    #fbox-close {
        width: 100%;
        height: 100%;

    #fbox-display {
        background: #eaeaea;
        border: 5px solid #828282;
        width: 340px;
        height: 230px;
        position: absolute;
        top: 32%;
        left: 37%;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;

    #fbox-button {
        float: right;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;

    #fbox-button:before {
        content: "CLOSE";
        padding: 5px 8px;
        background: #828282;
        color: #eaeaea;
        font-weight: bold;
        font-size: 10px;
        font-family: Tahoma;

    #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
        color: #aaaaaa;
        font-size: 9px;
        text-decoration: none;
        text-align: center;
        padding: 5px;
    <script type='text/javascript'>
    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' : ''
    // 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 type='text/javascript'>
    if($.cookie('popup_facebook_box') != 'yes'){
    $('#fbox-button, #fbox-close').click(function(){
    $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
    <div id='fbox-background'>
    <div id='fbox-close'>
    <div id='fbox-display'>
    <div id='fbox-button'>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
    style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
    <div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://fantasysurf.blogspot.com" rel="nofollow">Ajaxsurf</a></div>

    Widget Settings

    •  The widget is set to  to appear 5 second after the web page has loaded which is shown delay(5000). if it happens that you want to customise the widget please change the number.

      NB: 1000=1 second
    • Please replace the text written in blue with your Facebook page url ,

    STEP 3

    Save your widget and check it out

    Wish you the best year this 2015

    Sifiso Nkwanyana

    Author & Editor

    I hope you have recieved all the information you seek and thank you once more for browsing our website we hope to hear from you soon.


    Post a Comment

    Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep it in mind that we respect all comments by our readers but all spam comments and spam links will be deleted. Thanks for understanding!