Now you can see a lot of blog has a Facebook login button.
You can also add this to your blog.
See an example here under Social Login tab.
1st step : go to https://developers.facebook.com/apps and create a new app.
You can also add this to your blog.
See an example here under Social Login tab.
1st step : go to https://developers.facebook.com/apps and create a new app.
Type your App name in App Display Name. You don’t need to type anything on App Namespace.
After typing your app name and after clicked on "I agree to the Facebook Platform Policies." click Continue button.
Now you should see a new page like this.
Type the required information and click on 
button
button
2nd step : Go to Template/Design > Edit HTML
Paste this code below text:
xmlns:fb="http://ogp.me/ns/fb#"
<p>
<span style="font-family: inherit;">Example:</span><br /><span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><a href="https://2.bp.blogspot.com/-z5_XrYguhlE/TzExTRIgWGI/AAAAAAAAAac/v0t_0Qc2p_M/s1600/fb9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-z5_XrYguhlE/TzExTRIgWGI/AAAAAAAAAac/v0t_0Qc2p_M/s1600/fb9.png" /></a></span>
</div>
<div>
<span style="font-family: inherit;"><br /></span>
</div>
<div>
<span style="font-family: inherit;">3rd step : Go to <b style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px; text-align: -webkit-auto;">Blogger > Layout</b><span class="Apple-style-span" style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px; text-align: -webkit-auto;"> </span></span>
</div>
<div>
<span style="font-family: inherit;"><span class="Apple-style-span" style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px; text-align: -webkit-auto;"> </span></span>
</div>
<p>
<span style="font-family: inherit;"><span class="Apple-style-span" style="background-color: white; color: #333333; font-size: 14px; line-height: 19px;">Click on</span><a href="//3.bp.blogspot.com/-dgJ1CCw0N3I/TzEvAoOnHGI/AAAAAAAAAaA/4AWaRv9zNwI/s1600/fb6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="//3.bp.blogspot.com/-dgJ1CCw0N3I/TzEvAoOnHGI/AAAAAAAAAaA/4AWaRv9zNwI/s1600/fb6.png" height="29" width="230" /></a>button.</span>
</p>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><br /></span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"></span>
</div>
<p>
<span style="font-family: inherit;">Select HTML/JavaScript:</span>
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="//3.bp.blogspot.com/-_gbP2lRSQAU/TzEvXRJvIxI/AAAAAAAAAaI/6OYFfBP_WKI/s1600/fb7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="//3.bp.blogspot.com/-_gbP2lRSQAU/TzEvXRJvIxI/AAAAAAAAAaI/6OYFfBP_WKI/s1600/fb7.png" height="102" width="436" /></a>
</div>
<div class="" style="clear: both;">
<span style="font-family: inherit;">Paste this in the <b>content</b> area:</span>
</div>
<blockquote class="tr_bq">
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><script>(function(d, s, id) {</span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"> var js, fjs = d.getElementsByTagName(s)[0];</span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"> if (d.getElementById(id)) return;</span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"> js = d.createElement(s); js.id = id;</span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"> js.src = ‘http://connect.facebook.net/en_US/all.js?xfbml=1&appId=<span class="Apple-style-span" style="color: red;"><b><i><u>YOUR APP ID</u></i></b></span> "'′;</span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"> fjs.parentNode.insertBefore(js, fjs);</span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;">}(document, 'script', 'facebook-jssdk'));</script></span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><div class="fb-login-button" data-show-faces="true" data-width="200″ data-max-rows="1″></div></span>
</div>
</blockquote>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><br /></span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><a href="//4.bp.blogspot.com/-pccHyyinKZU/TzE9Gq9DHhI/AAAAAAAAAao/xYZ1vmXgPKU/s1600/fb9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="//4.bp.blogspot.com/-pccHyyinKZU/TzE9Gq9DHhI/AAAAAAAAAao/xYZ1vmXgPKU/s1600/fb9.png" /></a></span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><br /></span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><br /></span>
</div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit;"><span class="Apple-style-span" style="font-size: large;">Now it’s finished you will see your Facebook log in button in your blog</span>.</span>
</div></div>