Idea Manglar » Jonathan Rincon

Facebook Javascript Api

Jonathan Rincon — Wed, 25 Nov 2009 22:28:18 +0000

The Facebook JavaScript client library allows you to access various features of Facebook Platform through JavaScript. So you can develop rich ajax applications with the integration of any JavaScript library as jQuery and this Api.

Setting up the JavaScript client:

1. Go to your facebook application configuration and set the “Connect Url” to the url where your code is hosted, usually is the same URL for your “Canvas Callback URL” as seen on the post “Setup a facebook application”.
2. Create a file called xd_receiver.htm. this file handles the cross domain communication and must contain the following 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" >

<head>

<title>Cross-Domain Receiver Pagetitle>

head>

<body>

<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/JavaScript">script>

body>

html>

3. For the user’s browser to correctly recognize XFBML tags, you need to specify that the page is in XHTML. IE loves to bug around if you don’t include this

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">

4. Include the following script on the not on the since it loads some features and this can cause issues and errors with some browsers:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/JavaScript">script>

5. And finally include the following script in the body after all the xFBML tags that you want to load:

<script>

FB_RequireFeatures(["Api"], function(){

FB.Facebook.init("YOUR_API_KEY_HERE", "/xd_receiver.htm");

});

script>

Working Example:

<script type="text/javascript">
    FB_RequireFeatures(["Api"], function() {
        FB.Facebook.init("yourapikey", "xd_receiver.htm");
        FB.Facebook.get_sessionState().waitUntilReady(function() {
            var api = FB.Facebook.apiClient;
            uid = api.get_session().uid;//get the current user uid
//get the info of the user given the uid, pass the current user uid to get current’s user info
            api.users_getInfo(uid, ['name'], function(user, exception) {
        var name  = document.getElementById("uname")
        //we get the 0 position since it returns a list of users information
                name.value = user[0].name;
            });
        });
    });
    script>

More Methods of the api client can be found here:

http://developers.facebook.com/docs/?u=facebook.jslib.FB.ApiClient

with this api you can do pretty much everything.

Facebook xFBML render on an Iframe Application

Jonathan Rincon — Wed, 25 Nov 2009 22:21:53 +0000

Facebook uses XFBML as a way for you to incorporate FBML (Facebook Markup Language, an extension to HTML) into an HTML page on a Facebook Connect site or an iframe application.

~Facebook wiki.

The list of available tags that can be used as xFBML are here:

http://wiki.developers.facebook.com/index.php/XFBML
if you need to use FBML that aren’t listed on that place you can ever use the fb:serverfbml tag wich is able to render any FBML inside it. Typical FBML tags you would wrap within fb:serverfbml are those that require user input, like fb:request-form. The contents of fb:serverfbml are rendered in a Facebook iframe.
Rendering xFBML steps:
1. Go to your facebook application configuration and set the “Connect Url” to the url where your code is hosted, usually is the same URL for your “Canvas Callback URL” as seen on the post “Setup a facebook application”.
2. Create a file called xd_receiver.htm. this file handles the cross domain communication and must contain the following 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" >

<head>

<title>Cross-Domain Receiver Pagetitle>

head>

<body>

<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/JavaScript">script>

body>

html>

3. For the user’s browser to correctly recognize XFBML tags, you need to specify that the page is in XHTML. IE loves to bug around if you don’t include this

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">

4. Include the following script on the not on the since it loads some features and this can cause issues and errors with some browsers:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/JavaScript">script>

5. And finally include the following script in the body after all the xFBML tags that you want to load:

<script>

FB_RequireFeatures(["XFBML"], function(){

FB.Facebook.init("YOUR_API_KEY_HERE", "/xd_receiver.htm");

});

script>

Alternatively if you don’t want to use the xFBML tags and use just html ad JavaScript you can render the xFBML in this way:

http://wiki.developers.facebook.com/index.php/Using_HTML_to_Imitate_XFBML

Facebook Iframe canvas application: Authentication and session with Microsoft Facebook SDK.

Jonathan Rincon — Wed, 25 Nov 2009 22:08:56 +0000

SDK: http://msdn.microsoft.com/en-us/windows/ee388574.aspx

Setting up the application and visual studio for debugging:

Debugging in visual studio is just possible on Iframe canvas applications, if you want to develop from localhost you need to change a bit the setup of your facebook application and apply some changes to the visual studio application’s options:

Canvas: you must change the “Canvas Callback URL” to http://localhost:port/ i.e: for port 63919, then our url would be http://localhost:63919
The render method must be Iframe, FBML doesn’t support debugging neither work on localhost since you need a host so it can be embed on facebook.
Edit Settings in web.config : In the project, open web.config. In element. Change the values for those settings to the following:

APIKey: your API key
Secret: your application secret
Callback: your callback URL
Suffix: The suffix of your canvas page URL. For example, for a site located at http://apps.facebook.com/myapp/, the suffix is myapp.

Example:



"APIKey" value="yourapikey" />

"Secret" value="yoursecret" />

"Callback" value="yourcallbackurl" />

"Suffix" value="yourappsufix" />

4. Set Up Project Port Number:

- - Open the project properties (right-click the project, click Properties).
  - Click the Web tab on the left side.
  - In the Servers section on the page, select “Use Visual Studio Development Server”.
  - Select “Specific Port”, and enter the port number from your callback URL.

5. Run Application

- - Start the Web application (click Debug menu, click Start Debugging).
  - Close the browser window that opens, since it doesn’t open your app within the Facebook context.
  - Go to your canvas page URL (http://apps.facebook.com/yourapp).
  - On the “Allow Access?” page, click “Allow”.
  - Now you can debug your application.

Authentication

To take care of authentication in facebook we are going to use the microsoft’s facebook SDK, we are going to use the CanvasIFrameMasterPage This class takes care of the entire authentication process, all you have to do is give the application your API key and secret, as we did in the web.config.

To use this class we create add references to the facebook.dll and facebook.web.dll then call them as using withing the code behind of the masterpage after this the custom master page is set to inherit from CanvasIFrameMasterPage.

then we set the RequireLogin attribute to true so the application calls for login whenever user is logged off.

Example:

using Facebook;

using Facebook.web;

public partial class CustomMasterPage : Facebook.Web.CanvasIFrameMasterPage{

public CustomMasterPage()

{

RequireLogin = true;

}

}

Finally, each page is set to use this custom master page by setting the MasterPageFile attribute in the Page directive as well as creating a MasterType directive. The easiest way to set up the content pages is to create them through the master page: just right-click on the master page in Solution Explorer and select “Add Content Page”. The new page will have the correct MasterPageFile attribute set as well as each of the elements used by the master page, although you will have to set the MasterType directive manually:

<%@ Page AutoEventWireup="true" MasterPageFile="~/CustomMasterPage.Master"
CodeBehind="Default.aspx.cs" Inherits="IFrameSample.Default" %>
<%@ MasterType VirtualPath="~/CustomMasterPage.Master" %>

After all this you have a working iframe canvas application that handles authentication, session and can be debugged on visual studio.

Setup a Facebook application

Jonathan Rincon — Wed, 25 Nov 2009 21:44:33 +0000

How to setup an application on facebook on 4 easy steps:

Step 1

Go to: http://www.facebook.com/developers/

Once there click on the “Set up New Application” button.

Step 2:

Fill the fields on this page, also agree with the “Facebook Terms” (there is a link to read it) then click on “Create Application”.

Step 3 Basic Information:

Api Key: You must save this on since you are going to need it on the future for your application’s development.

Secret: also needed for application development.

Bookmark URL: URL of your application so the users can bookmark it on facebook, usually http://apps.facebook.com/myappname

The other information to fill is just informative or aesthetic since it references to the description and icons to use in your application, the User-Facing URL are set according to your help, privacy and conditions of your application.

Step 4 Canvas:

Canvas Page URL: The base URL for your canvas pages on Facebook.

Render Method:

IFrame:

Are easier and faster if you have an existing application, widget, or website if the application utilizes XFBML
Let you use the JavaScript, HTML, and CSS that you are used to
Debugging regular HTML and JavaScript is easier than for FBML and FBJS given the tools available today
Allow you to use popular JavaScript libraries like jQuery in your code

FBML:

Lets you quickly start building an application from scratch, which is good for a new Facebook developer.
Is likely to be faster on first page loads
Has fewer moving parts and the paradigm is closer to that of the traditional Web
Gives you easy access to lots of Facebook elements
Has a sensible authorization mechanism

Step 3 Connect:

This is an important step if you are going to use JavaScript API or facebook connect inside your application.

Connect URL: this is the URL of your application wherever is hosted since there you will have a file named xd_receiver.htm (this file is the one receiving all the calls from the facebook JavaScript API to enable the cross domain for the Ajax calls)

The other fields can be left in blank or filled with the necessary information according to whatever you want to do with your facebook application.

After this 4 steps facebook is ready to load your application.