• Outline
• Feedback
• Gallery

Facebooker Tutorial

1. Create a rails application:

   rails facebooker_tutorial

2. 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

3. Create a controller:

   ruby script/generate controller getting_started

4. 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.

5. 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

   # 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 development: api_key: 442c6504bd2362d8a7fba7303cd583ca secret_key: XXXXXXXXXXXXX canvas_page_name: facebooker_tutorial callback_url: http://staging.travelerstable.com:8888 tunnel: public_host_username: fooberryfoo public_host: staging.travelerstable.com public_port: 8888 local_port: 3000 test: api_key: secret_key: canvas_page_name: tunnel: public_host_username: public_host: public_port: 4007 local_port: 3000 production: api_key: secret_key: canvas_page_name: tunnel: public_host_username: public_host: public_port: 4007 local_port: 3000

   • 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
6. 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>

7. Add a default route for your application.

   map.connect '', :controller => 'getting_started', :action => 'add_facebook_application'

8. Start up rails

   ruby script/server

9. Check out your app at http://apps.new.facebook.com/facebooker_tutorial/
10. 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

11. Try from the web http://fbtt.shacknet.nu/ -- Here you are accessing you app straight from the web!!