Question

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

问题是我在使用Turbolinks的Rails 4应用程序中使用它。每当我重新加载页面时，都会出现类似的框。如果我点击任何链接，则会加载下一页，而Like Box则不会显示。

我已经尝试了这个但是没有用到/ /

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

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

Answer 1

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

1）saveFacebookRoot：这是必需的，以便稍后可以恢复div#fb-root。这是page:fetch调用的。在DoM仍然是旧页面时调用page:fetch。即：新页面未替换旧页面

2）restoreFacebookRoot：这需要div#fb-root可以附加回页面。它在page:change上调用。当新的DoM可用时，将调用page:change。

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

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

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

2 个答案: