对于社交网络的许多共享按钮在一个页面上 [英] Many share buttons for social networks on one page

问题描述

我目前做的，他们已经决定，他们希望能够分享链接来自于社交网络（Facebook，Twitter的，LinkedIn和谷歌+）的网站的文章研究数据库中的一些工作。

I am currently doing some work on a research database where they have decided that they want to be able to share links to articles from the site on social networks (Facebook, Twitter, LinkedIn and Google+).

preferably这应该是通过各自的网络提供的共享按钮完成。我很快就工作的按钮和正确的网站从每个网络下的执行指令显示出来。

Preferably this should be done through the share buttons provided by the respective networks. I quickly got the buttons working and displayed correctly on the site by following the implementation instructions from each network.

我的问题是，该网站提供的方法可行，显示1000（1K）发布单个搜索结果页面上的结果。这意味着，在创建这样一个页面时，它需要创造1000共享按钮为每个社交网络（实际上4000）。

My problem is a consequence of that the site offers the possiblity to show 1000 (1K) post on a single search result page. This means that when such a page is created it needs to create 1000 share buttons for each social network (effectively 4000).

可悲的是，这似乎压倒浏览器，因为它提供了停止的社会网络，以及您是否选择停止或不​​提供的JavaScript - 网页结束了在僵局等待来自社交网络的响应，并从未完成的网页加载过程。

Sadly this seems to overwhelm the browser as it offers to stop the javascript provided by the social networks and whether you choose to stop it or not - the page ends up in deadlock waiting for a response from the social networks and never finishes the page loading process.

我有一个想法，这个问题可能是大量的异步请求意味着浏览器莫名其妙地错过了一些反应，从而结束了永远等待永远也不会到来的响应。

I have an idea that the problem may be that the large number of asynchronous requests means that the browser somehow misses some of the responses and thus ends up waiting forever for a response that will never come.

正如它仅仅是一个如此大的一些职位，例如，如果一个页面显示100个职位（400有效共享按钮），它完美的作品。问题

As mentioned it is only a problem with such a large number of posts, if a page for example displays 100 posts (effectively 400 share buttons) it works perfectly.

尽管可以说，1000后在一个页面上是矫枉过正，限制后显示的最大数量是可悲的不是一个选项。

While it could be argued that 1000 post on a single page is overkill, limiting the maximum number of displayed post is sadly not an option.

我的问题因此无论是任何人都知道的方法来解决这样的问题，如果我唯一真正的选择是创建自定义的共享按钮，这并不需要通过社交网络提供的JavaScript来创建？

My question therefore is whether any of you know of a way to solve this kind of problem or if my only real option is to create custom share buttons that doesn't need to be created through the javascript provided by the social networks ?

下列参考文献导致对每个共享按钮的文档。

The following references leads to the documentation for each of the share buttons.

• 微博
• Facebook的
• LinkedIn
• 的Google+

• Twitter
• Facebook
• LinkedIn
• Google+

推荐答案

对于所有这些按钮，就由它来完​​成繁重的工作主要js文件。 因此，作为LinkedIn ，添加脚本标记：

For all these buttons, there is a main js file which does the heavy work. So, for LinkedIn, add the script tag:

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

一旦在页面中。并使用下面的脚本作为一个占位符LinkedIn按钮。无论您需要它。 （别忘了更换下面脚本中的数据网址属性）

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

对于微博同样，下面的脚本标记需要在页面中添加一次，因为它的工作就是让主js文件，并将其添加到页面。

For Twitter similarly, the below script tag needs to be added once in the page as it's job is to get the main js file and add it to the page.

<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>

的下面脚本需要添加。无论您想多次。更换数据url属性与您的网址需要被啾啾，当你点击它。

The below script needs to be added multiple times whereever you want. Replace the data-url attribute with your url which needs to be tweeted when you click on it.

<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>

当你得到$ C $下的 FB 或 谷歌加 一样，你将获得其需要添加一次，然后要添加的code脚本在任何你需要的。

When you get the code for FB or Google Plus like, you will get a script which needs to be added once and then the code to be added where ever you need.

编辑： 根据您的评论如下：脚本必将导致问题，因为他们需要每一个占位符转换成一个漂亮的喜欢按钮。下面是几种方法可以提高性能：

Based on your comment below: The scripts will surely cause issue because they need to convert each and every placeholder into a good looking 'like' button. Below are few ways to improve the performance:

1. 仅在页面加载运行这些脚本（即，添加在加载时的主要脚本）
2. 使用的setTimeout 或的setInterval ，在每100个占位符同时工作（需要改变主脚本）
3. 延迟加载的喜欢按钮初始化。当用户滚动页面之类的按钮将在页面上显示出来，然后初始化按钮（需要改变主脚本）
4. 推荐方法：只保留一组类似的按钮。当用户将鼠标悬停在一个搜索结果，然后加入这一组按键的股利和更改按钮相关的URL的属性。通过这种方式，只有一组按钮会显示并不会花时间在所有初始化它们来。

1. run these scripts only on page load (i.e., add the main scripts at load time)
2. using setTimeout or setInterval, work on every 100 placeholders at a time (requires change in main scripts)
3. Lazy load the init of like buttons. When the user scrolls the page and the like buttons will show up in the page, then initialize the buttons (requires change in main scripts)
4. Recommended Approach: Keep just one set of like buttons. When user hovers over a search result, then add this set of buttons to that div and change the attributes related to url in the buttons. With this way, only one set of buttons will be shown and won't take time at all to init them.

这篇关于对于社交网络的许多共享按钮在一个页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！