In this tutorial I will try to explain How to put a basic facebook login button next to a comment form so that users can login through their facebook accounts and are then allowed to comment on your blog.
You need to edit the source code of the page where you want the facebook login button to appear. Open the source code editor and enter the code
<fb:login-button onlogin="alert('Authenticated!');"></fb:login-button>
You see it is a simple html tag. It allows you to easily incorporate facebook components into your webpage. But in order to make this work you are going to need a little bit of javascript. Add the following to your webpage (the best place to add this javascript is just above the closing body tag in your page.
<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js”></script>
The second step is to add another script to tell facebook who you are and how to communicate with you. To do this add the following code;
FB.init(“your application key”, ”cross domain receiver file”)
As stated within the code, the first argument is your application key and the second argument is the cross domain receiver file. Both of these are explained below. Facebook treats every website as an application and you need to go to facebook to get an application key. Go to facebook developers http://www.facebook.com/developers. This is the place where you can configure all your application settings. It is a dedicated platform from facebook to users like you and me where we can develop our own facebook application. At the developers page, click “setup a new application”. You need to enter two fields to get you started. The first is your application name. This is what your users will see when they connect to your website. So make sure that it is something recognizable. After entering a name, you need to click the “optional fields button” and then enter the root url of your website in the field “Base Domain”. Edit further options if you want but I recommend to leave them as they are. Click “submit” to complete their application. When your application is created, you will se to special key visible to you. The first one is titled API key and the second one is Secrets. Other things visible on this page are application id and contact email etc. Copy the API key and paste it into the “your application key” in the FB.init code. The second argument was the url to your cross domain receiver file. It should be a simple url to a page that enables secure connection between your website and facebook. Create a new file within your website’s root directory and name it something like “cross_domain_reciever.htm” or something you can remember. Enter the filename in the cross domain receiver file argument. You need to do one more thing to make sure that your html code is standards compliant. You need to make an extra xml name space declaration in the html tag at the top of the page. The declaration should look something like below:
xmlns:fb=http://www.facebook.com/2008/fbml
That’s it. Check how it works by refreshing the page. You should see a connect button at the place where you added its code.
| |
|
Welcome to AstaHost - Dear Guest | |
Toggle shoutbox
Shoutbox
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||



