Facebook 分享按钮和 Ajax答案

【问题标题】：Facebook share button and AjaxFacebook 分享按钮和 Ajax
【发布时间】：2016-10-10 08:09:59
【问题描述】：

我正在开发一个网站，用不同的文章刷新 div 内容。我必须为每篇文章添加一个 Facebook 分享按钮。刷新是在 Ajax 中使用 jQuery 完成的

我做什么：通过调用 article.php 页面，我发送了一个 ID 值。网址如下所示：

http://www.website.org/index.php?page=article.php&id=892

在 index.php 页面中，我已包含：

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
    // 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/fr_FR/sdk.js#xfbml=1&version=v2.7";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

</script>

在article.php页面中，

<div id="fb_container" class="fb-share-button" data-href="<?PHP 
   $url = "http://www.website.org/index.php?page=article?id=".$id;
   echo $url; 
   ?>" data-type="button_count">
</div>
<script>
$(document).ready(function() {
    $('meta[property=og:title]').remove(); $('head').append('<?PHP echo $titre['contenu']; ?>');
    // Same for the others meta tags

    FB.XFBML.parse(document.getElementById('fb_container'));
});
</script>

元标记已更新，没关系。但是分享按钮不起作用： - 在第一次加载时，它是可见的，但共享页面不显示图像和元信息 - 当我们阅读另一篇文章时，分享按钮不显示

有什么建议吗？

【问题讨论】：

不能通过JS设置OG元标签，FB爬虫不关心JavaScript。
第一个OG元标签定义不是动态设置的，只有在我加载另一篇文章时。必须使用第一个值，但在这里不起作用。但是，这不是 FB.XFBML.parse 函数在动态变化后解析内容的工作吗？
当您通过 AJAX 加载代码时，$(document).ready 是否会执行？以及如何替换内容 - 即使在动态加载新内容之后，您是否确保要查找的 ID 在 DOM 中是唯一的？
$(document).ready 包含在加载的 article.php 页面中，即被调用页面。对于 ID 参数的唯一性，我必须对其进行检查，但我认为没有双打。
好吧，我已经成功地动态更改了分享按钮，但元 og 参数仍然不起作用。 FB 没有看到变化。

标签： jquery ajax facebook refresh share

【解决方案1】：

我找到了使用另一个名为页面的 ajax 的解决方案，包括 Facebook 链接和 FB.ui 函数：

在 index.php 中：

  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'Your id app',
      xfbml      : true,
      version    : 'v2.8'
    });
  };

  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

function openFbPopUp(fburl,fbimgurl,fbtitle,fbsummary) {
FB.ui(
          {
            method: 'feed',
            name: fbtitle,
            link: fburl,
            picture: fbimgurl,
            caption: fbtitle,
            description: fbsummary
          }
        );  
}

在刷新的 facebook.php 页面中，包括 facebook 分享链接：

// here the connection to the MySQL database
// read the values of the id element

<a onclick="openFbPopUp('<?PHP echo ($url_fb); ?>','<?PHP echo ("http://".$_SERVER['SERVER_NAME']."/".$photo['url_photo']); ?>','<?PHP echo ($titre['content']); ?>','<?PHP echo (substr(addslashes($description['content']),0,200)."..."); ?>')" value="SHARE">
<img src="images/fb-share.png">
</a>

【讨论】：