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 Facebook.com, right from your blog without them going to facebook.com 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: ogbongeblog.blogspot.com/) 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='"loading" + data:blog.mobileClass'> and paste the code highlighted below directly under it and save the template.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=141084445958514&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:
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.
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.
SKYPE ID: ogbongeblog
Written By Jide Ogunsanya on May 19, 2011
Labels: blogger tips
Like My Facebook Page and Follow Me on Twitter and Google+: