如何实现Facebook按钮的异步加载
几乎所有的博客和网站都会用到Facebook的点赞、分享或关注按钮。
您可能已经知道，默认情况下，Facebook社交分享代码是与您的网页资源同步加载的。
这会导致网站加载时间增加，并对搜索引擎优化（SEO）评分产生负面影响。这不仅不利于SEO，还会破坏用户体验。
我理解Facebook社交分享按钮的重要性，但它不应该是优先加载的代码。许多博客或网站的页面加载时间过长，正是因为默认的Facebook代码。
通过异步加载Facebook代码，您可以将网页加载速度提高0.5到1.5秒。这就是为什么要更快地加载Facebook点赞、分享或关注按钮的原因。
以下代码是我从Facebook开发者文档中获取的，并应用于techblik.com。
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
现在，我们只需在代码中添加一行，即可帮助更快地加载按钮。
js.async=true;
所以，修改后的代码如下：
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
是不是很简单？
更新：Facebook提供的新代码片段不再需要上述代码，因为它已经包含了脚本的异步加载，如下所示。
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>
您是WordPress用户吗？请查看这篇文章，其中介绍了如何在不使用插件的情况下优化性能。如果您正在寻找不会减慢速度的社交媒体插件，我强烈推荐 Novashare。
我相信您希望您的网页加载速度更快，希望这篇文章对您有所帮助。
喜欢这篇文章吗？为什么不与全世界分享呢？