Introduction
Facebook Connect allows web developers to leverage the Facebook social application for their own off-Facebook applications. This tutorial will walk you through setting up a new Facebook application for use with Connect, as well as a couple examples that demonstrate how to use the Javascript API.
Step 1
Setting up a new Facebook Application
Login or Signup to track your progress
You first need a Facebook Platform API key for your site. Follow these steps to create an application with the Facebook Developer application.
- Go to http://www.facebook.com/developers/createapp.php to create a new application. You must be logged into Facebook to create an app.
- Enter a name for your application in the Application Name field.
- Accept the Developer Terms of Service, then click Save Changes.
- On the Basic tab, keep all of the defaults, except enter a Callback URL. This URL should point to the top-level directory of the site which will be implementing Facebook Connect (this is usually your domain, e.g. http://www.example.com, but could also be a subdirectory).
- Take note of the API Key and Secret Key, you'll need them to access Facebook Connect.
- Click the Connect tab. You should include a logo that appears on the Facebook Connect dialog. Next to Facebook Connect Logo, click Change your Facebook Connect logo and browse to an image file. The logo can be up to 99 pixels wide by 22 pixels tall, and must be in JPG, GIF, or PNG format.
- If your site is going to implement Facebook Connect across a number of subdomains of your site (for example, foo.example.com and bar.example.com), you need to enter a Base Domain (which would be example.com in this case). Specifying a base domain allows you to make calls using the PHP and JavaScript client libraries as well as get and store session information for any subdomain of the base domain. For more information about subdomains, see Supporting Subdomains In Facebook Connect.
- Click Save Changes.
Step 2
Create Cross-Domain Communication Channel File
Login or Signup to track your progress
You will need to create a cross-domain communication channel file called xd_receiver.htm and place it in a directory relative to the callback URL.
For example, let's say you're using http://www.example.com/ as your callback URL, but you want to store your Facebook Connect files in their own subdirectory, sayhttp://www.example.com/connect. You should create the xd_receiver.htm file in the directory from where you'll be serving your Connect Web pages (http://www.example.com/connect in our example).
Below is an example of a cross-domain channel file ...
Without a Cross-domain channel file, facebook will not be able to communicate correctly with your server.
You have the option of calling the file anything you want as long as you specify the correct file name in the FB.init method.
For example, let's say you're using http://www.example.com/ as your callback URL, but you want to store your Facebook Connect files in their own subdirectory, sayhttp://www.example.com/connect. You should create the xd_receiver.htm file in the directory from where you'll be serving your Connect Web pages (http://www.example.com/connect in our example).
Below is an example of a cross-domain channel file ...
<!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" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
c<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
You have the option of calling the file anything you want as long as you specify the correct file name in the FB.init method.
Step 3
FB Connect Javascript API Library
Login or Signup to track your progress
The quickest way to start using Facebook Connect on your server is to use the Javascript API library.
The two essential properties of connecting to the library are setting the correct document type
and loading the Javascript library at the END of your webpage, near the </body> tag.
Always check the Facebook Developer page for the latest version of the Javascript Library.
The two essential properties of connecting to the library are setting the correct document type
<!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" xmlns:fb="http://www.facebook.com/2008/fbml">
c<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
c
Step 4
Simple Application using Javascript API Library
Login or Signup to track your progress
Below is a simple example of how to login a user to your Facebook Connect application and display their name and profile picture from Facebook.
In order to test this on your own server, you will need to replace your API key in the code above. As you can see there are some strange tags in the code like, <fb:login-button>, this is an xfbml tag that is rendered by the FB Connect Javascript library. For a list of all the supported xfbml tags check out this link. If your xfbml is not rendering correctly, you either have not entered the correct Doctype or have a typo in your FB.init or Connect library include lines.
<!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" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="user">
Name: <input name="name" size="27"><br />
<fb:login-button length='long' onlogin="update_user_box();"></fb:login-button>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>"
+ "Welcome, <fb:name uid='loggedinuser' useyou='false'></fb:name>"
+ "</span>";
FB.XFBML.Host.parseDomTree();
}
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
var api_key = "put your API_key here";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path, {"ifUserConnected": update_user_box});
</script>
</body>
</html>
c<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="user">
Name: <input name="name" size="27"><br />
<fb:login-button length='long' onlogin="update_user_box();"></fb:login-button>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>"
+ "Welcome, <fb:name uid='loggedinuser' useyou='false'></fb:name>"
+ "</span>";
FB.XFBML.Host.parseDomTree();
}
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
var api_key = "put your API_key here";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path, {"ifUserConnected": update_user_box});
</script>
</body>
</html>
Step 5
Setting up a Template Bundle
Login or Signup to track your progress
You can also post stories to a user's profile feed, however you will need to first register a template bundle id here. A template bundle tells facebook how to display the data that you are sending to the feed. An application can have multiple Template Bundles as well as supports 'one line stories', a slightly longer 'short story', and a more verbose 'full story'. You can post links and images to feed stories as well.
Here is a very simple example of a one line story ...
"Actor" is the name of the user and "Statement" will be the story that you are posting.
Test it out with the following "sample template data"
Here is how your preview should look
Here is a very simple example of a one line story ...
{*actor*} likes one line templates and says {*statement*}
cTest it out with the following "sample template data"
{"statement":"hello!"}
c Chris likes one line templates and says hello!
c
Step 6
Post feed to user profile using Javascript
Login or Signup to track your progress
Using the example below, you will be able to post a simple feed story to a user's profile using the Javascript API. Once the "submit comment" button has been clicked it calls the submit_comment() javascript function which gathers the template data in a structured JSON format and calls ...
which will post a feed story on the logged-in user's profile.
Here is the complete updated code ...
FB.Connect.showFeedDialog("Place your template ID here", template_var);
cHere is the complete updated code ...
<!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" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="comments_post">
<h3>Post a comment to your Facebook Feed:</h3>
<form name="comment_form" method="POST">
<div id="user">
Name: <input name="name" size="27"><br />
<fb:login-button length='long' onlogin="update_user_box();"></fb:login-button>
</div>
<br />
<textarea name="comment" rows="5" cols="30"></textarea>
<br />
<input type="button" onclick="submit_comment();" value="Submit Comment">
</form>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>"
+ "Welcome, <fb:name uid='loggedinuser' useyou='false'></fb:name>"
+ "</span>";
FB.XFBML.Host.parseDomTree();
}
function update_user_not() {
}
function submit_comment() {
comment_text = document.getElementsByName("comment")[0].value;
var template_var = {"post-title":"pakt.com",
"post-url":"http://www.pakt.com/pakt/?id=ce00f49ed79e17aa&t=How_to_add_Facebook_Connect_to_your_website",
"comment-text":comment_text,
"images":[{"src":"http://images.pakt.com/images/user/chris/thumb_chris_5df0eb914796c68.jpg", "href":"http://www.pakt.com/pakt/?id=ce00f49ed79e17aa&t=How_to_add_Facebook_Connect_to_your_website"}]
};
FB.Connect.showFeedDialog("Place your template ID here", template_var);
document.getElementsByName("comment")[0].value = "";
}
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
var api_key = "Place your API Key here";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path, {"ifUserConnected": update_user_box});
</script>
</body>
</html>
c<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="comments_post">
<h3>Post a comment to your Facebook Feed:</h3>
<form name="comment_form" method="POST">
<div id="user">
Name: <input name="name" size="27"><br />
<fb:login-button length='long' onlogin="update_user_box();"></fb:login-button>
</div>
<br />
<textarea name="comment" rows="5" cols="30"></textarea>
<br />
<input type="button" onclick="submit_comment();" value="Submit Comment">
</form>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>"
+ "Welcome, <fb:name uid='loggedinuser' useyou='false'></fb:name>"
+ "</span>";
FB.XFBML.Host.parseDomTree();
}
function update_user_not() {
}
function submit_comment() {
comment_text = document.getElementsByName("comment")[0].value;
var template_var = {"post-title":"pakt.com",
"post-url":"http://www.pakt.com/pakt/?id=ce00f49ed79e17aa&t=How_to_add_Facebook_Connect_to_your_website",
"comment-text":comment_text,
"images":[{"src":"http://images.pakt.com/images/user/chris/thumb_chris_5df0eb914796c68.jpg", "href":"http://www.pakt.com/pakt/?id=ce00f49ed79e17aa&t=How_to_add_Facebook_Connect_to_your_website"}]
};
FB.Connect.showFeedDialog("Place your template ID here", template_var);
document.getElementsByName("comment")[0].value = "";
}
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
var api_key = "Place your API Key here";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path, {"ifUserConnected": update_user_box});
</script>
</body>
</html>
Step 7
Setting Extended Permissions
Login or Signup to track your progress
You can also use the Facebook Connect JS API for other activities like updating a user's status or posting feed stories while the user is offline. These two particular methods require the user to acknowledge an acceptance of an extended permissionshttp://wiki.developers.facebook.com/index.php/Extended_permissions.
The current extended permissions are email, offline_access, status_update, photo_upload, create_listing, create_event, rsvp_event, sms, video_upload, create_note, share_item.
The method above will launch a dialog for the user to either accept or deny the extended permission to allow your app to update the user's status.
Once the permission has been accepted, you might want to use a callback function that reloads the page.
The current extended permissions are email, offline_access, status_update, photo_upload, create_listing, create_event, rsvp_event, sms, video_upload, create_note, share_item.
FB.Connect.showPermissionDialog("status_update");
cOnce the permission has been accepted, you might want to use a callback function that reloads the page.
Conclusion
As you can see, you can get up and running with Facebook Connect in a matter of minutes. Refer back to the Javascript API Wiki http://wiki.developers.facebook.com/index.php/JS_API_Index for information regarding additional supported methods.
Links
This article is further continued here : How to add Facebook Connect to your website using the PHP API
References
Descargar blog en pdf
1 comentario:
Facebook is a social utility that helps people better understand the world around them.You need to plan strategically to get your business going on Facebook otherwise your reputation is damaged.
Check some useful tips to work efficiently and get huge traffic to your site..
http://tinyurl.com/yasjvta
Publicar un comentario