Official Sharing Buttons on Blogger

Official Sharing Buttons on Blogger

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).

You are still reading. So i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.

Then don’t wait. Just follow these simple steps

1. Login to Your Blogger Dashboard
2. Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option
3. You can Drag and Drop the Share buttons and place it where you want.
4. Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
5. If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates” Option and locate

   <p class='post-footer-line post-footer-line-3'>

   Or if that is not there then find

   <div class='post-footer-line post-footer-line-3'>

   Or if that is not there then find

   <data:post.body/>

   and place the following code just below any of these lines[whichever is present in your template].

   <div class='post-share-buttons'>
     <b:include data='post' name='shareButtons'/>
   </div>

   and Save your template.

Google + 1 Button Doesn’t show up

1. If it doesn’t show up, then replace the share button code first.To do that, look for

<b:includable id='shareButtons' var='post'>

in your template. Now delete everything including this line, till the very next occurrence of

</b:includable>

(including this line)

Now we can add a new b:includable block there. So paste the following code there instead of the old b:includable block

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
  </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
  </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
  </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
  </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
  </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
  </a></b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

2.Save the template, and see if the Plus One button is showing up.If it is then you are done. Otherwise proceed to step 3.

3. Locate

</head>

and just above that paste the following code

<script src='https://apis.google.com/js/plusone.js'/>

and Save the template.Now you should see the +1 buttons on your blog.

Optional Tweaks

1. Show the Sharing Buttons on Post pages only - Find the Following Code in your template

   <div class='post-share-buttons'>
     <b:include data='post' name='shareButtons'/>
   </div>

   and wrap it within conditional tags as

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='post-share-buttons'>
     <b:include data='post' name='shareButtons'/>
   </div>
   </b:if>

2. Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above ]]></b:skin> in your template

   .sb-blog{display:none}

   sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or buzz buttons, then it might look a little bad as these have rounded edges,
3. How to add the text “Share this:” before the Share Buttons? – This was one of the questions asked in the comments.So here is how to do it.Go to Design > Edit HTML and “Expand Widget Templates”.Look for

   <b:includable id='shareButtons' var='post'>

   Just below that add

   <table border='0'><tr><td><b>Share this : </b></td><td>

   Now Look for the first occurrence of

   </b:includable>

   that comes after that. Just above that add

   </td></tr></table>

Got into Trouble with implementing the sharing buttons? Ok leave a comment here and i will try to help you out. :)

Read More

How to Add Tweet Box to Blogger

How to Add Tweet Box to Blogger

It has been a long time since @Twitter released the @AnyWhere Developer Tool. AnyWhere allows you to seamlessly integrate Twitter into your site using a few lines of JavaScript. You can read more about it at  @AnyWhere Developer Page. Tweet Box is one such @AnyWhere Application, which allows you to add a 140 char Tweet Box onto your blog.
Here is a screen shot of how the Tweet box appear on my Previous Post.

Hope that now you got a good idea of how this works, If not scroll down to the bottom of the post and see it in live action :)

How to add the Tweet Box on a Blogger Blog?

1. Go to the @AnyWhere Developers Page and create an Application there with your blog details.

Make Sure that you have checked the Read & Write Option when you Register your Application
2.When you complete the signup process, you will get some JavaScript codes, with a unique
 API Key
Copy out the JavaScript from there(the code in the red box) as shown in this Screenshot.

3.Now Login to your Blogger Dashboard and navigate to the Edit HTML Tab under Design
and “Expand your Widget Templates”
4.Look for

</head>

and paste the copied Twitter JavaScript just above that line and save the template. 5.Now look for

<data:post.body/>

and immediately below that paste the following JavaScript Code and save your template.
 (Editable parts are shown in red)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link=&quot;<data:post.url/>&quot;;
twttr.anywhere(function (T) {
T(&quot;#bp_tweetBox&quot;).tweetBox({
width: 560,
label: &quot;Share the L&#10084;ve  &amp; Retweet&quot;,
defaultContent: &quot;RT @bloggerplugins <data:post.title/>&quot;+&quot;

 "+bp_tweet_link
});
});
</script>
</b:if>

Now you should see the Tweet Box on all of your post pages
Currently, this doesn’t do any URL shortening . You can expect that it my next post. I will  also try to post about the other @AnyWhere features soon :)
Share your opinions and if you have any questions about the tweet button, feel free to ask :)

Read More

Alternate Comment Forms For Blogger

Alternate Comment Forms For Blogger

.JS-Kit (Echo)
  This is also another JavaScript based commenting system.Echo offers both free and paid packages!The free package comes with threaded comments and an interface where the commenter can add videos,images,similes, etc.The commenter can also format his comments using a simple WYSIWYG comment editor.


When you try to go for any of these commenting systems,make sure that you backup your template and keep a copy,so that you can revert back if it didn’t work out well.
These are the three most popular commenting systems.They come with threaded commenting with Gravatar based profile images,which can make you commenting system look more professional.I personally prefer Intense Debate over the others.
So if you want to remove the default blogger commenting system and get a better commenting interface,then you can opt for any of these commenting systems.
Note: These comment forms come with an option to show the comment form on new posts only(means posts with 0 blogger comments)!That means your old comments will stay intact and will use the old blogger comment form.(This is optional.. you can also revert all posts to use the new commenting system.But in that case, you cant display the existing comments easily..)

Read More