How to Add Facebook Like Box into Blogger Blog
- Simple fecebook like box
1. Login To Blogger Account.
2. Click Layout > Add A Gadget.
3. Select HTML / Javascript > Paste The Following Code In content Box.
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/ThingsGuide/281417998619583&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&"
style="border:none; overflow:hidden; width:292px; height:258px;" >
Replace my facebook page URL with your page URL, Change Width And Height According To Your Template.
4. Now save and you are done.
- Floating facebook like box for Blogger
Now I came up with new tutorial for adding floating like box to blogger.
- Adding Jquery Plugin
1. Go To Dashboard > Template > Edit HTML
2. Search
for </head> teg in your template and just below it paste the
following JQuery code (You can ignore this step if Jquery Link is
already added in your template)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
- Adding Widget Code
1. Go to Layout > Add A Gadget
2. Select HTML/Javascript
3. Paste the following code inside it,
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmQKs-8PLmkA3ev3E4Lzr1s8WsjFRKvP3hzN_kJpnmPABa4ubuiEJLnNQtLLUXFYRR5R0DU8qczO73nj0QTyRwwQIHu2R3Xn0RA5s-0LLPnaXmrE5MlthaD4mRUnn0ULGbBFtjKDnGlzs/s1600/FloatingFB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 300px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages/ThingsGuide/281417998619583&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=292" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 292px; width: 245px;background:#fff;"></iframe><span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="http://things-guide.blogspot.com/" target="_blank"> TG</a></span> </div> </div>
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmQKs-8PLmkA3ev3E4Lzr1s8WsjFRKvP3hzN_kJpnmPABa4ubuiEJLnNQtLLUXFYRR5R0DU8qczO73nj0QTyRwwQIHu2R3Xn0RA5s-0LLPnaXmrE5MlthaD4mRUnn0ULGbBFtjKDnGlzs/s1600/FloatingFB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 300px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages/ThingsGuide/281417998619583&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=292" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 292px; width: 245px;background:#fff;"></iframe><span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="http://things-guide.blogspot.com/" target="_blank"> TG</a></span> </div> </div>
4. Replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.
5. Now save your template and you are all done!
Visit your Blogs to see it floating at the right side of your webpage.
No comments:
Post a Comment