延遲加載社交按鈕

是否有人確切知道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

延遲加載社交按鈕

回答

相關問題