Insert Twitter-Google+-Stumbleupon and Facebook like button in every Blogger Post

Today we know how to insert Twitter, Google+, StumbleUpon and Facebook like buttons in every Blogger Post at the beginning and end. Social networks have been playing an important role in Blogging for drivingtraffic. Social networking websites has influenced the blogging to a great extend. You publish a new post and share it to your social networks; it gives your followers and fans instant updates about your content. 

It allows you to connect with your online readers and to increase your readership. This social sharing widget will help your online readers to share your articles on their social profiles. Social networks like Facebook, Twitter, Google+, StumbleUpon etc are great source of referraltraffic and every blogger wants to increase their blog traffic, this widget will surely help every webmaster to increase blog traffic.
  
Add Social Sharing buttons under post titles

• Login in to your blogger account and navigate to template page.
• Take back up of your blogger template. It is recommended to take back up before you edit your template to avoid any loss.
• Now click on Edit HTML.
• Search for </head> and place the JavaScript code mentioned below just before this tag.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

• If you are already using Google+ recommend button in your blog, then this code will already exist there. You can skip the above step.
• Now search for <data:post.body/>, it might be occurring more than once in your blog.
• Most of the users get confused with this. It depends upon the template, which code is going to work for you. In my case it was the second last one. You can try the last one and the second last one.
• Now place the following code just before <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div style='box-shadow:0px 0px 1px 2px #000;' id="UT-social-share">

        <table align='center' border='0'>

            <tr>

                <td>

                    <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='makemoneyfreewithus' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>

                    <b:if cond='data:post.isFirstPost'>

                    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script></b:if>

                </td>

                <td>

                    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:20px; width:100px; height:20px;'/>

                </td>

                <td>

                    <div style='margin-right:25px;'>

                        <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>

                    </div>

                </td>

                <td>

                    <div style='margin-right:5px;'><g:plusone expr:href='data:post.url' size='medium'/>

                    </div>

                </td>

            </tr>

        </table>

    </div>

</b:if>

<br/>

• Now replace my twitter username with yours (highlighted with red).
• Click on save template and view any post.

Note: This widget will not appear on the homepage, it will only be displayed on the posts page. If you want to display it on the homepage then see the customization part.

Customization:

• For displaying it on the homepage as well as posts page just remove the code highlighted with yellow color.

• If you want to change the shadow color from black to some other color, replace the color code highlighted with green color.

• If you want to remove the shadow completely then remove the style attribute from the second line. It will look like this:

 <div  id='UT-social-share'>

After the customization save your template and review the changes you made. You should not modify other codes, it may stop working. You have successfully added a social sharing buttons widget in your blogger. If you face any problem, you can comment here. I will be glad to help you. You need to wait for my next tutorial, if you want a similar social network widget that I am currently using in my posts rather than this social sharing widget.

You should also check out our Blogging and SEO optimization section for more cool tips, tricks and tutorials. It will help you improve your blogging experience.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon . Stay tuned for more tech updates.