向您的网站添加社交媒体"喜欢"和"+1"按钮的最有效方法是什么？

Question

这项任务听起来微不足道,但请耐心等待.

这些是我正在使用的按钮:

• 谷歌(+1)
• Facebook(赞)
• Twitter(推特)
• LinkedIn(分享)

通过对webpagetest.org进行一些测试,我发现如果你从每个服务中获取片段以将这些按钮放在你的页面上,那就太低效了.除了图像本身,您还可以有效地下载多个JavaScript文件(在某些情况下,只需一个按钮就可以下载多个JavaScript文件).在Facebook连接上,Facebook Like按钮及其相关资源的总加载时间可长达2.5秒.

现在使用像ShareThis这样的服务要好一些,因为你可以从一个来源获得多个按钮.但是,他们没有对Google +1的适当支持.如果您从Google +1按钮获取了代码,那么它仍会从Google获取所有这些资源.

我有一个想法,涉及在单击通用外观"共享"按钮时加载所有按钮.这样就不会增加页面加载时间.我认为这可以使用此处描述的代码作为起点来完成.这可能是一个很好的解决方案,但我想在走这条路之前我会问这里.

Answer 1

如果您不关心这些按钮的动态方面,我找到了一种可能的解决方案.换句话说,如果您不想显示有多少人对您的页面加了+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

我实现了这一改变,在1.5 Mbps DSL上,页面加载时间从4.9秒增加到3.9秒.请求数量从82个增加到63个.

我还有一些前端优化要做,但这是朝着正确方向迈出的一大步.

Answer 2

我不会担心这一点，原因如下：如果相关网站正确管理了它们的资源 - 并且，来吧，它是 Google 和 Facebook 等...... - 浏览器应该在第一个请求后缓存它们。您可能会在缓存较小或禁用的服务中看到这种效果，但是很可能您的所有客户端在到达您的页面之前就已经在其缓存中拥有了这些资源。

而且，只是因为我很好奇，这是另一种方法：

以下是来自 StackOverflow 的 facebook share 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 工程师只是通过点击调用该页面。这意味着它只是文本，直到您单击它，它会动态地延迟所有内容。