top_menu

Thursday, 6 September 2012

How to add Asynchronous Social Share Buttons at Blogger

.

Adding social share buttons at Blogger Blog is a +1 advantage to your blog promotion or SEO. It allows users to easily share your blog post across those social media platforms. This tutorial will help you adding those at each of your blog post easily.

adding social share buttons at blogger

Creating those buttons from different social media sites and aligning those perfectly side by side is a bit tricky. specially with that facebook share button. Rather than attempting to explain how to align your existing buttons, I think it’s easier to just give you a new set of codes for the buttons with the alignment built in.

Simply and add the new code using the following steps:

1. Back up your current blogger template.
2. Go to Blogger Dashboard > Template > Edit HTML > Proceed .
3. Check that 
4. Press Ctrl+F and search for <div class='post-header-line-1'/>
5. Just bellow it, paste the following lines of code

<!-- Social Share Buttons Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='padding:10px;float:left;'>
<g:plus action='share' annotation='bubble'/>
</span>
<span style='padding:10px 0;float:left;'>
<a class='twitter-share-button' data-via='2lessons' href='https://twitter.com/share'>Tweet</a>
</span>
<span style='padding:10px;float:left;'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script data-counter='right' type='IN/Share'/>
</span>
<span style='padding:10px;height:28px;float:left;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
</span>
<span style='padding:10px;height:28px;clear:both;'>.</span>
</b:if>
<!-- Social Share Buttons End-->

6. Again search for the first instance of post-footer-line-1 and paste the following lines of code

<!-- Social Share Buttons Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<script src='https://apis.google.com/js/plusone.js'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</b:if>
<!-- Social Share Buttons End-->

Preview before saving.
Enjoy!