将社交媒体“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”按钮添加到您的网站的最有效方式是什么？

回答

相关问题