Introdução

Esta é uma abordagem melhor e mais limpa para usar o SDK Javascript do Facebook:

1. O código Javascript é separado da marcação.
2. O código é reutilizável

Como usar

1. Adicionar variáveis ​​de ambiente
2. Layout
3. CoffeeScript

1: Variáveis ​​de Ambiente

Se você estiver usando forman , as variáveis ​​serão carregadas do arquivo .env .
Aviso: Remova o arquivo .env da produção no arquivo .gitignore .
echo FACEBOOK_APP_ID=1234 >> .env echo FACEBOOK_APP_SECRET=1234 >> .env

2: Layout

Adicione as variáveis ​​de ambiente ao layout do aplicativo, como atributos de dados .

Com Jinja:
<div id="fb-root" data-app-id="{{ ENV['FACEBOOK_APP_ID'] }}"></div>

Com líquido:
<div id="fb-root" data-app-id="{{ ENV['FACEBOOK_APP_ID'] }}"></div>

Com ERB:
<div id="fb-root" data-app-id="<%= ENV['FACEBOOK_APP_ID'] %>"></div>

Com Jade:
div(id="fb-root", data-app-id= ENV['FACEBOOK_APP_ID'])

Com HAML:
div{id="fb-root", data-app-id=ENV['FACEBOOK_APP_ID']}

Ou em HTML
<div id="fb-root" data-app-id="1234"></div>

3. CoffeeScript

Aviso: você pode usar o arquivo channel.html , em vez de carregar diretamente os arquivos JS do Facebook.

#
# You should add the Facebook App ID and the channel url (optional), in the #fb-root element, as a data- attribute:
#   <div id="fb-root" data-app-id="<%= ENV['FACEBOOK_APP_ID'] %>" data-channel-url="<%= url_no_scheme('/channel.html') %>"></div>
#
window.fbAsyncInit = ->
  FB.init
    appId: document.getElementById("fb-root").getAttribute("data-app-id")
    channelUrl: document.getElementById("fb-root").getAttribute("data-channel-url")
    status: true,
    cookie: true,
    xfbml: true

  FB.Event.subscribe('auth.login', (response) ->
    window.location = window.location
  )
  FB.Canvas.setAutoGrow()
  FB.getLoginStatus((data) ->
    if (data.status == "connected")
      uid = data.authResponse.userID
      accessToken = data.authResponse.accessToken;
      FB.api("/me", (data) ->
        console.log("Hello #{data.name}")
      )
    else
      if (response.status == "not_authorized")
      # the user is logged in to Facebook,
      # but has not authenticated your app
      else
      # the user isn't logged in to Facebook.
    )

PageScript = document.getElementsByTagName("script")[0]
return if document.getElementById("FBScript")
FBScript = document.createElement("script")
FBScript.id = "FBScript"
FBScript.async = true
FBScript.src = "//connect.facebook.net/en_US/all.js"
PageScript.parentNode.insertBefore(FBScript, PageScript)

Síntese deste código:

https://gist.github.com/shavit/5055943

http://conpanna.net