Many Share Buttons For Social Networks On One Page

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

Solution 1:

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

<scriptsrc="//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)

<scripttype="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.

<ahref="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.