Social subscription buttons under post titles in blogger

Hello Readers, In this post we will learn how to put social subscription buttons under the post titles. You can also add this widget at the end of your post as per your requirements. This widget is similar to the social sharing buttons widget posted on this blog a few days ago, the difference is that it contains the subscription buttons rather than the sharing buttons. Social networks are playing vital role in blogging so it is mandatory to be little more concious about the social stats. This widget will help you improve your social stats by giving your visitors an easy way to subscribe to you. Later in this post you will find a live demo and a tutorial for adding this widget in your blog.

For adding this widget you need to edit your template code. You need to follow the below mentioned steps to add this widget in your blog.

Demo

Add Social Subscription buttons in Blogger:

Login in to your blogger account and navigate to Dashboard.
Click on Template and take backup of your blogger template to avoid any loss.
Now Click on EDIT HTML to start editing.
Put the following JavaScript code just under the <head> tag in your template.

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

Note: Some templates already include this JavaScript code, so there is no need to add it again.

Now Search for the <body> or <body tag in your template by pressing CTRL+F.
Just below this code, insert the following code:

<div id="fb-root"></div>
<script type="text/javascript">

    (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/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    
(function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();

    !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>

Search for <data:post.body/> in your template, it might be more than once in your template. If it occurs 3 times choose the second one.
If you want to add this widget just underneath the post titles, add the following code before the above mentioned code and for placing this widget after the post, add the following code just underneath the above mentioned code.

<b:if cond='data:blog.pageType == "item"'><div id='UT-social' style='box-shadow:0px 0px 1px 2px #000;'>
    <table border='0' width='100%'>
    <tr>
        <td width='25%'>
            <div class='fb-like' data-font='lucida grande' data-href='https://www.facebook.com/unziptech' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90'/>
        </td>
        <td width='25%'>
            <a class='twitter-follow-button' data-show-count='true' data-show-screen-name='false' href='https://twitter.com/unziptech' rel='nofollow'>Follow @unziptech</a>
        </td>
        <td align='center' width='25%'>
            <g:plusone/>
        </td>
        <td width='25%'>
            <su:badge layout='1'/>
        </td>
    </tr>
    </table>
</div>
</b:if>

Replace the Social profiles username highlighted in red with your usernames.
Now Save the template code and click on View template.

Note: This widget will be visible at the full post page. If you want it to appear on homepage as well, you need to remove the code in yellow.

You have just added a social subscription widget in your blogger blog. If you face any problem adding this widget in your blog, feel free to comment here. I will be glad to help you.

You can also visit our blogger tips and tricks section for more blogger widgets. It will help you grow your social networks.

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 stumbleupon or giving us a link back via the links below. Stay tuned for more 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/07/social-buttons-under-post-titles.html

HTML link code:

<a href="http://unziptech.blogspot.com/2013/07/social-buttons-under-post-titles.html">Social subscription buttons under post titles in blogger</a>

BB link code:

[url=http://unziptech.blogspot.com/2013/07/social-buttons-under-post-titles.html]Social subscription buttons under post titles 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+