延迟加载社交按钮

是否有人确切知道http://googleblog.blogspot.com/上的社交按钮是如何加载的？我试着加载它们异步通过JQuery，但与谷歌博客等比较实际的按钮产生至少2个额外的HTTP请求：延迟加载社交按钮

http://connect.facebook.net/en_US/all.js https://apis.google.com/js/plusone.js

来源

2012-04-10 Nevyan Dimitrov Neykov

使用Chrome开发工具，您可以看到Google博客正在提出加载每个社交API的单独请求。它不会显示在控制台中，这让我觉得它正在做一些类似于document.write的事情。

要查看它加载的资源，打开开发工具（ctrl + shift + i），然后单击网络选项卡。向下滚动到底部，然后将鼠标悬停在社交按钮上，以便加载。您将看到从Twitter，Facebook和Google+加载的网络资源。

您的异步方法应该没问题。我认为谷歌在这里没有任何魔法。

UPDATE

谷歌正在使用Like按钮，不需要加载的Facebook all.js脚本的iframe版本。这里是Facebook documentation的代码示例。

<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL" 
     scrolling="no" frameborder="0" 
     style="border:none; width:450px; height:80px"></iframe>

+1按钮似乎使用了未公开的技术。它加载使用这样的URL（类似Facebook的Like按钮）+1按钮：

https://plusone.google.com/_/+1/fastbutton?url=YOUR_URL_ENCODED&size=medium&count=true&width=300&annotation=bubble

来源

2012-04-10 05:30:24

嗯，我检查与萤火虫的请求，还发现加载JavaScript函数，但他们仍然实现它，而不请求all.js或plusone.js – 2012-04-10 06:55:35

我深入了解了这一点，并更新了我的答案，详细说明了他们如何做。 – 2012-04-10 15:31:36

非常感谢！ – 2012-04-11 07:16:50

延迟加载社交按钮

回答

相关问题