Adding Yahoo! Buzz(TM) buttons to blogger

Seems Yahoo! have opened up their Buzz(TM) service to anyone. What is Buzz? It looks like a way of publishing content to the Yahoo news and home page, where someone can submit a story to Buzz, provide a description, then subsequent users can vote the story up or down in some way.

Anyway, because I like all this Web 2.0 technology, I thought I'd add the Buzz buttons to my blog. You can grab the code for buttons On the Buzz site along with how to use it. I've hacked my blogger layout template to add a button to each post - the code provides the post title as the story title, hard-codes the category to "entertainment" and links the story content to the post's permalink page. Here is how:

• From your blog control panel, click the Layout link then click Edit HTML. Check Expand widget templates.
  
• Before you change anything I really really advise backing up the template. Click Download Full Template and keep the file somewhere secret and safe.
  
• To add the button at the bottom of each post, before the summary section (the bit with the comments etc):
  
  
  
  • In the Edit Template window with all the code, search for <data:post.body/>, which should be surrounded by code like:
    
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>

    
  • Just below <data:post.body/> paste the highlighted code so it ends up looking like:
    
<div class='post-body entry-content'>
<data:post.body/>
<br/>
<!-- yahoo buzz button -->
<script type="text/javascript">
yahooBuzzArticleHeadline = "<data:post.title/>";
yahooBuzzArticleCategory = "entertainment";
yahooBuzzArticleType = "text";
</script>
<script type="text/javascript"
src="http://d.yimg.com/ds/badge2.js"
badgetype="text-votes">
<data:post.url/>
</script>
<div style='clear: both;'/>
</div>

    
  • Preview the results and save if you are happy.
    
  
  
• To add the button at the bottom of each post, inside the summary section:
  
  
  
  • In the Edit Template window with all the code, search for <div class='post-footer-line post-footer-line-3'/>, which should be surrounded by code like:
    
<div class='post-footer-line post-footer-line-3'/>
</div>

    
  • Just below <div class='post-footer-line post-footer-line-3'/> paste the highlighted code so it ends up looking like:
    
<div class='post-footer-line post-footer-line-3'/>
<!-- yahoo buzz button -->
<span class='post-author vcard'>
<script type="text/javascript">
yahooBuzzArticleHeadline = "<data:post.title/>";
yahooBuzzArticleCategory = "entertainment";
yahooBuzzArticleType = "text";
</script>
<script type="text/javascript"
src="http://d.yimg.com/ds/badge2.js"
badgetype="text-votes"><data:post.url/>
</script>
</span>
</div>

    
  • Preview the results and save if you are happy.
    
  
  

The results should look something like this: