Facebook 评论 w/Rails 4 和 Turbolinks答案

【问题标题】：Facebook commenting w/Rails 4 and TurbolinksFacebook 评论 w/Rails 4 和 Turbolinks
【发布时间】：2013-08-20 00:12:45
【问题描述】：

在启用 Turbolinks 的情况下，我无法将 Facebook 社交插件（特别是评论）添加到我的 Rails 4 应用程序。我按照turbolinks issue #62 上的示例进行操作，但无法正常工作。

我也尝试了 turbolink 的解决方案 here，但无法正常工作。

根据this answer 修复 turbolinks 页面上明显的拼写错误也不起作用。

SDK 未加载且控制台中没有错误。

代码：

### view:
<div id="fb-root"></div>
<div class="fb-comments" data-href="<%= request.original_url %>"></div>

### coffeescript:
fb_root = null
fb_events_bound = false

$ ->
  loadFacebookSDK()
  bindFacebookEvents() unless fb_events_bound

bindFacebookEvents = ->
  $(document)
    .on('page:fetch', saveFacebookRoot)
    .on('page:change', restoreFacebookRoot)
    .on('page:load', ->
      FB.XFBML.parse()
    )
  fb_events_bound = true

saveFacebookRoot = ->
  fb_root = $('#fb-root').detach()

restoreFacebookRoot = ->
  if $('#fb-root').length > 0
    $('#fb-root').replaceWith fb_root
  else
    $('body').append fb_root

loadFacebookSDK = ->
  window.fbAsyncInit = initializeFacebookSDK
  $.getScript("//connect.facebook.net/en_US/all.js#xfbml=1")

initializeFacebookSDK = ->
  FB.init
    appId     : 'xxxxxxxxxxxx'
    channelUrl: '//www.mydomain.com/channel.html'
    status    : true
    cookie    : true
    xfbml     : true

### /public/channel.html
<script src="//connect.facebook.net/en_US/all.js"></script>

谢谢。非常感谢您的帮助。

【问题讨论】：

问题解决了吗？

标签： ruby-on-rails facebook facebook-javascript-sdk ruby-on-rails-4 turbolinks

【解决方案1】：

试试这个，让我知道它是否有效......

在assets/javascripts 文件夹中创建一个social.js.coffee。

在里面写：

$(document).on 'page:change', ->
  FB.init({ status: true, cookie: true, xfbml: true });

【讨论】：

感谢您的回答。这使它半工作。但是，在第一次访问页面时，不会显示 cmets。点击提交也不会将新评论附加到 cmets 列表中。虽然，这可能是一个不相关的问题。刷新页面后，一切都按预期显示。此外，该解决方案不是在每次页面加载/更改时初始化 SDK - 随着应用程序的增长而变得昂贵？

【解决方案2】：

执行以下操作：

安装observejs：

gem 'observejs'

然后给小部件添加标签：

<div as="FB" class="fb-comments" data-href="<%= request.original_url %>"></div>

然后在 javascripts 文件夹中创建一个新脚本（在我的示例中为 fb.coffee）：

ObserveJS.bind 'FB', class
  root: document.createElement('div')
  @::root.id = 'fb-root'

  loaded: =>
    if !document.body.contains(@root)
      document.body.appendChild(@root)

    if FB?
      FB.XFBML.parse()
    else
      @initialize()

  initialize: =>
    js = document.createElement('script')

    script = document.getElementsByTagName('script')[0]
    js = document.createElement('script')
    js.id = 'facebook-jssdk'
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID&version=VERSION_OF_API"
    script.parentNode.insertBefore(js, script)

在你的 application.js 中包含 js 文件

//= require observejs
//= require fb

【讨论】：