Fancy Dotted Style Facebook Pop Up Like Box Widget

Fancy Doted Style Facebook Pop Up Like Box Widget
FB like box

Facebook pop up widget is important for increasing visitors Like rapidly. There are many good website which is using popup like box for pushing the visitors to click on Like button. And by generating like Blogger can easily increase their Blog popularity.

we know that social media site works for blog as a medium of traffic flow. So if our social media site has many fans then we can reach to large number to audience. And Facebook Popup widget made it easier for us to increase the number of fans. There are many  site who are receiving huge page view but their Facebook fan is very few, this can be happen if they  don't properly place the Facebook like box on identical place. But this is better to get more fan by adding popup widget.


In terms of widget, many blogger don't prefer to add randomly because of affecting the loading time. I have taken this matter seriously, for this reason I have designed this widget with complete CSS, even in side design used CSS code. I believe this widget will load faster and you your visitors will love it.

popup like box

The main concept of this widget when a visitor will visit your Blog then after loading the landing page within 3 seconds the widget will appear. But if you wish you can increase the Fan box loading time. In addition this widget can be load per page view or one time within 6 days. This widget will keep visitors cookie so it any visitor click on close button then within 6 days this popup widget won't be visible. So  let's proceed to the main tutorial to add this beautiful facebook popup widget.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbcontainer-bg {
background: #444444;
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#close-button {
width: 100%;
height: 100%;
}
#widget-display {
background: #FFFFFF;
padding-top:7px;
padding-left:8px;
border:5px dotted #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
width: 340px;
height: 228px;
position: absolute;
top: 30%;
left: 35%;
}
#button-position {
float:right;
cursor: pointer;
position: absolute;
right: 2px;
top: 5px;
}

#button-position:before {
content: "Close";
padding: 4px 6px;
background: #000000;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Trebuchet MS;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: # BAB9B9;
font-size: 9px;
text-decoration: none;
text-align: center;
padding: 5px;
}
</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 to 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_ box') != 'yes'){
$('#fbcontainer-bg').delay(3000).fadeIn('medium');
$('#button-position, #close-button').click(function(){
$('#fbcontainer-bg').stop().fadeOut('medium');
});
}
$.cookie('popup_ box', 'yes', { path: '/', expires: 6 });
});
</script>
<div id='fbcontainer-bg'>
<div id='close-button'>
</div>
<div id='widget-display'>
<div id='button-position'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/BloggerSpice&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
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://bloggerspice.com" rel="nofollow">Blogger Spice</a></div>
</div>
</div>

Step 5 Now click on orange color Save button.

Customization

  • You can skip below Jquery file if your template already included another Latest Jquery file.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
  • Replace https://www.facebook.com/BloggerSpice with your Facebook Fan page URL.
  • To change the widget loading time alter .delay(3000) with more or less digit.
  • To display the widget every time just delete $.cookie('popup_ box', 'yes', { path: '/', expires: 6 }); line.
  • To change the Doted color alter border:5px dotted #000000; color code only.
  • To change the Close button background color please alter background: #000000; color code only.
That's it. Now check your Blog and see the fancy doted style facebook like box. I hope your Blog visitors will love this unique widget. Thank you.
Go Up