Blogging Facebook How To

3 Type of Facebook Like Box Widget For Your Website

Are You Struggling to get More Facebook Like?


If Yes Then use this Facebook Like box on your website Or blog and Improve your Facebook Like visibility and visitor also.

Today Facebook is Largest Social Network provider website and their are more then 1.28 billion active user,20 Million Facebook messenger User
 of Facebook and it will grew every day.


Make sure use Facebook Widget For your website or blog to connect More and More active User of facebook and drive major traffic to your site also You have chance to connect with large Facebook audience. 


Then you can use this tools to easily share your certain Profile,Pics, videos and News to People.

Now This is Easy to add Facebook like Box widget In your Website Or Blog There are the best tutorial For this for Blogger User Follow My simple Steps. 

How to add Facebook Like Box Widget In Blogger


1) Login to Your Blogger Account and Go to Your Blog Dashboard Menu.click On layout tab from left panel and click to Add a Gadget Link.


2) After Click to Add Gadget Link a one Pop-up box appear on your blogger screen. their are various Gadgets are available on your screen but you need HTML/Java Script widget for your blog. 



3) After click the blue Plus Sign for that Gadget.

4) Select the below code and paste that in your blog or website. this is a Html / Java script code.


5) Now Click To Save Button And Enjoy the Facebook Like Box.

Simple Facebook Like Box

This is a Simple Facebook Like Box and it is Fixed Position widget so it’s show On Right Side on your website.you want to change that position with take new widget on footer bar.

<div id=”fb-root”>
</div>

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like-box href=”https://www.facebook.com/grabtricks” width=”300″ show_faces=”true” border_color=”#227AA7″ stream=”false” header=”true”></fb:like-box>

Floating Facebook Like Box

This Floating widget is Fixed Position on right side in Your Site.I have worked hard on this widget to spread love in Blogging community.If you want to appreciate my efforts then don’t remove the footer credit link. This is the only thing which I want from you.it’s made with Jquery so it’s work great.

<script type=”text/javascript”>

/*<![CDATA[*/ jQuery(document).ready(function() {jQuery(“.grabtricks”).hover(function() {jQuery(this).stop().animate({right: “0”}, “medium”);}, function() {jQuery(this).stop().animate({right: “-250”}, “medium”);}, 500);}); /*]]>*/

</script>

<style type=”text/css”>

.grabtricks{background: url(“/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.png”) no-repeat scroll left center transparent
!important; float: right;height: 270px;
padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}

.grabtricks div{ padding: 0;
margin-right:-8px;
border:4px solid  #3b5998;
background:#fafafa;
}

.grabtricks span{
bottom: 4px;font: 8px “lucida grande”,tahoma,verdana,arial,sans-serif;
position: absolute;
right: 6px;text-align: right;z-index: 99999;}

.grabtricks span a{color: gray;text-decoration:none;} .FirstbloggerTricks span a:hover{text-decoration:underline;} }
</style>

<!–Brought to you by www.FirstbloggerTricks.com–><div class=”grabtricks” style=””>
<!–Brought to you by /2015/06/facebook-like-box-widget.html–><div>
<!– /2015/06/facebook-like-box-widget.html–>

<iframe src=”http://www.facebook.com/plugins/likebox.php?href=”http%3A%2F%2Ffacebook.com%2Fgrabtricks&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270″” scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;”>

<!–Brought to you by www.grabtricks.blogspot.nl–></iframe>
<!–Brought to you by www.grabtricks.blogspot.nl–><span>
<!–Brought to you by www.grabtricks.blogspot.nl–></span>
</div>
</div>


PopUp Type Facebook Like Box

This is Pop Up Type Facebook Like Box It’s work Awesome.it is appear when visitor can visit Home Page of website.

<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(/-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/grabtricks&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>

 Last Words

Enjoy the Awesome Facebook Widgets You can Put this widgets in your Html website Or blog.


You Have any Suggestion or Query Related any Topic then Post In below Comment Box I will try to Solve Your Query and Take Best Guideline For You.

Leave a Reply

Your email address will not be published. Required fields are marked *