applideveloper/.gitignore

## .gitignore
node_modules

## README.md

      
    Raw
  

              README.md
            
          
    Create node.js Facebook App on Heroku

Preparation for github and heroku


create github account/heroku account
add my SSH Key to github
set git info like:

    git config -global user.name "..."
    git config -global user.email "...@..."

install heroku related commands as:

(rvm installed)


    rvm install 1.9.3
    rvm use 1.9.3
    gem install heroku vulcan aws-s3

setup heroku env as:

    heroku login
    heroku keys:add
Create Inital nodejs web server on local machine


create ".gitignore" as:

node_modules

create "web.js" as:

require("http").createServer(function (req, res) {
  res.writeHead(200, {"content-type": "text/plain;charset=UTF-8"});
  res.end("Hello World\n");
}).listen(process.env.PORT || 8000);

create "Procfile" as:

web: node web.js

create "package.json" like:

{"name": "fb-bb-helloworld",
 "version": "0.0.1"}

create new repository as:

    git init
    git add .
    git commit -a -m "[init]"
Create Heroku App

create nodejs 0.6.10 stack with the public buildpack on github

run commands on my repository dir like:

"fb-bb-helloworld": a name of new app on heroku
http://github.com/hakobera/heroku-buildpack-nodejs.git : public buildpack for node.js-0.6.10


    heroku create fb-bb-helloworld --stack cedar \
    --buildpack http://github.com/hakobera/heroku-buildpack-nodejs.git

upload to heroku as:

    git push heroku master

check app to access: http://fb-bb-helloworld.herokuapp.com/

Enable the web server as https server


befor using addons, you should register your "credit card number"
to your heroku account
add price free SSL addon "piggyback_ssl" from web or the command as:

    heroku addons:add piggyback_ssl

then you can access as: https://fb-bb-helloworld.herokuapp.com/

(not need to implement a ssl server on the js code)


Create web.js as facebook app


for more detail, see: gist-1815094
set the secure tab page as: https://fb-bb-helloworld.herokuapp.com/
access the facebook app: https://apps.facebook.com/bb-helloworld/

Resources

For the tutorial:

Getting Started with Node.js on Heroku/Cedar
Heroku article for SSL addons
Running Your Own Node.js Version on Heroku
Side by the public buildpack author (JPN)

For the preparation:

RVM manual
gem command reference
git cheat sheets by github
github: Set Up Git
Getting Started with Heroku


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

## package.json
{"name": "fb-bb-helloworld",
 "version": "0.0.1"}

## Procfile
web: node web.js

## web.js
var http = require('http');
var fs = require('fs');
var url = require("url");
var querystring = require("querystring");


var main = function () {
    var port = process.env.PORT || 8000; // for heroku app
    http.createServer(handler).listen(port);
};

var handler = function (req, res) {
    var purl = url.parse(req.url, true);
    purl.protocol = "https";
    purl.host = req.headers["host"];
    var pathname = purl.pathname;
    if (pathname[pathname.length - 1] === "/") pathname += "index.html";
    return sendFile(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 http = require('http');
	var fs = require('fs');
	var url = require("url");
	var querystring = require("querystring");


	var main = function () {
	var port = process.env.PORT \|\| 8000; // for heroku app
	http.createServer(handler).listen(port);
	};

	var handler = function (req, res) {
	var purl = url.parse(req.url, true);
	purl.protocol = "https";
	purl.host = req.headers["host"];
	var pathname = purl.pathname;
	if (pathname[pathname.length - 1] === "/") pathname += "index.html";
	return sendFile(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();