Add Social Sharing buttons under post title in blogger

Follow @unziptech

Hello Friends, In this post we will learn how to add social sharing buttons under the post titles in every blogger posts. This social sharing widget will contain four sharing buttons including Facebook, Twitter, Google+ Recommend and Stumbleupon. Social Media is playing a great role in the blogging these days. 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 referral traffic and every blogger wants to increase their blog traffic, this widget will surely help every webmaster to increase blog traffic.

Many of our online readers wanted to add this kind of social buttons widget in their blog posts. So I decided to write a tutorial for the same. You can easily add this widget to every post by editing the blogger template. Now we shall see the steps that you need to follow to add this social sharing buttons widget in your blogger posts.

Recommended Articles:

• All in one Social Networks Widget for Blogger.
• Add Link to me Widget for Blogger.
• Feedburner Email Subscription Widget for blogger.

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='unziptech' 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 or giving us a link back via the links below. Stay tuned for more tech updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: http://unziptech.blogspot.com/2013/05/social-sharing-buttons-under-post-titles.html HTML link code: <a href="http://unziptech.blogspot.com/2013/05/social-sharing-buttons-under-post-titles.html">Add Social Sharing buttons under post title in blogger</a> BB link code: [url=http://unziptech.blogspot.com/2013/05/social-sharing-buttons-under-post-titles.html]Add Social Sharing buttons under post title in blogger[/url]

Author: Mohammad Zafar Ahmad

Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+