Rails Turbolinks中的Facebook插件页面无法加载

问题描述：

在我的Rails应用程序中，我正在加载Facebook插件页面，但是由于turbolinks，它无法加载每个页面（仅有时）。我尝试此页面上的脚本，但是现在它从未加载。我该怎么办？

in my Rails app I am loading Facebook plugin page, but because of turbolinks it doesnt load each page (only sometimes). I tried this script on this page , but now it never loads. What did I do?

我使用以下脚本创建了facebook.coffee：

I created facebook.coffee with this script:

$ ->
  loadFacebookSDK()
  bindFacebookEvents() unless window.fbEventsBound

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

saveFacebookRoot = ->
  if $('#fb-root').length
    @fbRoot = $('#fb-root').detach()

restoreFacebookRoot = ->
  if @fbRoot?
    if $('#fb-root').length
      $('#fb-root').replaceWith @fbRoot
    else
      $('body').append @fbRoot

loadFacebookSDK = ->
  window.fbAsyncInit = initializeFacebookSDK
  $.getScript("//connect.facebook.net/cs_CZ/sdk.js#xfbml=1&version=v2.6")

initializeFacebookSDK = ->
  FB.init
    appId  : 'YOUR_APP_ID'
    status : true
    cookie : true
    xfbml  : true

然后在我的application.js中，我只需要它。

And then in my application.js i just require it.

鉴于我有以下代码：

<div id="fb-root"></div>
<div class="fb-page" data-href="https://www.facebook.com/mypage/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/mypage/"><a href="https://www.facebook.com/mypage/">MyPage</a></blockquote></div></div>

Facebook插件页面未加载。你不知道为什么吗我正在寻找appId，但未在插件页面中找到它。

Facebook plugin page isn't loading. Don't you know why? I was looking on appId, but in plugin page its not included.

答

这对我有用...某种组合在Facebook的文档和您链接的页面上的脚本之间

This worked for me ... Some sort of combination between Facebook's docs and the script on the page you linked

$ ->
  loadFacebookSDK()
  bindFacebookEvents() unless window.fbEventsBound

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

saveFacebookRoot = ->
  if $('#fb-root').length
    @fbRoot = $('#fb-root').detach()

restoreFacebookRoot = ->
  if @fbRoot?
    if $('#fb-root').length
      $('#fb-root').replaceWith @fbRoot
    else
      $('body').append @fbRoot

loadFacebookSDK = ->
  ((d, s, id) ->
    js = d.getElementsByTagName(s)[0]
    fjs = d.getElementsByTagName(s)[0]
    return if d.getElementById(id)
    js = d.createElement(s)
    js.id = id
    js.src = "https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.5"
    fjs.parentNode.insertBefore(js, fjs)
  )(document, 'script', 'facebook-jssdk')

initializeFacebookSDK = ->
  FB.init
    # appId : 'YOUR_APP_ID'
    status : true
    cookie : true
    xfbml : true

区别在于loadFacebookSDK函数。请注意，正如我在问题中评论的那样，$ .getScript（）删除了请求的查询/参数部分。

The difference is in the loadFacebookSDK function. Notice that as I commented in the question, $.getScript() removes the query/parameters part of the request.

Rails Turbolinks中的Facebook插件页面无法加载

相关推荐