將社交媒體「like」和「+1」按鈕添加到您的網站的最有效方式是什麼？

這項任務聽起來微不足道，但忍受着我。將社交媒體「like」和「+1」按鈕添加到您的網站的最有效方式是什麼？

這是我的工作的按鈕：

谷歌（+1）
的Facebook（等）
推特（鳴叫）
LinkedIn（股）

通過對webpagetest.org進行一些測試，我發現如果您從這些服務的每一箇中獲取片段以將這些按鈕放置在您的頁面。除了圖片本身之外，您還可以有效地下載多個JavaScript文件（在某些情況下，只需一個按鈕就可以下載多個JavaScript文件）。在Facebook連接上，Facebook Like按鈕及其關聯資源的總加載時間可以長達2.5秒。

現在使用ShareThis這樣的服務會更好一些，因爲您可以從一個來源獲取多個按鈕。但是，他們對Google +1沒有適當的支持。如果您從Google +1按鈕上獲取他們的代碼，它仍然會從Google獲取所有這些資源。

我有一個想法，它涉及加載所有的按鈕時，點擊一個通用的「共享」按鈕。這樣它不會增加頁面加載時間。我認爲這可以使用描述爲here的代碼作爲起點。這可能是一個很好的解決方案，但我想我會在走這條路之前問這裏。

來源

2012-02-16 Steve Wortham

你可能潛在加載他們後頁面加載與Ajax調用？ – 2012-02-16 23:10:37

@DC_。是的，也許。上面的按鈕中至少有3個也提供iframe解決方案（我對LinkedIn尚不確定）。但是我可以對我網站上的一個頁面進行AJAX調用，只包含按鈕。我已經包含了jQuery，所以它只是一個非常少量的代碼來完成。好決定。 – 2012-02-16 23:28:20

因爲隱私原因，您不應該直接嵌入它們。這在一些國家（例如德國）的合法性也是可疑的。 – CodesInChaos 2012-02-16 23:28:28

我不擔心它，這是爲什麼：如果有問題的網站已經正確地管理他們的資源 - 來，它是Google和Facebook等等 - 瀏覽器應該在第一個之後緩存它們請求。您可能會在緩存很小或被禁用的服務中看到這種效果，但很可能，您的所有客戶端在它們到達您的頁面之前都已將這些資源存儲在其緩存中。

而且，僅僅是因爲我很好奇，還有一種方法：

下面是相關的代碼從StackOverflow上的Facebook股票的JavaScript代碼片段：

facebook:function(c,k,j){k=a(k,"sfb=1");c.click(function(){e("http://www.facebook.com/sharer.php?u="+k+"&ref=fbshare&t="+j,"sharefacebook","toolbar=1,status=1,resizable=1,scrollbars=1,width=626,height=436")})}}}();

縮小的，因爲，嘿，我沒有理會重做代碼。

它看起來像StackOverflow工程師只是簡單地調用點擊頁面。這意味着它只是文本，直到你點擊它，它會動態拉動所有的東西。

來源

2012-02-16 23:10:18 Matt

一些資源被緩存，但其中很多資源都沒有。這是瘋了，但幾秒鐘後我的網站頁面上的重複視圖需要3秒鐘。社交媒體資源至少佔1秒。我可以通過webpagetest.org查看所有這些信息。 – 2012-02-16 23:22:00

感謝Matt，來自StackOverflow的代碼讓我找到了所有4種服務的適當鏈接，我將其添加到了我的答案中。我仍然不確定我是否會走這條路，但我可能會。 – 2012-02-17 00:46:44

如果您不關心這些按鈕的動態方面，我找到了一種可能的解決方案。換句話說，如果你不小心顯示出有多少人+1或喜歡你的頁面，你可以使用這些鏈接...

https://plusone.google.com/_/+1/confirm?hl=en&url={URL} 
http://www.facebook.com/share.php?u={URL} 
http://twitter.com/home/?status={STATUS} 
http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={TITLE}&summary={SUMMARY}&source={SOURCE}

你只需要插入適當的參數。它並沒有變得簡單或輕便。我仍然會爲每個按鈕使用圖標，但我可以在這種情況下實際使用CSS精靈來節省更多。我可能真的走這條路。

UPDATE

我實現了這一變化，並在頁面加載時間從4.9秒去到3.9秒，1.5 Mbps的DSL。請求的數量從82個增加到63個。

我還有幾個前端優化要做，但這是朝正確方向邁出的一大步。

來源

2012-02-17 00:40:07

很酷，你每天都會學到新的東西。很高興所有的服務都有RESTful鏈接，可以用來避免3秒的命中，這幾乎是犯罪行爲。再加上一個這種方法。 – Matt 2012-02-17 19:54:54

是的，我喜歡這種方法。我必須首先運行它，因爲這不是我的網站......它只是我正在工作的一個網站。但現在已經實施，我已經更新了我的答案和細節。 – 2012-02-17 20:14:40

我知道這適用於twitter - https：//twitter.com/share？url = ... - 請參閱此處的更多說明：https：//dev.twitter.com/docs/tweet-button – yoavram 2012-12-11 07:47:19

將社交媒體「like」和「+1」按鈕添加到您的網站的最有效方式是什麼？

回答

相關問題