How To Add Social Networking Buttons in Blogger blog
Social Bookmark is the one of the SEO techniques to raise up your Blog’s Traffic. In order to that, all you need is to add the social bookmark button into your blog to easily share your post to social networking sites like Facebook, Digg and Twitter.
Herewith, I have arranged them in order of load time so that they may appear as quickly as possible when the page is viewed. These codes are created to quickly load the button and delay the load time of your web page.
Page load time is also one of the parameter to improve your PageRank, because Google will penalize the web pages which load slowly.
If you want to make these bellow button appear at your every post, please follow these codes.
Steps to Create Social Network Buttons Like Plus One:
-
Go To Blogger > Design > Edit HTML
-
Backup your template
-
Search for <data:post.body/>
-
and just above it paste the code given below,
<b:if cond=’data:blog.pageType == "item"’>
<table border=’0′>
<tr> <td>
<a class=’twitter-share-button’ data-count=’horizontal’ data-lang=’en’ data-via=’YOUR-USER-NAME’ 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=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=buttoncount&showfaces=false&width=100& action=like&font=arial&colorscheme=light"’ 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=’"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url’/></div>
</td>
<td><div style=’margin-right:5px;’> <g:plusone expr:href=’data:post.url’ size=’medium’/> </div> </td> <td> <!– AddThis Button BEGIN –>
<div class=’addthistoolbox addthisdefaultstyle ‘>
<a class=’addthiscounter addthispillstyle’/> </div>
<script src=’http://s7.addthis.com/js/250/addthis_widget.js’ type=’text/javascript’/><script type=’text/javascript’> var addthisconfig = { uicobrand: "YOUR-USER-NAME",uiheadercolor: "#ffffff", uiheaderbackground: "#0080FF" } </script> <!– AddThis Button END –></td></tr>
</table>
</b:if>5. Now search for </head> and just above 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 visit your blog to see it appearing on post pages. The widget will not be visible on homepage but on post pages only.
This is really nice post works well and easy to configure…thanks for all info..
Regards
ProblogBooster.com
You’re welcome bro…