The widget today is an upgraded version of the sharing widget we earlier shared. It includes popular social networking buttons like Twitter, Facebook Like, Google Plus +1, Add this and Stumbleupon. I am using it in my blog as you can see. We will also customize here the Add This button
and will add blog title inside it. You can easily customize it to
change the background colors and widget overall look. It can be added to
both Blogger and Wordpress. It has great importance in boosting blog
traffic through the shares made through these buttons which will
circulate in social media and help you enjoy a long lasting referenced
traffic. Lets add these valuable buttons to your blog.Add Social Sharing Buttons Below Post Titles
I am sharing here the method for blogspot blogs. If you are using Wordpress then you may please add the code shared below inside your template by going to template section.Follow the steps below if you use Blogger.
- Go To Blogger > Design > Edit HTML
- Backup your template
- Click on the box at top right that says "Expand Widget Templates"
- Then search for <data:post.body/>
- Just above it paste the following code,
<b:if cond='data:blog.pageType == "item"'> <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='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><!--Facebook-->
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' 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='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + 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='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: "MY BLOGGER TRICKS", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script>
<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>
Make these changes:
- To change the background color of the container edit #FEE6E6
- Change MY BLOGGER TRICKS with your blog title so that it appears on the add this button upon mouse hover. As shown below:
5. Note: skip this step if you have already added a Google+ button somewhere in your blog. Search for ]]></b:skin> and just below it paste the following code:
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
6. Save your template and say bingo!
Visit your blogs and see it appearing only on post pages and not the homepage. If you wish to show it even on your homepage then simply delete the two purple lines from the code above.