Saturday , December 16 2017

Responsive Social Media Share Buttons for Blogger

Are you looking for social media share button for blogger? In this post, I want to show how to add beautiful & responsive social media sharing button in blogger. This allows your readers to share your post on their favorite social media. In this way, you not only increase the blog traffic, but you can get better rank in search result because in these Google also use the social media singles (like, share, retweet, etc.) for page rank in SERP.
So, this is very important to integrate an attractive social media sharing button in the blog posts. There are many sites available which provide the social button, but you may be looking for some unique social button for your blogger blog. So, stop your searching here, we have brought here more attractive and responsive social media sharing buttons which are equally good for desktop and mobile phone users. So, let’s start.

Related Posts
Add Author Box Below Every Post in Blogger
Random Posts Widget for Blogger Blog
6 Stylish Recent Post Widgets Design for Blogger
14+ Best Blogger Widgets for Every Blog

social media share button for blogger

Live Demo

How to add responsive social media buttons in blogger with counter

  • Login your blogger account
  • Go template and then click on edit HTML
  • After the opening, your blog’s template all coding, search here the second  <div class='post-footer'> by using Ctrl+f
  • Paste the below code just below it
<div class="don-share" data-bubbles="top" data-limit="4">
 <div class="don-share-total"></div>
 <div class="don-share-facebook"></div>
 <div class="don-share-twitter"></div>
 <div class="don-share-google"></div>
 <div class="don-share-pinterest"></div>
 <div class="don-share-linkedin"></div>
 <div class="don-share-tumblr"></div>
 <div class="don-share-stumbleupon"></div>
 <div class="don-share-reddit"></div>
 <div class="don-share-hackernews"></div>
 <div class="don-share-buffer"></div>
 <div class="don-share-xing"></div>
 <div class="don-share-pocket"></div>
 <div class="don-share-fancy"></div>
 <div class="don-share-yummly"></div>
 <div class="don-share-scoopit"></div>
 <div class="don-share-weibo"></div>
 <div class="don-share-vk"></div>
 <div class="don-share-mailru"></div>
 <div class="don-share-odnoklassniki"></div>
 <div class="don-share-hatena"></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>

click on save template button.
To check the result, visit the blog any single post. I hope this tutorial have helped you to install responsive social media share button in blogger.

Let us know if you need more assistance.

Check Also

facebook page plugin for blogger

How to Add Facebook Page Plugin In Blogger

Facebook Page Plugin for Blogger – The Facebook page plugin was formally known as like …

8 comments

  1. What should I do if I need this to be just below the title of my post rather than at the end of the article?
    Please answer me. I’m waiting 🙂

    • Dear @Manovah If you want to add this widget to just below of Blogger Post Title then follow below steps.

      1-Go to Blogger >> Template >> Edit HTML.
      2- By pressing CTRL+F Search for tag and paste whole above code (Code is in above post after step 4) just above of this tag.

      Note: If you are using read more button on your blog then you can find this tag 2 to 3 times. So paste above code which suite to your blog. Generally second one is right selection.

      Thank you!

  2. Where is the twitter button? 🙁

  3. Thanks for share. i ll try it

  4. this is helpful, thanks! quick question, my share to pinterest button is showing up weird (not showing count and showing wrong graphic), any idea what’s going on there?

  5. It work’s, But Sir if i wanted to put this before my post? How should i do that?

Leave a Reply

Your email address will not be published. Required fields are marked *