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.
STEPS
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:
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.
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.
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.
STEPS
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:
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 www.facebook.com/jideogunsanya
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.
Thanks for sharing this. Will try it out once i get on my pc.
ReplyDelete9ice 1. I too believe U joor.
ReplyDeleteHow do I upload my sitemap to Google. My sitemap has been created, but I was asked to upload it to one folder on my site and then submit it to Google. I don't understand it.
ReplyDeleteI really like the facebook Login button, but for some reason it wont work on post pages. It works on the homepage and static pages only, not on post pages. Is there a way to make it invisible when on post pages. Please let me know.
ReplyDelete@o-onekonceptz ..thanks bro
ReplyDelete@Okagbabeluodachi ...read: http://www.ogbongeblog.com/2011/03/submit-bloggerblogspot-sitemaps-via.html
@Blog this Link... Mine works on ALL pages. Check your code, maybe you used a code restricting it to Home page and Static Pages only.
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.
ReplyDeleteIts working perfectly on my blog. I guess, it might be an issue with the template you are using. I am using a blogger's designer template and not a third-party template
ReplyDeleteit is showing me error prompt while clicking on login button,but comment form is working properly with blog API Error Code: 191
ReplyDeleteAPI Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.
YOU THE BEST
ReplyDelete