Rails Turbolinks中的Facebook插件页面无法加载 [英] Facebook plugin page in Rails Turbolinks doesn't load

问题描述

在我的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插件页面无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！