Facebook Big Like Button Popup

A simple Overlay Popup showing Facebook Like button, for high conversione LIKE on fan Page. Use cookie to break popup appear after click on close button popup.

by Marco Marcoaldi

HTML

<script src="https://webmail.hostalo.it/jquery.cookie.js"></script>
<div class="ilike_overlayer nomobile" id="ilike_overlayer" style=""><div class="ilike_overlayer_testo"><div style="float:left;">Segui</div><div style="margin: 3px 0 0 52px;"><img style="vertical-align:sub;" src="http://www.tychemagazine.it/tyche-fb.png"></div><span style="float:left;margin-top:5px;">su Facebook!</span><iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/tychemagazine&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:45px;" allowtransparency="true"></iframe></div><a class="ilike_close" id="ilike_close" onclick="javascript:close_fb();" href="javascript:void(0)"></a></div>

CSS

.ilike_overlayer { background:url("http://www.tychemagazine.it/fb_like3.png") no-repeat 0px 0px; width: 500px; height: 500px; z-index: 99999; position: fixed; overflow: hidden;
 left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translatey(-50%);
    -moz-transform: translateX(-50%) translatey(-50%);
    transform: translateX(-50%) translatey(-50%);
}


.ilike_overlayer iframe { float: left; margin: 6px 0px 0px 10px; overflow: hidden; width: 120px !important; }.ilike_overlayer div.ilike_overlayer_testo {margin:315px 8px 0px 120px;width:262px;float:left;overflow:hidden;font-size:18px;font-family:arial,helvetica,clean,sans-serif;}

.ilike_overlayer a.ilike_close { overflow: hidden; display: block; width: 20px; height: 20px; margin: 292px 0px 0px 0px; }

JavaScript

// To get/set cookie i use https://github.com/carhartl/jquery-cookie

$(document).ready(function() {
    cookie=$.cookie('facebookbiglike');
    if (cookie =="1"){
        $("#ilike_overlayer").hide();
    }
});

function close_fb(){
    var date = new Date();
    date.setTime(date.getTime() + (2 * 60 * 1000));
    $.cookie("facebookbiglike", "1", { expires: date });    
    $("#ilike_overlayer").remove(); 
}