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

Posted 2023-03-17

【中文标题】facebook社交插件在动态添加时不显示

【英文标题】：facebook social plug-in not showing up when added dynamically

【发布时间】：2015-03-18 22:02:54

【问题描述】：

我正在将 facebook 社交插件添加到网页中

当我手动添加时：

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

它可以工作，但是，当 javascript 代码添加它时，它不会

有什么想法吗？

【问题讨论】：

Facebook 不允许这样做，因此除非页面加载中存在脚本，否则它通常不起作用。可能有解决方法？

@adeneo 检查接受的答案。

【参考方案1】：

JS SDK 在初始化时会遍历您的文档一次，以查找此类元素以解析为社交插件。如果您希望它也解析您稍后添加到文档中的内容，您需要调用FB.XFBML.parse()。

https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

【讨论】：

感谢 Cbro，这对我帮助很大！ :)

这为我解决了两天的问题！非常感谢，@CBroe！

我希望我能给你 100+，奇怪的是我在文档中寻找这个并没有找到它:')

你太棒了！

【参考方案2】：

太棒了@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 cmets 示例： https://github.com/cmdaniel/nextjs-facebook-sdk