Jun
16 |
Facebook Connect Login.
Integrating Facebook Connect with your blog has been covered by me already a few months back. I thought it would be a good idea to take an even simpler approach to its implementation so that more people could understand it. This post will cover what you need to set it up and get it running. Feel free to read my in depth steps or just read the bold lettering and copy the code.
1. Get your Facebook API key.
First things first, go to the Facebook developers section here and set up a new application. This will get you an API key. The API key is needed to allow your domain name to send requests for authentication to Facebook from your domain. This means you cannot test from your local machine. You will have to use a sub domian or your domain.
2. Add PHP to the beginning of web page.
If you are using PHP, you will need to download two files from Facebook. The link to these files can be found here. Extract the archive and upload the contents to your web server. After uploading it to your server, include two php files: facebook.php and facebookapi_php5_restlib.php. I placed mine in a folder called FB under my PHP directory as follows.
<?php
require_once('PHP/FB/php/facebook.php');
require_once('PHP/FB/php/facebookapi_php5_restlib.php');
?>
3. Create a file called xd_reciever.htm as shown below.
Next, you will need to create a file called xd_reciever.htm. It's real easy, just copy the following code into a new file called xd_reciever.htm and put it somewhere on your web server.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
4. Add JavaScript after the opening <body> tag.
Next, you will need to include the Facebook JavaScript client library. This does not need to be downloaded. It can be referenced from Facebook directly as follows.
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
5. Add Facebook Connect button below the JavaScript previously added.
Next, the Facebook Connect button will be added to the document.<fb:login-button onlogin = "FBCLogin();"></fb:login-button>
6. Add JavaScript anywhere below the button code.
Next, add some more JavaScript to load the Facebook Connect button and activate to the DOM. This code will load the button if the user is not logged in and will not display anything if the user is logged in. Note FB.init() requires that you have an api key from Facebook and the file xd_reciever.htm on your web server.
<script type="text/javascript">
function FBCLogin() {
FB.XFBML.Host.parseDomTree();
}
FB.init("youApiKey", "xd_receiver.htm", {"ifUserConnected" : FBCLogin});
</script>
And that's it! Feel free to read my in depth steps or just read the bold lettering and copy the code. As always if you have any questions, feel free to post them below.
require_once('PHP/FB/php/facebook.php');
require_once('PHP/FB/php/facebookapi_php5_restlib.php');
?>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
function FBCLogin() {
FB.XFBML.Host.parseDomTree();
}
FB.init("youApiKey", "xd_receiver.htm", {"ifUserConnected" : FBCLogin});
</script>
Comments