JS 加载的 Twitter 分享按钮无法正确呈现答案

【问题标题】：JS-loaded Twitter share button doesn't render properlyJS 加载的 Twitter 分享按钮无法正确呈现
【发布时间】：2012-04-28 06:00:48
【问题描述】：

在我的 Rails 应用程序中，我有一个“无限页面”，当您向下滚动时会加载更多博客文章。在每篇博文上，都有一个 Twitter 分享按钮。首次加载页面时，所有“首屏”共享按钮都加载得很好；该按钮正确显示，当您单击它时，将显示推文的自定义文本。

但是，向下滚动时加载的共享按钮不起作用。当您向下滚动并加载更多博客文章时，共享按钮会失去其样式（变成纯链接），并且自定义文本功能也会消失（当您单击它时，它会打开一个空白的 Twitter 窗口，没有自定义文本）。

即使我在每个按钮下加载了所有 twitter JS，它仍然无法正常工作。这是我的按钮代码：

    %a.twitter-share-button{"data-count" => "none", "data-text" => "#{post.title} (My new blog post!)", "data-url" => "http://www.example.com", :href => "https://twitter.com/share"} Tweet
    :javascript
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

【问题讨论】：

您是动态设置这些链接的样式，还是使用静态 CSS？
它使用 Twitter JS 进行样式化。所有按钮代码都在上面，从 twitter builder 粘贴。我唯一添加的是data-text 中的haml ruby 标签。我没有在我的 css 中覆盖 .twitter-share-button 或以其他方式对其进行样式设置。
根据 Twitter，您不想这样做：dev.twitter.com/docs/tweet-button/faq#multiple-buttons。如果页面上已经有一个 twitter 框，那么那里的代码不会做任何事情，因此后续调用不会做任何事情。
这个线程：dev.twitter.com/discussions/6860 建议您需要为动态添加的 twitter 按钮做更多的工作。
@jimw，解决方案在您提供的链接中。只需要在部分加载后执行twttr.widgets.load();。随意添加它作为解决方案。

标签： javascript ruby-on-rails twitter

【解决方案1】：

根据https://dev.twitter.com/discussions/6860，要动态添加多个Twitter按钮到一个页面，你需要使用：

twttr.render();

添加每组按钮后。该函数会渲染当前页面上的所有按钮。

【讨论】：

【解决方案2】：

更新：使用更新的 API，应该是

twttr.widgets.load()

【讨论】：