Javascript 动态添加facebook社交插件时不显示

我正在向网页添加facebook社交插件

当我手动添加：

<div class="fb-comments" data-href="http://website.com/z" data-width="700" data-numposts="7" data-colorscheme="light"></div>

但是，当javascript代码添加它时，它不起作用

---

有什么想法吗？

jssdk在初始化文档时会检查文档一次，以查找这些元素以解析为社交插件。如果您希望它也解析以后添加到文档中的内容，则需要调用

FB.XFBML.parse（）

太棒了@CBroe

谢谢大家!！它在Nextjs/React项目中工作

作为参考，请参见实现它的自定义挂钩：

import { useEffect } from 'react';
let FB;

const useFacebook = ({ addTrack }) => {

  useEffect(() => {
 
    const facebookScript = document.createElement("script");

    facebookScript.id = 'fb-sdk';
    facebookScript.async = true;
    facebookScript.defer = true;
    facebookScript.crossOrigin = "anonymous";
    facebookScript.nonce = "5JOEwLPT";
    const track = addTrack ? `&appId=${process.env.NEXT_PUBLIC_FACEBOOK_ID}&autoLogAppEvents=1` : '';
    facebookScript.src = `https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v10.0${track}`;

    document.body.appendChild(facebookScript);

    const startScript = document.createElement('script');
    const code = `window.fbAsyncInit = function() {
      FB.init({
        appId            : '${process.env.NEXT_PUBLIC_FACEBOOK_ID}',
        autoLogAppEvents : ${addTrack},
        xfbml            : true,
        version          : 'v10.0'
      });
    };`;
    startScript.appendChild(document.createTextNode(code));
    document.body.appendChild(startScript);
    if(window.FB) {
      window.fbAsyncInit();
    }
    return () => {
      document.body.removeChild(facebookScript);
      document.body.removeChild(startScript);
    }
  }, [addTrack]);
};

export default useFacebook;

完整代码Nextjs Facebook SDK评论示例：

---

Facebook不允许这样做，因此除非脚本出现在pageload上，否则它通常不起作用。可能有解决办法吗？@adeneo Check接受了答案。谢谢Cbro，这对我帮助很大！：）这为我解决了一个两天的问题！非常感谢你，@CBroe！我希望我能给你100+，奇怪的是，我在文档中寻找这个，却没有找到：“）你太棒了！