许多人在一个页面上共享社交网络的按钮

时间:2012-04-14 10:44:10

标签: javascript ajax performance social-networking

我目前正在研究数据库,他们决定在社交网络(Facebook,Twitter,LinkedIn和Google +)上分享网站上的文章链接。

优选地,这应该通过各个网络提供的共享按钮来完成。我按照每个网络的实施说明,迅速让按钮正常工作并在网站上正确显示。

我的问题是,该网站提供了在单个搜索结果页面上显示1000(1K)帖子的可能性。这意味着当创建这样的页面时,它需要为每个社交网络创建1000个共享按钮(实际上为4000)。

可悲的是,这似乎压倒了浏览器,因为它提供了停止社交网络提供的javascript以及你是否选择停止它 - 页面最终陷入僵局等待来自社交网络的响应并且永远不会完成页面加载过程。

我有一个想法,问题可能是大量的异步请求意味着浏览器以某种方式错过了一些响应,因此最终会等待永远不会发生的响应。

正如所提到的那样,如果一个页面显示100个帖子(实际上是400个共享按钮),那么这么多帖子只会出现问题。它可以很好地运行。

虽然可以说单个页面上的1000个帖子是矫枉过正的,但限制显示帖子的最大数量可能不是一种选择。

因此,我的问题是,您是否知道解决此类问题的方法,或者我唯一真正的选择是创建不需要通过社交网络提供的JavaScript创建的自定义共享按钮?

以下参考资料引出了每个共享按钮的文档。

1 个答案:

答案 0 :(得分:3)

对于所有这些按钮,有一个主要的js文件可以完成繁重的工作。 所以, for LinkedIn ,添加脚本标记:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script> 

一次在页面中。并根据需要使用以下脚本作为您的linkedin按钮的占位符。 (不要忘记替换下面脚本中的data-url属性)

<script type="IN/Share" data-url="http://developer.linkedin.com/plugins/share-plugin-generator" data-counter="top"></script>

对于Twitter 类似地,下面的脚本标记需要在页面中添加一次,因为它的工作是获取主js文件并将其添加到页面。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

以下脚本需要根据需要多次添加。将data-url属性替换为您点击时需要发送推文的网址。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://dev.twitter.com" data-via="your_screen_name" data-lang="en">Tweet</a>

当您获得 FB Google Plus 的代码时,您将获得一个需要添加一次的脚本,然后代码可以在任何需要的地方添加。

修改 根据您的评论如下:脚本肯定会引起问题,因为他们需要将每个占位符转换为一个好看的“喜欢”按钮。以下是提高绩效的几种方法:

  1. 仅在页面加载时运行这些脚本(即,在加载时添加主脚本)
  2. 使用setTimeoutsetInterval,一次处理每100个占位符(需要更改主脚本)
  3. 懒惰加载类似按钮的初始化。当用户滚动页面时,页面中会出现类似按钮,然后初始化按钮(需要更改主脚本)
  4. 推荐方法:只保留一组相似的按钮。当用户将鼠标悬停在搜索结果上时,将这组按钮添加到该div,并更改按钮中与url相关的属性。通过这种方式,只会显示一组按钮,并且根本不需要时间来启动它们。