New Share Buttons for Blogger

As with most news these days, this one arrived courtesy of Google Reader’s shared items feature: Blogger introduced a set of five share buttons, including Twitter, Facebook and Buzz, that can be easily enabled for any blog. The article I read does a good job of explaining how to add them, even if you have a customized template, and also shows a couple of extra tweaks, like hiding some of the buttons. The code behind this new feature was added to the template some time ago, maybe since Blogger introduced the new template designer. I assumed it was there to power the ‘Share’ feature on the Navbar.

Naturally, if you want the share buttons elsewhere on the blog, the code snippet can be added in another section of the template to accommodate that. For example, I wanted to have them on the same line as the labels, at the end of the post and on the right side. In this case, you should search for the line <span class='post-labels'> while editing the HTML template and place the sharing code after the closing </span>, something like the example below. The original template code is gray, the new code is bold:

<div class='post-footer-line post-footer-line-1'><span class='post-labels'>  
<b:if cond='data:post.labels'>  
  <data:postLabelsLabel/>  
   <b:loop values='data:post.labels' var='label'>  
    <a expr:href='data:label.url + &quot;?max-results=7&quot;'rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>   
  </b:loop>   
</b:if>  
</span>       
<span style='float: right'>        
<div class='post-share-buttons'>  
  <b:include data='post' name='shareButtons'/>  
</div> </span>       
</div>

Although I use Chrome almost exclusively now, I usually test changes to the template in other browsers as well. This time I noticed that Internet Explorer 8 didn’t displayed the buttons like all other browsers, inline with the labels, instead it placed them lower, on a new line. Unfortunately, the same thing happens in the platform preview of version 9, despite the claimed improvement in standard support. It didn’t take long to find a solution online: apparently you should better explain what you want to see, by explicitly floating the first half of the content left and clearing the floats at the end. Ironically, it appears that Internet Explorer 7 rendered this particular case correctly until version 8 came along and introduced another bug. You can find the final code below; this renders consistently in all my browsers now.

<div class='post-footer-line post-footer-line-1'><span style='float:left;'><span class='post-labels'>  
<b:if cond='data:post.labels'>  
  <data:postLabelsLabel/>  
   <b:loop values='data:post.labels' var='label'>  
    <a expr:href='data:label.url + &quot;?max-results=7&quot;'rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>   
  </b:loop>   
</b:if>  
</span> </span>       
<span style='float: right'>       
<div class='post-share-buttons'>  
  <b:include data='post' name='shareButtons'/>  
</div> </span>       
<br clear='both'/>       
</div>