Google Freak: How To Add Google Friend Connect Social Gadgets to a Blogger Blogspot Blog

Thursday, January 8, 2009

Earlier, I thought that Blogger or Blogspot blogs could not have Google Friend Connect Social Gadgets added in because of the uploading restriction. Little had I known that the html files contain the required code that simply needs to be pasted into my blogger / blogspot template for verification and Google Friend Connect support.

Here is the guide on how to Add Google Friend Connect Social Gadgets to a Blogger Blogspot Blog!

For website owners all you need to do is upload the relay and canvas files to your web directory and "Voila!".

To get started you need these two accounts.

Blogspot/Blogger Blog Setup:

Login to Blogger
Click on Settings
Click on Layout
Click on Edit HTML
Find </body> (end of template)
Paste this: <script type="text/javascript" src="http://www.google.com/friendconnect/script/rpc_relay.js"></script> before the </body> tag.

Friend Connect Setup

Click on Setup a New Site link.
Step 1: Enter your sites Title and URL
Step 2: Skip this step as we have already added the code into our template. (above)
Step 3: Click the Test to finalize setup button!
Step 4: Click on Get code to add the Members gadget to your site.
Follow the page to setup your gadget canvas styles and copy it to your blog
Click on finalize and you're ready to embed some social gadgets!

Thats it! Now you can go add these cool social gadgets and membership gadgets to allow users with a Google account to signup and login to your blogspot blog.

There is more!

Just like Disqus, etc, you can add Google Friend Connect comments for blogger posts!
A Ratings and Reviews Social gadget is also available for a site and for individual posts.
A Wall gadget can be added to your site for discussions and wall posts. (like Facebook without the video, audio and pics... for now!)

Many thanks to Frederic Fleche, who runs http://www.bioinformatics.fr/ and who helped me clean up this redundant code that you can remove at will.

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

Each Gadget canvas template comes with this line of code even though the first canvas code you added already has it, in this case we added the code itself in the steps (see above). Keep the original one and remove the duplicates from your extra Google Friend Connect gadgets' canvasses.

Be sure to checkout the ratings and reviews gadgets as well as a general wall gadget, similar to a Facebook wall, for your site!

If you enjoyed this post or found it interesting please join my site using Google Friend Connect for more. You can also rate, review and comment on individual posts. Also, be sure to share this post with all your friends who have a Google / Gmail account and who might be interested in all things Google.

CrunchBase Information

Google Friend Connect

Information provided by CrunchBase