Facebook Popup Like Box Widget for Blogger

Facebook pages provide great opportunity for bloggers to get their their audience in one place and let them know each and every update of your blog.

Today i will be showing you how you can get a Facebook pop up like box widget for your blog.

And one thing to keep in mind is that pop up widgets are more successful in getting likes for your blog.So i really recommend that you get one for your blog as well.So let's just have a look at the screenshot from this widget first.

Facebook Popup like Box ....

Well in here i have provided the screenshot of an fb entertainment page which i own at Facebook.But the like box with your fb page will look quite similar to this.So let's let's just take you towards to the guide.

Add Facebook Pop up Like Box For Blogger : -

1.Go to your blogger dashboard and select your blog.

2.Now head to the layout section of the blog and add a gadget,

Recommended Post :-Where To Find Free Blog Images
Recommended Post :-How to Get Your New Blog Indexed In a Day

Recommended Post :-How To Remove Default Sharing Buttons from Blogger

3.You need to add Html javascript gadget , then just place the following code in it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
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;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx7HLUfhWtgUOuPDpWJ-WoUgu93tNDwJ4lN9aWMgjmvQuoRPSDk-TJcRRGkPoWZEKksxUruGX0bE0M6X8XQ4U2RfTRj3lneiPsKvgabbtWqDnU4kFjw6M790zKSwz50rOHBlh8t3KpaHvY/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-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'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/letsfallinlove318&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div></div>

Note : -

• Just replace the facebook page url highlighted in red  with your own facebook page url.

4.And that's all just hit the save icon and  you will get the widget for your blog as well.

Share Your Opinion : -

Do share your views about the post by commenting and if it is giving you a hard time then just feel free to contact me.Meantime if you liked it and it worked for you then do share it to help your friends.More like these are coming in future so follow or subscribe to stay in touch.

Was the content worth a share?

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn

Posted by Hamza Posted on 12:01 9 Opinions

Categories: Widgets