Кнопка «Поделиться с Facebook» в поповере - PullRequest
Новая
       25

Кнопка «Поделиться с Facebook» в поповере

0 голосов
/ 17 января 2019

Я пытаюсь заставить кнопку делиться на фейсбуке, работающую в поповере начальной загрузки.

Но это не работает, всплывающие окна работают, но внутри поповера кнопка «Поделиться» не видна

Инструкция для кнопки «Поделиться» на Facebook

Код: 

$('[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>

1 Ответ

0 голосов
/ 17 января 2019

Для динамически создаваемых тегов, вы должны использовать эту функцию для повторного анализа социальных плагинов: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Загрузить JS SDK при загрузке страницы (и только при загрузке страницы) и вместо этого вызвать FB.XFBML.parse() в обратном вызове.

...