JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/jquery.goodshare.js/3.1.7/goodshare.min.js"></script>
<h1>Small demo goodshare.js: <code>getCount()</code></h1>
<p>At ver. <code>3.1.7</code> we added an external function <code>getCount()</code> that updates counter from any place of your script. This can be useful if you create share buttons when the DOM is fully loaded.</p>
<div class="result">
<div class="timeout"></div>
<div>
<a href="#" class="button">+ Add new Facebook button</a>
</div>
<div class="add"></div>
</div>
<p>See goodshare.js on GitHub: <a href="https://github.com/enjoyiacm/goodshare.js" target="_blank">https://github.com/enjoyiacm/goodshare.js</a>.</p>
CSS
html, body {font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; text-align: center;}
code {color: #999999;}
a[data-type="fb"] {color: #ffffff; background: #3b5998;}
div.result a {display: inline-block; width: 210px; padding: 10px; margin: 2px auto; cursor: pointer;}
div.result a.button {color: #ffffff; background: #777777;}
div.result {padding: 50px 0;}
JavaScript
$(document).ready(function() {
// Load Facebook button after timeout (4 sec.)
setTimeout(function() {
$('<p>Okay, DOM is ready and this is Facebook button: <a href="#" class="goodshare" data-type="fb">Facebook <span data-counter="fb"></span></a></p>').appendTo('.result .timeout').getCount();
}, 4000);
// Create new Facebook button after click
$('a.button').on('click', function(event) {
event.preventDefault();
$('<a href="#" class="goodshare" data-type="fb">Facebook <span data-counter="fb"></span></a><br />').appendTo('.result .add').getCount();
});
});