Rails 4：让 Twitter 分享按钮与 Turbolinks 一起使用答案

【问题标题】：Rails 4: getting Twitter share button to work with TurbolinksRails 4：让 Twitter 分享按钮与 Turbolinks 一起使用
【发布时间】：2015-02-24 17:35:14
【问题描述】：

我正在尝试让 Twitter 分享按钮与 Rails 4 应用程序 + Turbolinks 一起使用。

在我看来，我有：

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="<%= @article.title %>" data-via="<%= t('twitter_user') %>">Tweet</a>

我的 app/assets/javascripts/ 目录中还有一个 twitter.js.coffee 文件：

class @Twitter
    eventsBound = false
    @load: ->
        Twitter.loadTwitterSDK()
        Twitter.bindEvents() unless Twitter.eventsBound
    @bindEvents: ->
        if typeof Turbolinks isnt 'undefined' and Turbolinks.supported
            $(document).on('page:load', Twitter.renderTweetButtons)
        Twitter.eventsBound = 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')?
    @loadTwitterSDK: ->
        $.getScript("//platform.twitter.com/widgets.js")
Twitter.load()

该按钮在我硬刷新页面时出现，但在导航时消失（可能是由于 Turbolinks）。我可能需要继续调用 renderTweetButtons 函数，但不确定如何。

任何帮助表示赞赏！谢谢:)

【问题讨论】：

尝试添加 data-no-turbolink="false" 到链接？
这没什么区别：\
data-no-turbolink="true" 怎么样？
同样，在我手动刷新页面之前，Twitter 上的分享按钮不会出现。

标签： ruby-on-rails twitter coffeescript turbolinks

【解决方案1】：

问题是我在@renderTweetButtons 中缺少twttr.widgets.load()，正如here 所记录的那样。这是完整文件现在的样子：

class @Twitter
    eventsBound = false
    @load: ->
        Twitter.loadTwitterSDK()
        Twitter.bindEvents() unless Twitter.eventsBound
    @bindEvents: ->
        if typeof Turbolinks isnt 'undefined' and Turbolinks.supported
            $(document).on('page:load', Twitter.renderTweetButtons)
        Twitter.eventsBound = 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()
    @loadTwitterSDK: ->
        $.getScript("//platform.twitter.com/widgets.js")
Twitter.load()

这解决了问题。

【讨论】：

【解决方案2】：

代替：

Twitter.load()

尝试：

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

【讨论】：

相同。除非我硬刷新 Twitter 共享图标不会出现。我觉得这可能与 Twitter 的 widgets.js 文件有关，该文件在许多不同的地方调用 preventDefault。

【解决方案3】：

它对我有用：

将提供的 javascript sn-p 替换为指向 platform.twitter.com/widgets.js 的外部脚本标记。

<body>
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.org" data-size="large">Tweet</a>
  <script src="//platform.twitter.com/widgets.js"></script>
</body>

来源here

【讨论】：