Description: Add Responsive Social Media Share Buttons with Counter like Facebook, Google+, Twitter, LinkedIn and Pinterest to Blogger Posts Below/Above to Post Content.
Do you have a responsive Blogger template? If yes, you should always use responsive widget to your Blogger template. In the recent article, I wrote how to add responsive Facebook fan page like box to your Blogger. In this guide, I am sharing a cool and best responsive social media share buttons with counter that you can use into your Blogger post. You can add this awesome widget to your Blogger below to the post content as well as below to your Blogger post title. You can view a live preview of this awesome responsive social share buttons below to this content. I have already using it in this blog. However, I have enabled only three social media share buttons Google+, Facebook & Twitter for this blog in this widget. You will get additional two more powerful share buttons for LinkedIn & Pinterest.
I am using the most wanted share buttons Facebook like, Google+ and Twitter in this widget. I have also included more social media buttons into this widget such as LinkedIn and Pinterest. However you can use any third party widget to your Blogger template, but in this case, your blog might load slower because of many JavaScript requests. I assume you might well know that the speed may affect your SEO. Mostly all the websites including Blogger blogs use at-least Facebook, Google+ and Twitter platform to share their post. These blogs already use JavaScript codes associated with social media sites. If you are already using these social media site's JavaScript in your Blogger blog, then you don't need to add any additional JavaScript code to use this responsive social media share buttons. It is definitely not affect your site speed performance. I am using the official codes into this social media share buttons. Therefore, here is a simple and easy guide to add responsive social media share buttons to Blogger.
Now, copy the following HTML code to display your responsive social media share buttons into your Blogger posts.
The above code is starting from the Facebook JavaScript (Green text). If your template already has Facebook JavaScript then you don't need to paste it again. Just remove it while pasting the above code.
If you don't have Facebook JavaScript in your Blogger template then you can use the above code, but I recommend you to use your own Facebook page application for your Facebook share button including in this responsive social media share buttons. You will get more benefit to having one. Here is a complete guide to create Facebook app & install Facebook SDK to Blogger. If you don't wish to go with your own Facebook application, you may use the above Facebook JavaScript code.
You can change data-via='shadabiitr' with your Twitter username handle in the above code so that when a user clicks on tweet button it will prompt up with your Twitter handle. If you also wish to display your Blogger post title, description and featured image along with your posts, here is a quick guide to add Twitter summary cards for blogger.
One more thing, when a user shares your post into Facebook, it will automatically detect your post title, description and post featured image. If you wish to display proper things to proper place you can use Facebook open graph meta tags for your Blogger.
You can paste above code to anywhere you want to display your share buttons. If you want to show your sharing buttons below to post content. Paste above code below to <data:post.body/> in your Blogger template. You may have <data:post.body/> code twice or thrice in your Blogger dashboard. You may check the above code for each <data:post.body/> code, and find the correct one {Mostly the second one is correct}. Once you find the desired code just paste and save your template. Make sure the above code would only display on the post pages in your Blogger. If you wish to display your sharing buttons everywhere, delete first and last line (Blue text) in the above code.
If you want to show your share buttons below to post title, in this case, just paste your code above to <data:post.body/>.
How to Add Responsive Social Media Share Buttons to Blogger
Copy the following CSS code, and paste it above to ]]></b:skin> code in your Blogger source code.
.bst table{width: 100%;margin:20px 0}
.bst table td{background: #3d5a99;color: #D8DFEA;padding: 1%; line-height: 50%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
@media screen and (max-width: 980px) {
.bst table{margin-bottom: 10px}
.bst table td{float: left;margin-bottom: 10px;width:49%}
.bst table td+td{float:right}
.bst table td+td+td{float:left}
.bst table td+td+td+td{float:right;padding-bottom:3.5px}
.bst table td+td+td+td+td{text-align:center;width:100%}
}
@media screen and (max-width: 640px) {
.bst table td{float:none;width:100%;display:block}
.bst table td+td+td+td+td{text-align:left}
}Now, copy the following HTML code to display your responsive social media share buttons into your Blogger posts.
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Code by BloggerTipsSEOTricks.com -->
<div class='bst'>
<table cellspacing='0'><tbody>
<tr>
<td style='background: #3B5998;'>
<div class='fb-share-button' data-layout='button_count'/></td>
<td style='background: #DD4B39;'>
<div class='g-plusone' data-size='medium'>
</div></td>
<td style='background: #2BA9E1;'>
<a class='twitter-share-button' data-via='shadabiitr' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td>
<td style='background:#0077B5'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script>
<script data-counter='right' type='IN/Share'/></td>
<td style='background:#BA1E2D;padding-right:10px'>
<script type='text/javascript'>
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
<div id='pin-wrapper'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:blog.postImageUrl + "&description=" + data:post.title' rel='nofollow'>Pin It</a>
</div></td></tr></tbody></table>
</div>
</b:if> The above code is starting from the Facebook JavaScript (Green text). If your template already has Facebook JavaScript then you don't need to paste it again. Just remove it while pasting the above code.
If you don't have Facebook JavaScript in your Blogger template then you can use the above code, but I recommend you to use your own Facebook page application for your Facebook share button including in this responsive social media share buttons. You will get more benefit to having one. Here is a complete guide to create Facebook app & install Facebook SDK to Blogger. If you don't wish to go with your own Facebook application, you may use the above Facebook JavaScript code.
You can change data-via='shadabiitr' with your Twitter username handle in the above code so that when a user clicks on tweet button it will prompt up with your Twitter handle. If you also wish to display your Blogger post title, description and featured image along with your posts, here is a quick guide to add Twitter summary cards for blogger.
One more thing, when a user shares your post into Facebook, it will automatically detect your post title, description and post featured image. If you wish to display proper things to proper place you can use Facebook open graph meta tags for your Blogger.
You can paste above code to anywhere you want to display your share buttons. If you want to show your sharing buttons below to post content. Paste above code below to <data:post.body/> in your Blogger template. You may have <data:post.body/> code twice or thrice in your Blogger dashboard. You may check the above code for each <data:post.body/> code, and find the correct one {Mostly the second one is correct}. Once you find the desired code just paste and save your template. Make sure the above code would only display on the post pages in your Blogger. If you wish to display your sharing buttons everywhere, delete first and last line (Blue text) in the above code.
If you want to show your share buttons below to post title, in this case, just paste your code above to <data:post.body/>.
