bootstrap 弹出窗口中的 Facebook 分享按钮

Question

我正在尝试让 Facebook 分享按钮在 bootstrap 弹出窗口中工作。

但它不起作用，弹出窗口有效，但在弹出窗口内，共享按钮不可见

Instructions for the facebook share button

代码：

$('[data-toggle="popover"]').popover({
      trigger: 'click',
      html : true,
      content:  function() {
       var content = '<div id="fb-root"></div><div class="fb-share-button" data-href="https://www.phoronix.com/scan.php?page=news_item&px=Ubuntu-Dock-CPU-Use-Third" data-layout="button_count"></div>'
        return $(content).html(); }
      
       }).on('shown.bs.popover',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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.share {
  color: red !important;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="container">
  <div class="row">
    <div class="col">
      <a tabindex="0" class="btn btn-default btn-lg share" role="button" data-toggle="popover" data-placement="right" title="Social media" data-content='<div id="foo">
       

        </div>'>test</a>
    </div>
  </div>
</div>

Answer 1

在动态创建的标签上，您必须使用此函数重新解析社交插件：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

在页面加载时加载 JS SDK（并且仅在页面加载时），并改为在回调中调用 FB.XFBML.parse()。

bootstrap 弹出窗口中的 Facebook 分享按钮

Facebook share button in a bootstrap popover

facebook

facebook-javascript-sdk

twitter-bootstrap

bootstrap-popover