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!

Test Post

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget sapien a velit commodo varius. Ut faucibus molestie lacus. Nulla semper sem ut ante. Morbi in turpis eget lectus venenatis tempus. Praesent at dui eget diam sollicitudin hendrerit. Aliquam erat volutpat. Vivamus luctus orci et nisl blandit fermentum. Pellentesque malesuada sodales magna. Nulla porttitor pretium mi. Nulla nec nibh non orci rutrum sollicitudin. Nullam blandit nisl ullamcorper nisi. Morbi tortor. Aliquam quis metus. Duis mollis massa nec augue. Aenean sodales.

Cras at sapien vel felis pellentesque aliquet. Aenean commodo, nisl id sagittis mattis, felis libero pharetra urna, quis mollis lacus magna ut ligula. Nulla facilisi. Pellentesque nisi diam, auctor at, scelerisque vel, bibendum a, tellus. Quisque rutrum. Sed odio. Fusce rhoncus vehicula massa. Vestibulum purus magna, vehicula a, viverra vitae, rhoncus in, ante. Quisque facilisis risus. Morbi aliquet mi quis odio. Donec sed metus. Duis facilisis risus. Nunc sagittis porttitor elit.

Integer fringilla, libero id ultrices suscipit, quam velit facilisis elit, vitae auctor sapien nulla sed urna. Aliquam faucibus malesuada lectus. Pellentesque vehicula ipsum eu nulla dignissim vehicula. Pellentesque quam. Etiam sed eros nec est faucibus porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Aenean sed dolor. Nullam lorem. Cras vulputate est at justo. Vivamus cursus tincidunt ante. Nulla tortor. Quisque dui diam, cursus id, posuere ac, aliquet et, ipsum. Maecenas sollicitudin nunc ac neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper. Aenean lectus diam, congue et, convallis in, euismod ac, ante. Maecenas vel nulla. Sed aliquet, mauris a vehicula aliquam, nibh felis suscipit leo, a ornare nisl ligula posuere sem.

Nulla sit amet risus. Sed eget ligula. Vivamus blandit metus. Vestibulum semper lorem ac nisi. Curabitur libero urna, blandit eu, tincidunt quis, malesuada id, sem. Vestibulum fermentum, elit vitae tincidunt bibendum, elit tellus iaculis lectus, quis consequat mauris magna at ligula. Morbi sit amet mauris. Aliquam erat volutpat. Nam bibendum, neque non tristique posuere, tortor elit tempus lorem, non consequat lectus eros a libero. Curabitur sed neque. Ut ante purus, dictum sodales, posuere sed, convallis nec, ligula. Phasellus eget magna nec justo sollicitudin porta. Vivamus convallis tortor. Proin sapien ipsum, volutpat malesuada, aliquet rhoncus, tincidunt iaculis, purus. Cras tortor. Pellentesque eget nulla. Sed euismod feugiat odio. Vivamus vel tortor.

Sed eget quam a lectus dignissim porttitor. Fusce nec nulla. Phasellus ac nisi. Aenean in nulla nec eros lobortis congue. Integer id nulla at urna molestie feugiat. Nullam sagittis, nisl sit amet placerat fringilla, eros mi gravida nulla, non dapibus purus arcu nec enim. Duis eget mauris. Nam accumsan gravida ipsum. Sed sit amet turpis. Donec in ipsum quis ligula scelerisque egestas. Vestibulum venenatis, nulla et molestie tempus, metus orci mollis ligula, at mattis orci mauris eget libero. Pellentesque in dolor consectetur risus malesuada accumsan. Cras dui justo, venenatis quis, tristique et, pretium ut, sem. Donec pulvinar.