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,
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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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?

11 comments:

  1. Replies
    1. Test this widget after going incognito, this widget uses cookies which causes problems sometimes if you visit your blog again.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. its now working properly i do mistake :)
    http://www.tricksisland.com/

    ReplyDelete
  4. oh yeah its working now perfectly in this blog :)
    http://www.meraustaad.blogspot.com

    ReplyDelete
  5. nice tutorial bro, keep it up, and also thanks for sharing this awesome thing with us..
    http://goo.gl/ikh9f4

    ReplyDelete
  6. Its Working. Great
    If not working for anyone then delete cookies in your browser [CTRL + SHIFT + Del]

    ReplyDelete

Translate

Follow via: