Facebook likebox popup
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. |
| Facebook likebox plugin widget for 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
CODE:
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUs_xZthpEP7yn1FxLy_rDLvXyu18a3Oj8RZUHDKtqMk5jHwX5kPPnpE2-tphonkpoKfbyhxdNfsEexIpN1guQJ0y6JGzW4h577MIyjcKTBqS6CN_D1l86a9mPiwGXnKgaJxYOQKHXxLo/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%2FAsk-Rais-1643891802545185&width=340&height=258&colorscheme=light&show_faces=true&header=false&stream=false&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 Ask-Rais-1643891802545185 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.
.delay(10000)