How to make a facebook like button, in 7 complicated steps...

1_load_facebook_javascript.html

<div id="fb-root"></div>
<script src="//connect.facebook.net/<%= @locale %>/all.js"></script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : <%= @fbappid %>, // App ID
    <% if Rails.env.production? %>
      channelUrl : '//garbage.herokuapp.com/channel.html', // Channel File
    <% else %>
      channelUrl : '//localhost:3000/channel.html', // Channel File
    <% end %>
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      // xfbml      : true, // parse XFBML
      oauth      : true
    });

    FB.getLoginStatus(function(response) {
      fb_initialized = true;

      if (response.status === 'connected') {
        console.log("Facebook initialized!");
        FB.Canvas.setSize({width: 760, height: 1010});
      } else {
        console.log("Facebook initialized, but login failed.");
      }
    });
  };

</script>

2_channel.html

 <script src="//connect.facebook.net/en_US/all.js"></script>

3_initialize_facebook.coffee

window.ensure_facebook_oauth = ->
  unless idkfa == "true"
    if fbuserid == '' and liked == true
      requestURL = "https://www.facebook.com/dialog/oauth/?client_id=#{fbappid}&redirect_uri=#{encodeURIComponent base_url}&scope=publish_actions" #COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES"
      top.location = requestURL

window.when_fb_is_loaded = (callback)->
  checker = ->
    if FB? and fb_initialized?
      callback()
    else
      setTimeout(checker, 250)

  checker()

window.when_addthis_is_loaded = (callback)->
  checker = ->
    if addthis? then callback() else setTimeout(checker, 250)

  checker()

$ ->
  ensure_facebook_oauth()

  if liked
    wait 2500, ->
      animate_landing()
  else
    wait 200, ->
      animation_callbacks.splash()


  when_fb_is_loaded ->
    FB.Canvas.setSize({width: 760, height: 1010});

    FB.Event.subscribe('edge.create', facebook_like);
    FB.Event.subscribe('edge.remove', facebook_unlike);
    # FB.Event.subscribe('message.send', facebook_share);

4_event_logging.coffee

window.facebook_like = (url)->
  facebook_event("like", url)
  
window.facebook_unlike = (url)->
  facebook_event("unlike", url)
  
window.facebook_share = (url)->
  facebook_event("share", url)

window.facebook_event = (type, url)->
  $.get "/events/#{type}", {url: url}, (response)->
    console.log "user #{type}d #{url}"

5_custom_facebook_click_event.coffee

  $("#gallery a.facebook-share").live "click", ->
    url = $(@).attr("data-share_url")

    FB.ui
      method: 'feed'
      name: $(@).attr("data-title")
      caption: "What the caption will be on the facebook post"
      description: $(@).attr("data-description")
      picture: "#{base_url}/share_icon.jpg"
      link: url

      fb_ui_callback_for("share", url)

    false

6_share_button.haml

  .mediaButtons
    .fb-container
      .fb-like{:data => {:href => share_url_for("text", text_advice.id), :send => "false", :layout => "button_count", :width => 450, "show-faces" => true}}

7_populate_share_button.coffee

window.add_shares = (el)->
  # creates some share buttons using XFBML
  when_fb_is_loaded ->
    console.log("Adding Facebook like button.")
    fb = el.find(".fb-container")
    console.log fb
    FB.XFBML.parse fb[0]