Sponks on Facebook
September 26, 2009

Screensaver Gadget for Google Friends Connect





This gadget lets you publish on your website a screensaver showing images of your community. Visitors can click on a member's photo to learn more about them and become friends.

Note that there is no need to use any Flash plugin because this gadget uses only javascript language.

When you install it, you can set the following parameters:

  • screenWidth: width of the screen;
    screenWidth >= 200
  • rows: rows of faces that will be showed in the gadget;
    2 <= rows <= 15
  • waitTime: waiting time between two effects (seconds);
    1 <= waitTime <= 10
  • useEffects: Yes/No, it says if the animation for images has to be used or not;
    useEffects = 1 | 0
You set these parameters in the same way as you do for the Scoller gadget.

Moreover, you can customize some colors (see the image below) of this gadget:

Use OpenSocial Gadgets.skins API to set these colors.

In this gadget, I've used a two-level component where each level is a simple piece of DHTML code appearing within the gadget screen. Let's take a look on the following image:

The first level (on top) shows images of community and the second level (behind) shows Author (me ;), Title and Website of the gadget. User can see these informations when he clicks the center button at the bottom on the monitor (look at the following):



Here is a snippet of code used in this page to show the Screensaver gadget:

<div align="center">
<!-- 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-7791692969327865580" style="width:;"></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[] = '#000000';
skin[] = '#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.setNoCache(1);
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-7791692969327865580',
url:'http://www.sponks.com/gadgets/screensaver.xml',
site: 'YOUR GOOGLE FRIEND CONNECT SITE ID',
'prefs':{'screenWidth':'','rows':'5','waitTime':'5','useEffects':'1'}
}, skin);
</script>
</div>