Как динамически отобразить плагин для страницы FB, если HTML создан после того, как FB JS -SDK уже загружен?

Question

Я добавил виджет страницы (ранее «likebox») на мою страницу.

Это что-то вроде:

<div class="fb-page"
  data-href="https://www.facebook.com/imdb" 
  data-width="340"
  data-hide-cover="false"
  data-show-facepile="true"></div>

На странице. Теперь все работает нормально.

Однако я хочу динамически добавлять дополнительные виджеты на мою страницу после загрузки страницы (включая FB js -sdk и первый виджет). Например. Я хочу добавить новый виджет страницы после нажатия кнопки:

$('button').click(function(){
  $('body').append(`
    <div class="fb-page"
      data-href="https://www.facebook.com/imdb" 
      data-width="340"
      data-hide-cover="false"
      data-show-facepile="true"></div>
  `);
})

Но после этого div не превратится в поле.

Я пробовал много такие как перезагрузка файла js или удаление объекта FB. Но все не удалось.

Есть ли какая-либо функция вроде:

FB.refillFBHTMLElements(), чтобы я мог превращать динамически созданные элементы в виджеты Facebook?

Answer 1

Попробуйте использовать FB.XFBML.parse(). Я только что попробовал это на этом примере, и он успешно проанализировал динамически созданный виджет:

HTML:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
  src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2730175443872266&autoLogAppEvents=1"></script>

<h4>Dynamically Load Facebook Widget</h4>

<button onclick="loadWidget()" class="mb-2">Load Widget</button>

<div id="widget"></div>

JavaScript:

function loadWidget() {
  const fbPage = document.createElement('div');
  fbPage.className = "fb-page";
  fbPage.dataset.href = "https://www.facebook.com/facebook";
  fbPage.dataset.tabs = "timeline";
  fbPage.dataset.width = "";
  fbPage.dataset.height = "";
  fbPage.dataset.smallHeader = "false";
  fbPage.dataset.adaptContainerWidth = "true";
  fbPage.dataset.showFacepile = "true";
  const bq = document.createElement('blockquote');
  bq.cite = "https://www.facebook.com/facebook";
  bq.className = "fb-xfbml-parse-ignore";
  const anchor = document.createElement('a');
  anchor.href = "https://www.facebook.com/facebook";
  anchor.innerHTML = 'Facebook';
  bq.appendChild(anchor);
  fbPage.appendChild(bq);
  const widget = document.getElementById('widget');
  widget.appendChild(fbPage);

  // parse the widget
  FB.XFBML.parse(widget);
}

Ссылка :

• FB.XFBML.parse ()