There is a central javascript file that handles the functionality for all of these buttons.
To integrate LinkedIn, include the following script tag:
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
Add the below script as a placeholder for your LinkedIn button with the necessary data-url attribute replaced wherever needed.
<script type="IN/Share" data-url="http://developer.linkedin.com/plugins/share-plugin-generator" data-counter="top"></script>
For Twitter, add the script tag below once in the page to load the main js file:
<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>
Insert the script below multiple times where you want the Twitter share button, replacing the data-url attribute with your desired 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>
When obtaining the code for FB or Google Plus like buttons, follow the same process of adding the initializing script and then inserting the button code where needed.
EDIT:
Regarding your comment: To enhance performance and prevent potential issues caused by excessive use of scripts, consider the following optimizations:
- Load scripts only on page load (include main scripts at load time)
- Utilize
setTimeout or setInterval to process batches of placeholders rather than all at once (requires adjustments to main scripts)
- Implement lazy loading for like button initialization, triggering when users scroll to view the buttons on the page (modifications to main scripts required)
- Recommended Approach: Use a single set of like buttons and dynamically add them to divs when users interact, adjusting attributes accordingly. This minimizes button initialization time and ensures efficient performance.