Adding a Social Bar to Your Blogger Hosted Blog

Sorry this is a bit involved...

1. Create a Blog
   
2. View Blog
   
3. View source (Control-U in Firefox)
   
4. Find the "snippet" by searching for the string renderMembersGadget
   
5. Copy the number after site from this snippet:
   
{ id: "div-1238550266617",
site: "THIS_IS_YOUR_SITE_NUMBER" }

   
6. Customize
   
7. Add a Gadget
   
8. HTML/Javascript
   
9. Title: Social Bar
   
10. Content: (copy and paste exactly)
    
<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>
<div id="div-for-the-social-bar"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['POSITION'] = 'bottom';
skin['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
google.friendconnect.container.setParentUrl('/');
google.friendconnect.container.renderSocialBar(
{ id: 'div-for-the-social-bar',
site: 'THIS_IS_YOUR_SITE_NUMBER',
'view-params':{"scope":"SITE",
"features":"video,comment",
"showWall":"true"}
},
skin);
</script>

    
11. Find the string THIS_IS_YOUR_SITE_NUMBER and replace it with the number from step 5.
    
12. View Blog
    
13. Be Happy (as long as you don't use IE6...)
    

Thanks to everyone for working so hard on the Friend Connect and Blogger integration!