How To Add Facebook Like Box (Like Box Facebook) In Blogger
Facebook remains a great source decent traffic to blog sites. If you are not yet availing yourself of the benefits of using the numerous Social Networking Media to increase traffic to your site and maximize your blogging profits, I would advise you don't delay any longer. |
| Facebook Like box |
In one of my previous blog posts, I gave a very detail tutorial on how to add Facebook Comment Box to your blogger.
In order to do this, you need have to first get Facebook App ID. All these I covered in that tutorial with well-detailed screenshots. You might want to see the article here before you continue.
I will be showing you how to add facebook like box in your blogger. I will give you about three different codes/methods. This is because, from my own experience and so many others, a code or method that didn't work for you may just easily work for the other person.
I think, the reason for this is due to some little subtle differences in Template coding, especially when it has to do with 3rd party template.
If you had just tried it once and it worked for you, that's good. For me, I tried severally, attempting different codes and tweaking before it worked.
So, I will give you those info so that you might not have to spend days before it works for you. It will just be a matter of minutes and your "Facebook Like Box" will be alive.
Method One
Step 1. Log in to your blogspot.com dashboard, click on the Template >> Edit HTML and now insert the Facebook Javascript SDK code just below the <body>
If it does't work, you may also try just before the body close tag </body>
The Facebook Java script SDK code here:
<script> window.fbAsyncInit = function() { FB.init({ appId : 'Your App ID', xfbml : true, version : 'v2.3' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>Now replace "Your App ID" with you real Facebook book App ID.
This Facebook Java script SDK code is so important that without it, your like box, share box and comment box will not work properly.
Step 2. Now place any of one of these codes where you want it to be seen - Code 1, Code 2, or Code 3.
You can add them using "Add Widget".
Code 1.
<!-- Place this Facebook Standard like code Where you want to see -->
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false">
</div>
<!-- End of Facebook Standard like code -->
Code 2.
<!-- Place this Facebook like button with couter code Where you want to see -->
<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false">
</div>
<!-- End of Facebook Standard like code -->
Code 3.
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
Copy code 3 and place it anywhere within the body tag, ie., place under <body>.
Method Two: How to add Floating Facebook Like box.
Grab the code below, then go to your blogger dashboard >>Layout option >>Add Widgets >> Select HTML/Java Script option, now paste the code in there and press save button. Then click save arrangement.
The Code here.
<!--Floating Facebook Widget START-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abt").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abt{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrcMx4gOBm7FQEY3l9BWQsdIly0awd_GgZvDDYNjMAsD3NR3k9EGC8bWN2cSnxbxbGTvALqCkJctCXqtQshCymnQk66WBFonmVGsC2X1tJRxd3V7E-51GRkTpmKnx6BkXYqq1WFYTjzBo/s1600/ABT_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%;} .abt div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abt span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abt span a{color: gray;text-decoration:none;} .abt span a:hover{text-decoration:underline;} } </style><div class="abt" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYour App ID&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;"></iframe><span><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://success-naija.blogspot.com/2015/05/how-to-add-facebook-like-box-in-blogger.html">Fb Floating Like Box </a></center>
</span></div>
</div>
<!--Floating Facebook Widget END-->
Now replace Your App ID with your Facebook App Id.
Method Three
In this method, I am going to show you how to add Facebook like box:
1. Below every posts you make in blogger.
2.Below post titiles in blogger.
Add Facebook Like box below Post articles.
Steps.
Step 1. Login in to blogger dashboard
Step 2. Select Template >> Edit HTML
Step 3. Within your HTML template code, find "<data:post.body/>". You can achieve this by using this function "CTL + F" in the body of the template. A search box will come up, then type in <data:post.body/>. If it doesn't work, search for it manually within the body tag.
Step 4. Paste the following code (see below) below this <data:post.body/> and save the template.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style='margin-bottom:20px' class="fb-like" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
You can customize it to your taste in this way: Change value of data-share=”false” to data-share=”true” to show both like and share buttons.Note: If you are using a magazine Template (Theme), like my own, you will likely have more than one <data:post.body/> codes. In that case, you may have to try out the whole codes to see the one that will work. My one template has three of such codes, and it worked at the 3rd one.
Add Facebook Like box below Posts Titles in blogger
Follow exactly the above outlined steps and paste the code (see below) just under "<data:post.body/>". As explained above, try out placing the code under each of them until you get the one that works.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style='margin-bottom:20px' class="fb-like" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
That's how to install facebook like box to blogger. If you have followed my steps correctly your Facebook like box will have no reason not to work.Please if you have found the article useful please Like it and Share with your friends.
Now Spread Out Your Opinion!!!
Thanks.
0 Comments