How do I add Google Friend connect gadget to my blog?

Login GoogleFriendConnect

1. Setup Site
2. Go to your site
3. Go to Members gadgets

4. Gadget Gallery

5. Choose your Gadget and do as per the above procedure

Set up the Members gadget

1 Choose the gadget's size

Adjust the width and height here so that the gadget fits within your page. Members gadgets can be as narrow as 200 pixels, and have as few as 2 rows of faces.

Width:

Rows of faces:

2 3 4 5 6 7 8 9 10 11 12 13 14 15

2 Choose colors

Select a set of colors for your gadget.

Endcap background* # Endcap text # Endcap links # Content background* # Content text # Content secondary text # Content links # Content secondary links # Content headlines # Alternate background* # Border* # * empty value means transparent

Here is a preview of your gadget. Note: Not all colors are used in this gadget.

3 Create the HTML code

We will generate some lines of HTML that creates and renders the Members gadget. To make Friend Connect work, you have to put this code into your site.

Generate code

<!-- Include the Google Friend Connect javascript library. --> <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script> <!-- Define the div tag where the gadget will be inserted. --> <div id="div-8805904496058392156" style="width:276px;border:1px solid #cccccc;"></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['NUMBER_ROWS'] = '4'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderMembersGadget( { id: 'div-8805904496058392156', site: '12162148952870238826' }, skin); </script>

4 Copy the code into your site

Paste the above gadget code into an HTML page on your site. The page you edit should be within http://bloghelpforbegineers.blogspot.com/ or one of its sub-directories.

You're done! To try out your new members gadget, go to your site and press the "Join" button.

Now You can enjoy, Good luck ,
If you are facing any problem then feel free to do comment else refer "How do I add the Following gadget to my blog?"

Good Luck!!!

Thanks,

Amaresh