How to Add Google+ Button & Social Networking Buttons Below Post Title

This is the same widget that I am using on this blog. Check the social network buttons appearing below this post title and see how they are arranged.

I have arranged them in order of load time so that they may appear as quickly as possible when the page is viewed. I have added twitter, Facebook like, stumbleupon and Google+ button i.e +1 button. Other sharing options are included in the AddThis Share button.

Adding Social Networking Buttons To Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for <data:post.body/>
4. and just above it paste the code given below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'>
<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en'  data-via='iluvroy' 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>
<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' type='text/javascript'/>
<script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script> <!-- AddThis Button END --></td>
</tr> </table>
</b:if><br/>

Replace iluvroy your twitter username.

5.  Note: If you have previously added the +1 button then you may skip this step. 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: &#39;en-US&#39;} </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. If you want to show it on homepage too then delete the highlighted yellow lines.

Have fun! :>

Feel free to ask any questions you may have.

Read the rest of this entry »

Posted in Facebook , Google+ , Post Title , Social Media Buttons

How to Add Facebook Like Button Below Post Titles

If you wish to add this new like button code just below the post titles of your blogger blogs then follow these easy steps:

Adding Facebook Like Button To Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Click the "Expand Widgets Templates" Box
4. Search for this,

<data:post.body/>

5.    Just above it paste the code below,

<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; width:100px; height:20px;'/>

6.   Save your template and you are done!

Visit your blog to see it working just fine just below post titles. Feel free to ask any questions you may have.

Read the rest of this entry »

Posted in Blogger , Facebook , floating buttons , Social Media Buttons

How to add floating social media buttons

Here’s a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog. I made it into a widget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.

I have included Facebook Share, Retweet, Stumble, Google Buzz, Digg This and Google +1 (plus one) buttons in the bar. Each of them comes with a live counter. The corners of Facebook Share button and counter are rounded to blend with the rest of the buttons (doesn’t work in Internet Explorer, of course). You can add more social bookmarking or sharing buttons later if you wish.

I. Adding the buttons


1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box.

<!-- floating page sharers Start bloggersentral.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from BloggerSentral.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://bloggerehow.blogspot.com/2011/06/how-to-add-floating-social-media.html">Get this</a></div>
</div>
<!-- floating page sharers End -->

6. Save the gadget.
7. Drag the gadget and reposition it under Blog Posts gadget.
8. Click Save button on upper right corner.

II. Customizing


Vertical alignment
Change the value of bottom in code line 2. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

Horizontal alignment
Change the value of margin-left in code line 2. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.

To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.

Replacing and removing buttons
You can replace existing buttons with your own. Each button is represented by this code:

<div class='sbutton'>
BUTTON CODE
</div>

To replace the button, simply replace the button code with the new code.
To remove the button, delete the whole div.

Enjoy!

Read the rest of this entry »

Posted in Blogger , floating buttons , Social Media Buttons , Widgets