一页上有许多社交网络的分享按钮

Posted 2023-02-24

【中文标题】一页上有许多社交网络的分享按钮

【英文标题】：Many share buttons for social networks on one page

【发布时间】：2012-04-14 10:44:09

【问题描述】：

我目前正在研究数据库上做一些工作，他们决定希望能够在社交网络（Facebook、Twitter、LinkedIn 和 Google+）上分享指向该网站文章的链接。

最好通过各自网络提供的共享按钮来完成。按照每个网络的实施说明，我很快就让按钮正常工作并在网站上正确显示。

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

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

我的一个想法是，问题可能在于大量的异步请求意味着浏览器会以某种方式错过一些响应，从而最终永远等待一个永远不会到来的响应。

如前所述，只有如此大量的帖子才有问题，例如，如果一个页面显示 100 个帖子（实际上是 400 个分享按钮），它就可以完美地工作。

虽然有人认为在单个页面上发布 1000 个帖子有点过分，但遗憾的是，限制显示帖子的最大数量并不是一种选择。

因此，我的问题是你们中是否有人知道解决此类问题的方法，或者我唯一真正的选择是创建不需要通过社交网络提供的 javascript 创建的自定义共享按钮？

以下参考指向每个共享按钮的文档。

Twitter Facebook LinkedIn Google+

【参考方案1】：

对于所有这些按钮，都有一个主要的 js 文件来完成繁重的工作。 所以，对于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 属性替换为您点击它时需要发送推文的 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之类的代码时，你会得到一个需要添加一次的脚本，然后是要添加的代码随时随地。

编辑： 根据您在下面的评论：这些脚本肯定会引起问题，因为它们需要将每个占位符转换为一个好看的“喜欢”按钮。以下是提高性能的几种方法：

仅在页面加载时运行这些脚本（即，在加载时添加主脚本） 使用 setTimeout 或 setInterval，一次处理每 100 个占位符（需要更改主脚本） 延迟加载类似按钮的初始化。当用户滚动页面时，页面中会出现类似按钮，然后初始化按钮（需要更改主脚本） 推荐方法：只保留一组点赞按钮。当用户将鼠标悬停在搜索结果上时，将这组按钮添加到该 div 并更改按钮中与 url 相关的属性。通过这种方式，只会显示一组按钮，并且根本不需要时间来初始化它们。

【讨论】：

感谢您的回复！这正是我所做的。然而，问题是当有这么多按钮时脚本会导致问题。如前所述，如果页面上的按钮较少，则一切正常。

谢谢！这正是我想要的。 :)