Give it a name
Make note of you API Key
Define the canvas page
Create the canvas page
(how to get this on your server is being left as an exercise for the reader)
Make some files:
mkdir stylesheets javascripts touch canvas.html stylesheets/main.css javascripts/app.js
Make the canvas page:
Don't give yourself a headache and, most importantly, don't reinvent the wheel: Use jQuery, UnderscoreJS, PURE, Sammy, (or even JavaScriptMVC) etc.<!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> <script src="javascripts/json2.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="javascripts/underscore-min.js" type="text/javascript"></script> <script src="javascripts/pure.js" type="text/javascript"></script> <link rel=stylesheet href="stylesheets/main.css" type="text/css" media=screen> <style> body { background-color: #238; color: white; } </style> </head> <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script src="javascripts/helpers.js" type="text/javascript"></script> <script src="javascripts/app.js" type="text/javascript"></script> <h1>My App</h1> <div id="params_log"><%=h @params %></div> </body> </html>
(At this point if you visit the page you should see that it shows "My App" and nothing else.)
Require users to add your application in app.js:
var fb_api_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
var fb_channel_path = '/xd_receiver.htm';
var FBApi;
var XFBML;
$(document).ready(function(){
FB_RequireFeatures(["Api","XFBML"], function(){
FB.XFBML.Host.autoParseDomTree = false;
// Create an ApiClient object, passing app's API key and
// a site relative URL to xd_receiver.htm
FB.Facebook.init(fb_api_key, fb_channel_path, null);
FBApi = FB.Facebook.apiClient;
XFBML = FB.XFBML.Host;
// Forces Facebook Connect / Login
//FBApi.requireLogin(function(exception){
FB.Connect.requireSession(function(){
alert("Current user id is " + FBApi.get_session().uid);
},
function(){
alert("Didn't add the app, can't get data");
},
true); // MUST be true? What's the point?
});
alert("Hello World!");
});
No comments:
Post a Comment