如何在通过 ajax 加载页面后显示 Twitter / Facebook / Google+ 按钮？答案

【问题标题】：How can I get Twitter / Facebook / Google+ buttons to show up after loading page via ajax?如何在通过 ajax 加载页面后显示 Twitter / Facebook / Google+ 按钮？
【发布时间】：2011-12-19 18:36:49
【问题描述】：

我有一个 rails 3.1 应用程序，我希望允许用户通过 Twitter、Google+ 和 Facebook（HTML5 版本的like 按钮）共享项目。我让它在项目的显示页面上运行良好（即 - 只显示一个项目），但我在通过 Ajax 将项目加载到列表中的容器页面上遇到问题。我想在容器中的每个项目旁边都有单独的共享按钮。

第一次加载页面时，每个项目旁边都会显示共享按钮。只有当我通过 ajax 重新加载容器时才会出现我的问题。 Twitter、Google+ 和 Facebook 按钮不显示。以下是我的设置方式：

application.html.haml

-# This is right before the body tag closes
= render 'site/share_js'

_share_js.html.erb（来自每个提供商的代码）

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<%# Twitter %>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<%# Google+ %>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

_share_buttons.html.erb（传入要分享的项目的网址）

<div class="share-buttons">

<%# Twitter %>
<a  href="https://twitter.com/share" 
class="twitter-share-button" 
data-lang="en"
data-count="horizontal"
data-text="<%= share_text %>"
data-url="<%= bly_url %>">
Tweet
</a>

<%# Google+ %>
<g:plusone size="medium" href="<%= full_url %>"></g:plusone>

<%# Facebook %>
<div    class="fb-like" 
    data-href="<%= full_url %>" 
    data-send="true" 
    data-layout="button_count" 
    data-width="75"
    data-image="<%= image_path_here %>" 
    data-show-faces="false"></div>

</div>

如果我在项目的显示页面或第一次加载容器时使用 share_buttons 部分，效果很好：

_my_item.html.haml

-# other code here that displays the item...
= render :partial => 'site/share_buttons', :locals => share_info_hash

但是，正如我在上面提到的，在 ajax 操作之后它就不能正常工作了：

my_ajax_action.js.erb（通过控制器中的 format.js 调用）

$("#item-container").html("<%= escape_javascript(render :partial => "my_item", :collection => @item_list)%>");

所有项目都在容器中正确显示，但未显示共享按钮。我猜问题是在执行 ajax 操作后需要运行提供程序特定的 javascript。在刷新 html 后，我尝试将提供程序 javascript 放置在 my_ajax_action.js.erb 文件中，但这似乎不起作用。有人对我如何使它起作用有任何想法吗？非常感谢任何帮助！

【问题讨论】：

标签： ajax ruby-on-rails-3 twitter facebook-like google-plus

【解决方案1】：

您尝试呈现的按钮使用了搜索和替换技术。当 onload 发生时页面上已经存在成为按钮的元素时，此方法无需任何特殊干预即可工作。

但是，在您的情况下，成为按钮的元素是在替换脚本执行后插入的。由于顺序与脚本预期的不同，因此您需要在将新按钮添加到页面后自行触发渲染。

以下是一些文档链接，这些链接解释了如何为每项服务执行此操作：

Google +1 按钮：https://developers.google.com/+/plugins/+1button/#example-explicit-load

Facebook 赞按钮：http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Tweet 按钮：好吧，我在文档中找不到这个，但根据一些论坛活动，这看起来像是您正在寻找的代码：

twttr.widgets.load();

（在此处查看相关论坛帖子：https://dev.twitter.com/discussions/890）

【讨论】：