Subin's Blog

Peace ☮️, Love 💙, Freedom 🕊 & Curiosity 👨‍💻

How to add Facebook log in button to blogger blog

Blogger
Tutorials

Read {count} times since 2020

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.

           
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


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;">&nbsp;</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;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</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 &nbsp;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;">&nbsp; var js, fjs = d.getElementsByTagName(s)[0];</span>
    </div>
    
    <div class="separator" style="clear: both;">
      <span style="font-family: inherit;">&nbsp; if (d.getElementById(id)) return;</span>
    </div>
    
    <div class="separator" style="clear: both;">
      <span style="font-family: inherit;">&nbsp; js = d.createElement(s); js.id = id;</span>
    </div>
    
    <div class="separator" style="clear: both;">
      <span style="font-family: inherit;">&nbsp; js.src = &#8216;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>&nbsp;&quot;&#39&#8242;;</span>
    </div>
    
    <div class="separator" style="clear: both;">
      <span style="font-family: inherit;">&nbsp; fjs.parentNode.insertBefore(js, fjs);</span>
    </div>
    
    <div class="separator" style="clear: both;">
      <span style="font-family: inherit;">}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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&#8243; data-max-rows="1&#8243;></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&#8217;s finished you will see your Facebook log in button in your blog</span>.</span>
  </div></div>