Question

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

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

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.

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.

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.

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.

• Twitter
• Facebook
• LinkedIn
• Google+

Answer 1

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> 

once in the page. And use the below script as a placeholder for your linkedin button whereever you need it. (don’t forget to replace the data-url attribute in below script)

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

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>

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>

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.

EDIT:
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. 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.