FB喜欢按钮在ajax调用中不起作用

FB like button doesn't work in ajax calls

本文关键字：调用 不起作用 ajax 喜欢 按钮 FB      更新时间：2023-09-26

我有一个开发的单页网站，通过ajax加载不同的页面（java-script+html）。我在页脚部分包含了FB喜欢按钮，这是所有页面通用的。现在，问题是每当我从一个页面导航到另一个页面时，在我刷新整个页面之前，喜欢按钮不会显示。例如，最初，当加载主页时，FB like按钮出现在页脚中。但是当导航到"关于"页面时，它不会显示。现在，当刷新"关于"页面时，将显示"喜欢"按钮。在此之后，当我导航回主页时，按钮再次消失。以下是我用于在页面中嵌入按钮的代码：

    //This is to be included in the html page at the start
    <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";
       fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    //Below html block is included where you want to place the FB like button
    <div class="fb-like" data-href="https://www.facebook.com/yourPage" 
         data-colorscheme="light" data-layout="standard" data-action="like" 
         data-show-faces="true" data-send="true"></div>

请注意，页面（主页和关于）在单个父页面上异步加载。

发生这种情况，因为Facebook只初始化一次，并且只有在启动自己时，它才会显示您的FB Like按钮。

因此，如果您使用AJAX导航到另一个站点（顺便说一句，这对seo有点不好），Facebook仍然被初始化并且不知道再次渲染您的FB Like Button。因此，只有重新加载，Facebook才会再次初始化facebook JS，然后显示您的FB喜欢按钮。

相关文章：