Facebook Like Box 社交插件在使用 Turbolinks 时无法正常工作。

Question

我正在使用Like Box社交插件(https://developers.facebook.com/docs/reference/plugins/like-box/)，效果非常好。问题是，我在Rails 4应用程序中使用Turbolinks时遇到了问题。每当我重新加载页面时，Like Box就会出现。如果我点击任何链接，下一个页面将加载，同时Like Box不会出现。

我已经尝试过这个方法了，但没有起作用=/

http://reed.github.io/turbolinks-compatibility/facebook.html

你有什么解决这个问题的想法吗？

- renatojf

---

我今天刚刚让它工作了。如果您能粘贴一些您正在使用的JS代码，我可以提供帮助。 - Nerve

Answer 1

您发布的原始问题中的链接非常好。它要求我们创建三个函数：

1) saveFacebookRoot：需要这样做才能在以后恢复div#fb-root。这是在page:fetch时调用的。page:fetch在旧页面的DoM仍然是旧页面的情况下调用。即：新页面尚未替换旧页面

2) restoreFacebookRoot：需要这样做才能将div#fb-root重新附加到页面上。它在page:change上调用。page:change在新的DoM可用时调用。

3) 这里有一个小笔误。我们需要在page:load中调用此函数。

FB.XFBML.parse() // Correct

替代方案：

FB?.XFBML.parse() // InCorrect

请记住，当页面首次重新加载时，这三个事件中只调用page:change。

关键在于全局变量fb_root和fb_events_bound的使用。这些变量必须在所有其他页面中都可以访问，但这也是我们首先讨厌turbolinks的原因。

参考资料：http://reed.github.io/turbolinks-compatibility/facebook.html

- Nerve

---

我将脚本复制到了我的application.html.erb文件的头部，除了错别字（和应用程序ID）之外，还需要做些什么吗？我仍然无法显示“赞”框。 - marimaf

同样的问题。我把它放在头部，修正了拼写错误。唯一的区别是现在重新加载时FB也不会加载。 - JosephK

这似乎对我不起作用。这需要SDK吗？按钮不应该需要它。我想知道出了什么问题。 - ahnbizcad

Answer 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

- Serg Metelin