Facebook Like Box 社交插件不适用于 Turbolinks答案

【问题标题】：Facebook Like Box social plugin doesn't work with TurbolinksFacebook Like Box 社交插件不适用于 Turbolinks
【发布时间】：2013-08-06 15:39:59
【问题描述】：

我正在使用 Like Box 社交插件 (https://developers.facebook.com/docs/reference/plugins/like-box/)，效果很好。

问题是我在带有 Turbolinks 的 Rails 4 应用程序中使用它。每当我重新加载页面时，都会出现类似框。如果我单击任何链接，则会加载下一页并且不会显示“赞”框。

我已经尝试过了，但没有成功 =/

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

关于如何解决这个问题的任何想法？

【问题讨论】：

我今天才让它工作。如果您可以粘贴一些您正在使用的 JS，我可以提供帮助。

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

【解决方案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。这些必须在所有其他页面中都可以访问，但这就是我们首先讨厌 turbolink 的原因。

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

【讨论】：

我将脚本复制到了我的 application.html.erb 的头部，除了拼写错误（和应用程序 ID）还有什么我需要做的吗？我仍然可以显示点赞框。
这里同上。把它放在头上，修正错字。唯一不同的是，现在 FB 也不会在重新加载时加载。
这似乎对我不起作用。这需要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

【讨论】：