Tutorial Add a facebook login button to your blogger

 Tutorial Source

Tutorial how to add a FaceBook Login button to your blogger/blogspot. The earlier bug was that the login button was not showing, this has to do with the first step for it to work correctly.

Step One

• Create an FaceBook App on the Facebook Developers website.  This step is pretty much an easy walk through.  Below is an image of what you need to get your app working correctly.  Once you create your Facebook app it does take a little while for it to work on the website/blog so be patient.

• In the image below make note that the following fields need to be completed.  This set-up is a basic format.  Once you create the Facebook app, this will help to promote your website as well. 

Step Two

• Now that your Facebook app is ready the rest is very easy.  Go to the blogger design site and select the blog you wish to add the Facebook Login Button to.

• Select the Layout button and add a new Gadget, scroll down the list and select the HTML/Javascript Gadget.

Step Three

• In the window copy and paste the following code:

<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&appId=CHANGE THIS TO YOUR PERSONAL APP ID TO YOUR OWN PERSONAL ID LIKE THE ONE IN THE IMAGE ABOVE, JUST ABOVE THE SECRET KEY";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>

Click Save and you are done!