Tuesday, March 31, 2009

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!

3 comments:

  1. Why the hell the colors keep chaging every time? i.e. i customized the color in the code, but they are reverted to the default ones after a while

    ReplyDelete
  2. Wow!!! This is awesome!

    Thanks sooooooo much!

    ReplyDelete
  3. This is a wonderful tutorial except when I view the source of my blog, there aren't any strings by that name, plus there are so many different site numbers, I've tried them all and none seem to work :(

    ReplyDelete