12/13/2008

How to use Custom Gadget for Friend Connect

I think there are lots of people meet this problem, that the custom gadget for friend connect can cause error in IE 6 and IE 7, in spite the Microsoft provide 2 solutions, but these all need user to do something, ..
1. Adjust Security Level
2. Upgrade to IE8

I take a look, it need to be fix a lots in friendconnect.js or SocialNorms.js, so it can't be done in each custom gadget, so I use a method to judge which browser user using, if user use IE 6, IE 7, so disable this gadget.

As we know, we goes to "Friend Connect" to add site and gadget, and when we add a custom gadget, we input the url of the module, like "http://login.tw/gfc/recent.xml", we will get a generated code as follow:
<!-- 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-1229147868491" style="width:200px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if (browser != "Microsoft Internet Explorer" || version > 7) {
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';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1229147868491',
url:'http://login.tw/gfc/recent.xml',
site: '00249003971097702571'},
skin);
}
</script>

The green code mean the option you input, the blue code is the system provide differ by each site and gadget, the red code is what we need to insert manually, ...

So you can use your google module or any custom gadget with your site/blog.

No comments:

Post a Comment