How To Add Sharing Buttons Just Below all Post Title In Blog


Having a blog page without the Sharing buttons widget now a days is like it is not completed. The widgets generally are differ because there are old version widgets and there are new version widgets, but with the new version widgets, Sharing buttons includes all popular social network buttons such like Facebook Like, Twitter Google Plus +1, with the full version of Add This and Stubleupon.

How does it works?

With this Sharing Buttons, it helps to post both link and introduction part of your post to either Twitter or Facebook and also you can like the post on it, This is fantastic. Its also beautify your page in terms of the background of the Buttons.

Let me now teach you how you can install this widget to your blog page.
Please follow this steps below it you are a blogger users

1.    Sign In to
2.    Click on Template > Edit HTML
3.    You can Backup your templates
4.    You have to click on the check box at the top right which says "Expand Widget Templates"
5.    Using Ctrl+F on your keyboard search for <data:post.body/>
6.    Copy the codes below and paste it just above the code you search for above,

    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>

    <td><!-- Twitter -->

    <a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='' type='text/javascript'> </script> </b:if> </td>


    <iframe allowTransparency='true' expr:src='&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:0px; width:100px; height:20px;'/> </td>

    <td><div style='margin-right:25px;'><!-- STUMBLE UPON -->

    <script expr:src='&quot;;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

    <td><!-- AddThis Button BEGIN -->

    <div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;BLOG TITLE&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>

    <!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>

Thing you must change:
Look for BLOG TITLE and change it to you Blog title, this will show when you click on the Share button.
To change the color background of the Button Change #FEE6E6

7.    Copy this code below and it above ]]></b:skin> if you might have added a Google+ button on your blog

<script src='' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

8.    Save your template.

Good Luck!!!


Geeta Singh said...
April 5, 2012 at 12:17 AM  

v informative blog!!!!

Skye Concept said...
April 5, 2012 at 6:41 PM  

thank you

Are you confused or just want to tell us you visited? Feel free to comment

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Thinking of spamming here?:
Please do not spam Spam comments will be deleted immediately upon our review. So why waste your time?


Kindly use this button below to get this my article on your computer:

Print Friendly and PDF

You can also read this Related Posts

Best Blogger Tips

Post a Comment

Join me on Facebook Follow me on Twitter Follow me on Digg Follow on BlogCatalog Follow me on MySpace Subscribe to RSS Email me