How to get Google Friends Wall Gadget to work on WordPress

The code generated by the Google gadget customiser at http://www.google.com/friendconnect will not simply work on a WordPress Page or Post because of the Javascript that is thrown in.

Once you're done customising your gadget you will end up with code like this:

<!-- Include the Google Friend Connect javascript library. -->
<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script> <!-- Define the div tag where the gadget will be inserted. -->
<!-- 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['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
{ id: 'div-YYYYYYYY',
site: 'XXXXXXXXXX',
'view-params':{"scope":"SITE","features":"video,comment"}
},
skin);
// --></script>

The guilty code is highlighted above. This needs to be replaced the following code on your page/post:

<script type="text/javascript" src="/scripts/wall.js"></script>
<script type="text/javascript">
<!--
doWall();
//--></script>

and the code you cut out needs to be pasted into a separate file "/scripts/wall.js with some minor adjustments as highlighted below:

function doWall(){

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['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';

skin['HEADER_TEXT'] = 'Comments';

skin['POSTS_PER_PAGE'] = '5';

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderWallGadget(

{ id: 'div-YYYYYYYY',

site: 'XXXXXXXXXX',

'view-params':{"scope":"SITE","features":"video,comment"}

},

skin);

}

Figured this out using this guide. Results can be viewed on my comment wall.