带有 Turbolink 的 Facebook Twitter 按钮答案

【问题标题】：Facebook Twitter Buttons with Turbolink带有 Turbolink 的 Facebook Twitter 按钮
【发布时间】：2014-01-14 16:25:40
【问题描述】：

我正在尝试实现 2 个共享按钮。 Facebook Like Button 和 Twitter Share Button。

但我的 turbolinks 有问题。查找后我发现了一个interesting article。

解决方案指出，通过从 application.html.erb 中删除初始脚本并包含以下文件将解决问题。

fb_root = null
fb_events_bound = false

$ ->
  loadFacebookSDK()
  bindFacebookEvents() unless fb_events_bound

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

saveFacebookRoot = ->
  fb_root = $('#fb-root').detach()

restoreFacebookRoot = ->
  if $('#fb-root').length > 0
    $('#fb-root').replaceWith fb_root
  else
    $('body').append fb_root

loadFacebookSDK = ->
  window.fbAsyncInit = initializeFacebookSDK
  $.getScript("//connect.facebook.net/en_US/all.js#xfbml=1")

initializeFacebookSDK = ->
  FB.init
    appId     : 'YOUR_APP_ID'
    channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html'
    status    : true
    cookie    : true
    xfbml     : true

Twitter Problem 也是如此：

twttr_events_bound = false

$ ->
  bindTwitterEventHandlers() unless twttr_events_bound

bindTwitterEventHandlers = ->
  $(document).on 'page:load', renderTweetButtons
  twttr_events_bound = true

renderTweetButtons = ->
  $('.twitter-share-button').each ->
    button = $(this)
    button.attr('data-url', document.location.href) unless button.data('url')?
    button.attr('data-text', document.title) unless button.data('text')?  
  twttr.widgets.load()

我做到了，但由于某种原因，我的问题并没有消失。有人可以帮我解决这个问题吗？

【问题讨论】：

我认为您在填写时输入了所有正确的信息？

标签： html ruby-on-rails facebook twitter turbolinks

【解决方案1】：

参考这个问题Rails 4: how to use $(document).ready() with turbo-links（得票最多的答案），试试吧：

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

我之前在使用 turbolink 时遇到了问题，当我在主页中加载 fb 脚本，然后点击链接到另一个页面时，fb 脚本没有重新加载。所以我尝试添加data-turbolink-track = false，它成功了。希望对您有所帮助。

【讨论】：