Facebooker Tutorial
1.1) Getting Started
The purpose of this tutorial is to explain many aspects of the Facebooker project. The general approach here is provide running live code to be used as a reference for you own implementation. All the code samples in this tutorial are from the actual live code running the application. The facebooker plugin is pulled in as an external as well so the tutorial should be up to date with the latest code.
- Create a rails application:
rails facebooker_tutorial
- Install Facebooker Plugin:
script/plugin install git://github.com/mmangino/facebooker.git or
cd RAILS_ROOT/vendor/plugins; git clone git://github.com/mmangino/facebooker.git or
Grab the tarball from http://github.com/mmangino/facebooker/tree/master and stick it in vendor/plugins manually
- Create a controller:
ruby script/generate controller getting_started
-
Setup your application on Facebook.
This should take you to the new app page.
- Enter in Your Application Name. This name will appear anywhere your application mentioned.
- Enter in you Callback URL. Make this the base URL of your server. Note: For FBML apps, like this one, the url must be web accessible.
- Enter in your Canvas Page URL. This will be the path that users see in their browser.
-
Setup facebooker environment via RAILS_ROOT/config/facebooker.yml, You can copy the template file from the facebooker source.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
# File: config/facebooker-mock.yml # The api key, secret key, and canvas page name are required to get started # Tunnel configuration is only needed if you are going to use the facebooker:tunnel Rake tasks # Your callback url in Facebook should be set to http://public_host:public_port # If you're building a Facebook connect site, # change the value of set_asset_host_to_callback_url to false # To develop for the new profile design, add the following key.. # api: new # remove the key or set it to anything else to use the old facebook design. # This should only be necessary until the final version of the new profile is released. development: api_key: 442c6504bd2362d8a7fba7303cd583ca secret_key: XXXXXXXXXXXXX canvas_page_name: facebooker_tutorial callback_url: http://staging.travelerstable.com:8888 pretty_errors: true set_asset_host_to_callback_url: true tunnel: public_host_username: fooberryfoo public_host: staging.travelerstable.com public_port: 8888 local_port: 3000 server_alive_interval: 0 test: api_key: secret_key: canvas_page_name: pretty_errors: true set_asset_host_to_callback_url: true tunnel: public_host_username: public_host: public_port: 4007 local_port: 3000 server_alive_interval: 0 production: api_key: secret_key: canvas_page_name: pretty_errors: true set_asset_host_to_callback_url: true tunnel: public_host_username: public_host: public_port: 4007 local_port: 3000 server_alive_interval: 0
- Enter in the callback url that you specified in the facebook application settings.
- Enter in your Canvas Page Name. This the last part of the path you entered in the Canvas Page URL
- Okay create a view for you getting_started controller. And put anything you want in there.
EDIT: app/views/getting_started/add_facebook_application.fbml.erb. Like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
# File: app/views/getting_started/_steps.html.erb <div id="tutorial_steps"> <ol> <li> Create a rails application: <p class="command_line"> rails facebooker_tutorial</p></li> <li> Install Facebooker Plugin: <p class="command_line"> script/plugin install git://github.com/mmangino/facebooker.git or </p> <p> cd RAILS_ROOT/vendor/plugins; git clone git://github.com/mmangino/facebooker.git or </p> <p> Grab the tarball from <%= link_to("http://github.com/mmangino/facebooker/tree/master", "http://github.com/mmangino/facebooker/tree/master") %> and stick it in vendor/plugins manually </p></li> <li> Create a controller: <p class="command_line"> ruby script/generate controller getting_started</p></li> <li> Setup your application on <%= link_to("Facebook", "http://www.facebook.com/developers/editapp.php?new", :target => "fb_tut_external") %>. <p class="descriptive_text"> This should take you to the new app page. <%= image_tag("getting_started/add_application.jpg") %> <ul> <li> Enter in Your Application Name. This name will appear anywhere your application mentioned. </li> <li> Enter in you Callback URL. Make this the base URL of your server. <em> Note: For FBML apps, like this one, the url must be web accessible.</em></li> <li> Enter in your Canvas Page URL. This will be the path that users see in their browser. </li> </ul> </p> </li> <li> Setup facebooker environment via RAILS_ROOT/config/facebooker.yml, <em> You can copy the template file from the facebooker source.</em> <div style="width:90%;margin: 10px auto;"> <%= highlight_file("config/facebooker-mock.yml") %> </div> <ul> <li>Enter in the callback url that you specified in the facebook application settings.</li> <li>Enter in your Canvas Page Name. <em>This the last part of the path you entered in the Canvas Page URL </em></li> </ul> </li> <li>Okay create a view for you getting_started controller. And put anything you want in there. <p>EDIT: app/views/getting_started/add_facebook_application.fbml.erb. Like this: </p> <%= highlight_file("app/views/getting_started/_steps.html.erb") %> </li> <li> Add a default route for your application. <div style="width:90%;margin: 10px auto;"> <%= highlight_code("map.connect '', :controller => 'getting_started', :action => 'add_facebook_application'") %> </div> </li> <li> Start up rails <p class="command_line">ruby script/server </p> </li> <li> Check out your app at <%= link_to(url = url_for(:controller => params[:controller ], :action => params[:action], :only_path => false), url ) %> </li> <li>Now create a view accessible straight from the web and put whatever you want in there. <p>EDIT: app/views/getting_started/add_facebook_application.html.erb</p></li> <li> Try from the web <%= link_to(url = url_for(:controller => params[:controller ], :action => params[:action], :canvas => false, :only_path => false), url ) %> -- Here you are accessing you app straight from the web!!</li> </ol> </div>
-
Add a default route for your application.
map.connect '', :controller => 'getting_started', :action => 'add_facebook_application'
-
Start up rails
ruby script/server
- Check out your app at http://apps.facebook.com/facebooker_tutorial/
- Now create a view accessible straight from the web and put whatever you want in there.
EDIT: app/views/getting_started/add_facebook_application.html.erb
- Try from the web http://facebookertutorial.professionalnerd.com/ -- Here you are accessing you app straight from the web!!


Bill KocikNov 30
Steve HoffOct 30
Jon JonesOct 7
it's been months. no excuses on this one.
Facebook UserOct 5
Greg HazelAug 28
Freeman NgJul 12
Facebook UserJul 8
so...am i just dim???
Puneet PandeyFeb 24
Facebook UserFeb 20
Piyush GuptaFeb 16
Piyush GuptaFeb 16
Brett JacksonFeb 15
Facebook UserFeb 4
My callback url is www.myapp.com/fb
I have defined the following route: map.connect 'fb/:action', :controller => 'fb', :conditions => { :canvas => true }
when I access the facebook app page, the index is displayed properly in the canvas page.
However, when I follow a link, which is supposed to lead to: url_for(:action => "teams", :only_path => true)
then facebook tries to display apps.facebook.com/myAppName/fb/teams, which leads to error
I believe facebook should try to display only apps.facebook.com/myAppName/teams, because the callback url already finishes with "/fb"
I'm also surprised that when I try to manually go to the url: apps.facebook.com/myAppName/teams, yet I get the same error (illegal tag "body" under "fb:canvas" ............)
Do I do something wrong?
Thanks!
Puneet PandeyJan 27
Puneet PandeyJan 20
Vincenzo AcinapuraJan 19
Jarrod SpillersJan 16
Jure SrsenJan 16
I'd like to learn something about it too...
Violeta Naomi Díaz RíosJan 12
Guillaume BetousJan 11
Thanx for fixing the others pages access of this tutorial !!!