bellbind/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Hello facebook Canvas Page with JavaScript SDK

Prepare Facebook App of Canvas Page

To use Facebook Canvas Page, setup your new app from
facebook developers
App requires "App Display Name" and global unique "App Namespace".
My example app uses:

App Display Name: Helloworld
App Namespace: bb-helloworld

After app created with captcha, Setting page of the app is opened.
Its "App ID" and "App Secret" are given.
My example app is:

App ID: 228106443948163

Then pressing "App on Facebook", put "Secure Canvas URL" as
"https://localhost:8000/" (https required).
After pushing "Save Changes",
new "Canvas age" is given under "Secure Canvas URL".
(The URL starts with "http", but you should replace it with "https").

Canvas "Page": https://apps.facebook.com/bb-helloworld/
(raw Canvas URL): https://localhost:8000/

simplehttpsserver.js: Web Server for Canvas Page

My example uses simple file based https server on
node.js.
https server requires "key.pem" and "cert.pem" and "passphrase" of the key.
These can be generated with "openssl" command as:
openssl req -new -keyout key.pem -text -out csr.pem
openssl req -x509 -in csr.pem -text -key key.pem -out cert.pem

(passphrase is set at the first command. it requires more than 4 charas.)
Launch https server as:
node simplehttpsserver.js

URL of the server is "https://localhost:8000/".
index.html: Canvas Page

For loading JavaScript SDK, put a script in the html "body":
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
  FB.init({
    appId: "228106443948163", // Your App ID
    status: true,
    cookie: true,
    xfbml: true,
  });
  //alert("FB.init ok");
};
(function(d){
  var id = 'facebook-jssdk';
  if (d.getElementById(id)) {return;}
  var js = d.createElement('script');
  js.id = id;
  js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>

for accessing faccebook personal data, use FB.api as:
FB.api("/me", function (res) {
  alert(res.name);
});

or as:
FB.api("/me/feed", "post", {message: "from JS SDK"}, function (res) {
  alert([res, res.error, res.id]);
});

See more info from documents:

JavaScript SDK
FB.api
Graph API


## index.html
<!doctype html>
<html>
<head>
<title>Facebook Canvas Page with JavaScript SDK</title>
</head>
<body>
<h1>Hello Facebook JS SDK</h1>
<!-- put fnb-root and initialize script for using Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
  FB.init({
    appId: "228106443948163",
    status: true,
    cookie: true,
    xfbml: true,
  });
  //alert("FB.init ok");
};
(function(d){
  var js, id = 'facebook-jssdk';
  if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>


<div>
Access:
<button type="button" onclick='
FB.api("/me", function (res) {
  alert(res.name);
});
'>show my name</button>

<button type="button" onclick='
var body = {
  message: "Post from JS SDK",
};
FB.api("/me/feed", "post", body, function (res) {
  alert([res.error, res.id]);
});
'>post</button>
</div>

<div>
UI:
<button type="button" onclick='
FB.ui(
  {
    method: "feed",
    name: "Hello Facebook JS SDK",
    caption: "Post from JS SDK",
    description: "OK"
  },
  function(response) {
    if (response && response.post_id) {
      alert("Post was published.");
    } else {
      alert("Post was not published.");
    }
  }
);
'>Feed Dialog</button>
</div>
</body>
</html>

## simplehttpsserver.js
var https = require('https');
var fs = require('fs');
var url = require("url");
var querystring = require("querystring");

// Generate self-signed key & crt by openssl
// [important] key PEM pass phrase(at least 4char) is required for createServer
// $ openssl req -new -keyout key.pem -text -out csr.pem
// $ openssl req -x509 -in csr.pem -text -key key.pem -out cert.pem
var options = {
    key: fs.readFileSync('key.pem'),
    cert: fs.readFileSync('cert.pem'),
    passphrase: "openssl", // enabled from 2011/10/27 (0.5.11?)
};

var main = function () {
    var port = process.env.PORT || 8000; // for heroku
    https.createServer(options, handler).listen(port);
    console.log("launched https://localhost:8000/");
};

var handler = function (req, res) {
    var purl = url.parse(req.url, true);
    purl.protocol = "http";
    purl.host = req.headers["host"];
    if (purl.pathname === "/") return sendFile("index.html", res);
    return sendFile(purl.pathname.slice(1), res);
};


var sendFile = function (filename, res) {
    fs.readFile(filename, "binary", function (err, data) {
        res.status = 200;
        res.setHeader("content-type", contentType(filename));
        res.end(data, "binary");
    });
};

var mimeTypes = {
    "js": "application/javascript",
    "json": "application/json",
    "css": "text/css",
    "html": "text/html",
    "xhtml": "application/xhtml+xml",
    "xml": "application/xml",
    "png": "image/png",
    "jpg": "image/jpeg",
    "gif": "image/gif",
};
var contentType = function (fileName) {
    var ext = fileName.slice(fileName.lastIndexOf(".") + 1);
    var mimeType = mimeTypes[ext] || "application/octet-stream";
    if (mimeType.indexOf("text/") !== 0) return mimeType;
    return mimeType + ";charset=UTF-8";
};


if (require.main === module) main();
	<!doctype html>
	<html>
	<head>
	<title>Facebook Canvas Page with JavaScript SDK</title>
	</head>
	<body>
	<h1>Hello Facebook JS SDK</h1>
	<!-- put fnb-root and initialize script for using Facebook JavaScript SDK -->
	<div id="fb-root"></div>
	<script>
	window.fbAsyncInit = function () {
	FB.init({
	appId: "228106443948163",
	status: true,
	cookie: true,
	xfbml: true,
	});
	//alert("FB.init ok");
	};
	(function(d){
	var js, id = 'facebook-jssdk';
	if (d.getElementById(id)) {return;}
	js = d.createElement('script'); js.id = id; js.async = true;
	js.src = "//connect.facebook.net/en_US/all.js";
	d.getElementsByTagName('head')[0].appendChild(js);
	}(document));
	</script>


	<div>
	Access:
	<button type="button" onclick='
	FB.api("/me", function (res) {
	alert(res.name);
	});
	'>show my name</button>

	<button type="button" onclick='
	var body = {
	message: "Post from JS SDK",
	};
	FB.api("/me/feed", "post", body, function (res) {
	alert([res.error, res.id]);
	});
	'>post</button>
	</div>

	<div>
	UI:
	<button type="button" onclick='
	FB.ui(
	{
	method: "feed",
	name: "Hello Facebook JS SDK",
	caption: "Post from JS SDK",
	description: "OK"
	},
	function(response) {
	if (response && response.post_id) {
	alert("Post was published.");
	} else {
	alert("Post was not published.");
	}
	}
	);
	'>Feed Dialog</button>
	</div>
	</body>
	</html>
	var https = require('https');
	var fs = require('fs');
	var url = require("url");
	var querystring = require("querystring");

	// Generate self-signed key & crt by openssl
	// [important] key PEM pass phrase(at least 4char) is required for createServer
	// $ openssl req -new -keyout key.pem -text -out csr.pem
	// $ openssl req -x509 -in csr.pem -text -key key.pem -out cert.pem
	var options = {
	key: fs.readFileSync('key.pem'),
	cert: fs.readFileSync('cert.pem'),
	passphrase: "openssl", // enabled from 2011/10/27 (0.5.11?)
	};

	var main = function () {
	var port = process.env.PORT \|\| 8000; // for heroku
	https.createServer(options, handler).listen(port);
	console.log("launched https://localhost:8000/");
	};

	var handler = function (req, res) {
	var purl = url.parse(req.url, true);
	purl.protocol = "http";
	purl.host = req.headers["host"];
	if (purl.pathname === "/") return sendFile("index.html", res);
	return sendFile(purl.pathname.slice(1), res);
	};


	var sendFile = function (filename, res) {
	fs.readFile(filename, "binary", function (err, data) {
	res.status = 200;
	res.setHeader("content-type", contentType(filename));
	res.end(data, "binary");
	});
	};

	var mimeTypes = {
	"js": "application/javascript",
	"json": "application/json",
	"css": "text/css",
	"html": "text/html",
	"xhtml": "application/xhtml+xml",
	"xml": "application/xml",
	"png": "image/png",
	"jpg": "image/jpeg",
	"gif": "image/gif",
	};
	var contentType = function (fileName) {
	var ext = fileName.slice(fileName.lastIndexOf(".") + 1);
	var mimeType = mimeTypes[ext] \|\| "application/octet-stream";
	if (mimeType.indexOf("text/") !== 0) return mimeType;
	return mimeType + ";charset=UTF-8";
	};


	if (require.main === module) main();