Thursday 21 February 2013

How to add 'Facebook Like Box' for blogger


Facebook like box


If you had the thought of adding a plugin or widget of facebook like box you came to the right place. Here in this tutorial I would like to take you through the process of adding 'Facebook Like Box' for blogger.

·         Login to your Blogger Dashboard, and navigate to Template > Edit HTML.
·         Click on the checkbox which says “Expand Widget Templates”.
·         Now search for <body> and paste the following code immediately after it.

Code:

<!-- .fb code starts -->
<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<!-- .fb code ends -->

    ·         After adding this code save the template.
    ·         Now navigate to Layout and click on Add a Gadget and select HTML/Javascript.
    ·         Paste the code given below.

Code:

<div class="fb-like-box" data-href="https://www.facebook.com/Techpro365" data-width="256" data-height="260" data-show-faces="true" data-colorscheme="dark" data-stream="true" data-border-color="black" data-header="true"></div>

          ·     Replace https://www.facebook.com/Techpro365 with your facebook fanpage link or url.
          ·         Click on save and you are done.

      Customization:

       You can place this gadget anywhere according to your convenience of your blog.
·         You can change the dimensions of the data-height and data-width fields according to the dimensions required for your blog.
·         With data-stream=”true” it shows the posts of your blog, if you don’t want to show your post simply remove it. Same thing can be done with data-border-color="black".
·         We have two choices with colour scheme dark and light, modifications can be done as per your choice.

If you are facing any problems in adding the code please feel free to let me know through comment or contact me.




Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:

About Author:

Raja Sekhar is the founder of this blog. He has been blogging since 2010 and is an active contributor of many blogs.

0 comments :

Post a Comment

Related Posts Plugin for WordPress, Blogger...