Facebook在ajax上喜欢和分享按钮

Question

>背景： - 我正在使用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进行填充。

问题： - 脸书的喜欢和分享被初始化

$(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 成功函数中调用它。（现在正在页面上调用它）

附言：- 我在成功功能中尝试过。我想我做错了。

Answer 1

默认情况下，XFBML 标签仅在 Facebook JS-SDK 初始化时解析。

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

您可以为所有文档调用它，也可以通过指定元素来搜索 XFBML 元素：

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

Answer 2

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

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

脸书分享链接示例：

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。