Fbtt Facebooker Tutorial

Next Lesson → Make User Login

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.

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

    • 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
    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
  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.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://facebookertutorial.professionalnerd.com/ -- Here you are accessing you app straight from the web!!
Next Lesson → Make User Login
Peepcodead
Comment Section for Getting Started

Sicherheitskontrolle

Gib beide Wörter unten durch ein Leerzeichen getrennt ein.
Du kannst die Wörter unten nicht entziffern? Versuche andere Wörter oder ein Audiocaptcha.
Wird geladen ...

Steve Hoff30. Oktober

As much as I hate to point fingers, I have to agree with the poster below, this tutorial is not the "Great Tutorial" as linked.
 

Jon Jones07. Oktober

this tutorial is *still* broken.

it's been months. no excuses on this one.
 

Facebook-Nutzer05. Oktober

You may need to configure the facebook.yml file before attempting to generate a controller: http://bit.ly/XhK5k
 

Greg Hazel28. August

This tutorial is broken. Clicking "Make User Login" spits FBML at the browser.
 

Freeman Ng12. Juli

Can Facebooker be used in a non-Rails app, from simple Ruby CGI scripts?
 

Facebook-Nutzer08. Juli

this is going to sound stupid, but i can't get the plugin to install...? the step "$APP_ROOT/script/plugin install git://github.com/mmangino/facebooker.git" just returns a prompt w/ no error, but nothing populated to vendor/plugins (tried in both linux & cygwin environments).

so...am i just dim???
 

Puneet Pandey24. Februar

I want to fetch email id's of my contacts once I logged in I can fetch names, interests etc but I think email is coming into some sort of hash format... am I able to fetch email ids with facebooker plugin?
 

Facebook-Nutzer20. Februar

It would be awesome to have second page working..
 

Piyush Gupta16. Februar

I dont want Canvas pages ....
 

Piyush Gupta16. Februar

Do we have a FB tutorial also for external apps.
 

Brett Jackson15. Februar

Excellent tutorial, I learned some (more) Ruby on Rails at the same time.
 

Facebook-Nutzer04. Februar

hey Dave, hey guys :) I have a problem here.

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 Pandey27. Januar

anyone please let me know how would I fetch the email lists of my friends once I logged in?
 

Puneet Pandey20. Januar

Second page is not coming... I typed the url in browser then first facebook page came with a button "ALLOW", I clicked on that and I came back again to my original site. Now whenever I type the url some authenticity token appears on the url.. anyone pls let me know where the problem lies?? Am I heading in the wrong direction?
 

Vincenzo Acinapura19. Januar

Second page NOT WORKING!!!!!
 

Jarrod Spillers16. Januar

The 2nd page is still blank for me... is the content available any other place?
 

Jure Srsen16. Januar

yap! Still nothing....
I'd like to learn something about it too...
 

Violeta Naomi Díaz Ríos12. Januar

The second page is still broken, and I need it so much right now!!! :(
 

Guillaume Betous11. Januar

Hi!

Thanx for fixing the others pages access of this tutorial !!!
 

Sergey Gershun06. Januar

Guys, I have an app working on multiple domains and using Facebooker
I have to use several API_KEY's - do you have some workaround for that?
 
Es werden 20 von 97 Beiträgen angezeigt.