Question

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

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

Answer 1

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

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

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

更新

Google正在使用Like按钮的iframe版本，不需要加载Facebook all.js脚本。以下是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加载+1按钮（类似于Facebook Like按钮）：

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

懒惰加载社交按钮

1 个答案: