How to add facebook Login button to blogger/blogspot blogs

In this tutorial, I am sharing with you how you can add the Facebook Login button to your blogger/blogspot blog. If you have the button on your blog, your blog readers can easily log in and log out from, right from your blog without them going to website. More so, they will be able to comment easily on your blog posts via the Facebook Comment form, IF you have added the facebook comment form to your blog posts.

NOTE: If a visitor to your blog clicks on the “facebook login” button, he/she will not be taken away from your blog. Instead, your blog page will refresh and the “facebook login” button will change to “facebook log out” button.


STEP I: If you have already added facebook comment form to your blog, with the help of  my Facebook Comment Form Tutorial, just  go to Step 4, IF NOT, just go to Step 2.

STEP 2: Visit Facebook developer page .

You might be asked to verify your account, choose any of the verification options to complete the verification.
Thereafter you will see a small form, enter your blog name ( you can type any name ).
Then, enter your blog url with an ending slash in Site URL (for example: and click on “Create application”.

Don’t forget to put the “/” sign at the end of your blog url as indicated in the picture below.

If successful, you should then see a page displaying your application info. Now copy the App ID as indicated in the picture below and save it in a notepad.

STEP 3: Login to you Blogger dashboard and navigate to Layout > Edit HTML and tick the small “Expand Widget Templates” box. Using “CTRL+F“, search for the code <body> OR <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’> and paste the code highlighted below directly under it and save the template.

<div id=”fb-root”></div><script src=”;xfbml=1″></script>

Replace the APPID in the code above with your APP ID provided from Facebook which you copied in Step 1 and save the template.

After adding the code, your code should now look like:

STEP 4:  Still in Design/Layout > PAGE ELEMENTS ,  click on ” ADD A GAGDET” on the sidebar or any other location you want to add the button to. From the GADGETS list, choose HTML/JAVASCRIPT.  In the title field, you can enter “Login to Facebook” and in the content box, copy and paste the code below, into it.

<div style=’float:center;’><fb:login-button autologoutlink=”True” length=”short” background=”white” size=”large”></fb:login-button> </div>

Click on SAVE , then view your blog. You should see the Login button on your blog.

Note: if your blog is already opened before adding this code to your blog, you will have to refresh the page and even clear the cache of your browser.

I hope this helps…

If it works for you, kindly use the comment form to share the link to your blog, so I can check it out.

Connect with me on facebook via

For everyday solutions to your blogging problems, join fellow Bloggers at BLOGGERSLAB.( Facebook Group)

In my future posts,  I will share with you, how you can add the Facebook , “Like Box” etc to your blogger blog. So, SUBSCRIBE to this blog now if you don’t want to miss them, even if I post them here, when you are not online.

Please Share :

Receive Alerts In Your Email Inbox

Enter Your Email Address Below To Receive Latest Updates via Inbox, Free of Charge!

What do you think?

93 Points
Upvote Downvote

Written by Jide Ogunsanya

Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here or join my Telegram Group here.

Comments are closed.


  1. I'm sorry I should have explained myself better. The facebook button will show up on all pages it just wont work on post pages. When I click on it on a post page nothing happens, but when I am on any other page it will work just fine. To me this doesn't make sense, but it's happening. Is there any way to fix this.

  2. it is showing me error prompt while clicking on login button,but comment form is working properly with blog API Error Code: 191
    API Error Description: The specified URL is not owned by the application
    Error Message: redirect_uri is not owned by the application.

Download a FREE test Gift #1 of Onome Maureen’s SIX Birthday Celebration Cash Cow Gifts”

Big Brother Amplified ( Big Brother Africa 2011) Schedule on DSTV: AfricaMagic, MagicWorld etc