WordPress Style Facebook Popup For Blogger

Facebook likebox popup is one of the BEST blogger widget. With this widget you can get the guarantee of getting more like and also large number of audience directed to your site, Let"s check out this version of FB likebox, you may have seen this type of popup on wordpress blogs. But today I am sharing a totally bloggerized version of this popup.

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) and 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8ZoormD8gjNJVPyCPn-zQvKMNT7wcWGTmhqaPIEG4bcyUQa8EJDw0mwa2sjlwoT1JZ7Nd9gdyXijqhnfhti-B5ItbQJtVWPstfrBcCW4vn44b32-oI79RlczpERvjImseM9U0dH8d-Y/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%2Fblogassistz&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 blogassistz 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)

Chears !!

Share: