Fancy Dotted Style Facebook Pop Up Like Box Widget
Fancy Doted Style Facebook Pop Up Like Box Widget
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.
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.
4 comments
I'm very glad that you love my widget. Stay tune for more good stuff.