Friday, July 7

Social share buttons with counter for blogger

Social share buttons with counter for blogger

Do you want to increase engagement of your blog? then the perfect solution for this problem is use of social share buttons in your blog. Blogger blogs do have there own share buttons but they don't shows the amount of shares and total share counts. Which makes it harder to guess if the people is sharing your content or not and even you can not guess which social media is working better for your blog.


Below codes shows the share count for each network when you hover on them plus total counts. Code uses a third party script from donreach.com and div element for fetching data for certain elements.


Step1: Go to Blogger > Theme > Edit html , and search for <div class='post-share-buttons goog-inline-block'> using Ctrl+F.

Step2: Paste below codes just before the <div class='post-share-buttons goog-inline-block'>

<div class="don-share" data-limit="3">
  <div class="don-share-total"></div>
  <div class="don-share-facebook"></div>
  <div class="don-share-google"></div>
  <div class="don-share-twitter"></div>
  <div class="don-share-pinterest"></div>
</div>
<script type="text/javascript">
  (function() {
    var dr = document.createElement('script');
    dr.type = 'text/javascript'; dr.async = true;
    dr.src = '//share.donreach.com/buttons.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
  })();
</script>

Step3: Save theme.