Friend Connect with Me

I just finished adding the new Google Friend Connect gadgets to the blog.  I was wondering how well it would work on the Blogger platform, but I didn’t have any problems.

The first thing you normally need to do after you have told Google what web page you are adding Friend Connect to, is to add a couple of files that Friend Connect needs to work.  Fortunately Google has already added the files for use on Blogger so you can simply click continue to move past this step.

The next step is to add the gadgets that you want.  I have added three to the site.  The first two display in the sidebar which are visible across the entire site.  This is actually two gadgets, the Members gadget and the wall social gadget.  I have both of the gadgets in the same HTML/Javascript gadget container.  Looks fairly nice on the page.  When you generate the gadget on the Google Friend Connect site you get some options to customize the display of the gadget itself to better integrate it into the look of your site.

I also added the ratings gadget at the bottom of each post.  This was a bit trickier to add, but actually turned out to be easier than I thought thanks to Disqus.  I don’t know a whole lot about the XML format that Google uses for Blogger templates.  When I changed the comment system from the default Blogger comments to Disqus though, the Disqus service actually generated and placed the needed code in my template.  I went to the Edit HTML section of the layout tab, and clicked the Expand Widget Templates button (not sure if that was required).   I looked through the template (back it up first) for the Disqus section.  You want the second instance of the Disqus section, the first is the area under the post on the main page, the second is on the individual post pages.  I pasted the Friend Connect code for the ratings gadget after the Disqus code.  I needed to add a </div> tag at the bottom of the section where the code was in order for the template to generate correctly.  I also added an <h2> title at the top of the Google code to separate out the section.  Too my surprise, the template saved and generatedcorrectly.  I used the page setting on the Friend Connect gadget so that the ratings and associated comments will display for each post.  I tested this and it does indeed keep a different set of ratings for each post.

Thanks to the Bwana.org site for giving me the idea to add the ratings gadget to the bottom of each post.  Hope this helps any Blogger users who might be interested in adding Friend Connect to their site.  Please stop by and join my site through Friend Connect, leave a comment or rating, and even add me as  a Friend Connect friend.