ajax 上的 Facebook 点赞和分享按钮答案

【问题标题】：Facebook like and share button on ajaxajax 上的 Facebook 点赞和分享按钮
【发布时间】：2012-04-30 15:38:00
【问题描述】：

背景： - 我正在使用 ajax 来获取一个名为“foo_posts”的实体。在这篇文章中，我使用了 Facebook 分享和点赞按钮

{% for post in foo_posts %}
    <div class="foo">
        {{ post }}
        <div class="fb-like" data-send="true" data-width="450" data-href="http://foo/foo/detail/{{ foo.id }}/" data-show-faces="true"></div>
</div>

{% endfor %} 现在这些帖子正在使用 Ajax 填充。

问题：- facebook 的点赞和分享被

初始化

$(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_GB/all.js#xfbml=1&appId=245185848840630";
              fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

这不起作用。如何调用此函数，以便正确填充喜欢和分享？是否应该在 ajax 成功函数中调用。（现在在页面本身上调用它）

P.S :- 我在成功函数中尝试过。我想我做错了。

【问题讨论】：

标签： jquery ajax facebook django-templates

【解决方案1】：

如果您使用多个 facebook 分享按钮并且您还有多个社交媒体分享按钮，那么您可以完全跳过以包含所有相关的 js，这只会降低您的页面速度，而不是分享按钮及其 js，只使用链接分享您的帖子，

最好的事情是使用这种方法，您在使用 ajax 获取 html 时无需执行任何操作。

facebook分享链接示例：

https://www.facebook.com/sharer.php?u=[your-url]

你可以像下面这样使用它：

<a href="https://www.facebook.com/sharer.php?u=[your-url]">Share on facebook</a>

您也可以使用 css 将此链接制作为 facebook 按钮外观，或者您可以使用 facebook 的图像或 svg 的 facebook。

【讨论】：

【解决方案2】：

XFBML 标签默认只在 Facebook JS-SDK 初始化时解析。

在页面渲染后，将社交插件添加到 DOM 后，您应该调用 FB.XFBML.parse() 方法。

您可以为所有文档调用它，或者通过指定元素来搜索其中的 XFBML 元素：

FB.XFBML.parse();
// OR
FB.XFBML.parse(DOM_ELEMENT_WHERE_AJAX_CONTENT_IS_PLACED);

【讨论】：