Hi guys, as you know that Social Media plays very important role to promote your Blog/Website and almost 30% of traffic we get from social sites. Facebook is very famous social site and and it will be very good for you site to have facebook Like or Fan widget so that your readers can like your page and also see your others as well. So, today, i am going to share few Facebook widgets which you can use as per your need and likeness.
1. Floating Facebook Like Box Widget
Are you struggling to get more facebook likes? Add a floating facebook like box to your blog or website. The widget remains in a fixed position on the right-hand side of your site. When you hover over the blue facebook image, the like box will then slide and reveal itself.
How to
- Add the following code anywhere in the body section <body> of your template.
<!--Floating Facebook Widget by http://blogsmasala.blogspot.com/ START--><script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zqUqLOfeiJ4GGgMQtssrYlnbjTnlS1JYWDUPQfBAgIOgHk9I28U2NhtWnE7xHmZxcwctoSfdOd12bLw8aTdEKd5fXiUA2GULQZ3_ezNc94ZtDVDPpLUDYdyRC-2mmNLV-6Fkf6JtBd6S/") 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%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><!--Brought to you by http://blogsmasala.blogspot.com/-><div class="theblogwidgets" style=""><!--Brought to you by http://blogsmasala.blogspot.com/--><div><!-- http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fblogmasala&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.TheBlogWidgets.com--></iframe><!--Brought to you by http://blogsmasala.blogspot.com/--><span><!--Brought to you by http://blogsmasala.blogspot.com/--><center><a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://blogsmasala.blogspot.com/">BlogsMasala</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://blogsmasala.blogspot.com"></a></center></span></div></div>
- If the floating facbook widget is not working properly after step 1, then you need to add jquery to your site. Follow the instructions below.
- Go to Design>Edit HTML
- Search for <head> and just below it paste the following JQuery code.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>How to Customize
- Go to the blogger dashboard>Layout. Click "edit" on the "HTML/Javascript" gadget.
2. Facebook Popup Like Box
How to
- Add the following code anywhere in the body section of your template.
<!-- Facebook Popup Widget START --><!-- Brought to you by http://blogsmasala.blogspot.com/-->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%;}#JasperRoberts {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;}#TheBlogWidgets {float:right;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5D9stdayjeGv_5M93vvoDPo_pDrQWur3-QNwne9BcJW3d7i8NSOAOqnoOShdj6Ng5EkMu7vGD9vEDcFZEFsy2vAoaRFNN4_ik8BryJVJPUzwRA0x9ewtXkJG1IK2rwg4iQxh20G-D5Tuj/s1600/TheBlogWidgets.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;}#linkit,#linkit a.visited,#linkit a,#linkit a:hover {color:#80808B;font-size:10px;margin: 0 auto 5px auto;float:center;}</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 IEoptions.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(20000).fadeIn('medium');$('#TheBlogWidgets, #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='JasperRoberts'><div id='TheBlogWidgets'></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/blogsmasala&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center><span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://blogsmasala.blogspot.com/">BlogsMasala</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://blogsmasala.blogspot.com/"></a></span></center></div></div>
- You are done.
How to Customize
Where to find the code?
- Go to Design>Edit HTML
- Search for blogsmasala and and replace it with your site's facebook page URL.
By default the widget pops up 20 seconds after the page finishes loading. Search for the code below and change the number 20000 to a greater or lesser number. 1 second = 1000. 10 seconds = 10000. 60 seconds = 60000.
.delay(20000)Popup every time the page loads By default, the like box widget only shows up the first time the user visits your page. If you would like the facebook box to popup every time the page loads, then remove this line of code:
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });Display only when user visits your homepageYou can do this by surrounding the widget code with these conditional tags below. Go toTemplate > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right above this body tag. Make sure to include the conditional tags below.
If you're still having trouble with the popup widget, please leave a comment below. I am happy to help you!<b:if cond='data:page.type == "index"'>REPLACE-WITH-FACEBOOK WIDGET-CODE-HERE</b:if>
3. Facebook Like Box
This is a nice Facebook Like Box for your site. Unlike Floating Facebook Like Box and Popup Facebook Like Box, this will reside at one place where your want it to be and your reader will be able to see it.
How to
- Go to this Link.
- Give your site/blog name and select other option as required.
- Click on Get Code and we require only Iframe code.
- Copy the code.
- Now, go to your blogger dashboard and select layout.
- Click on Add a Gadget and select an Html/java gadget.
- Paste your code inside the gadget and place it where you want your Facebook Plugin to appear.
- You are done.
How to
- Go to this Link.
- Give your site/blog name and select other option as required.
- Click on Get Code and we require only Iframe code.
- Copy the code.
- Now, go to your blogger dashboard and select layout.
- Click on Add a Gadget and select an Html/java gadget.
- Paste your code inside the gadget and place it where you want your Facebook Plugin to appear.
- You are done.
Post a Comment Blogger Facebook
Please Do not Spam. Give us Positive feedback to make this blog more better.