Javascript 动态添加facebook社交插件时不显示
我正在向网页添加facebook社交插件 当我手动添加:Javascript 动态添加facebook社交插件时不显示,javascript,facebook,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在初始化文档时会检查文档一次,以查找这些元素以解析为社交插件。如果您希望它也解析以后
<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+,奇怪的是,我在文档中寻找这个,却没有找到:“)你太棒了!