Sponks on Facebook
July 14, 2009

Scroller Gadget for Google Friends Connect





Use this gadget to show images of your community scrolling across your website. Visitors can click on a member's photo to learn more about them and become friends.

When you install it, you have to set at least first two parameters (others are optional):
  • imgHeight: height of each scrolling image (see the image below);
    [imgHeight >= 20]
  • scrollerWidth: width of whole Scroller gadget;
    [scrollerWidth >= 100]
  • maxDisplay: number of recents friends that will be showed in the gadget;
    [1 <= maxDisplay <= 200]
  • speed: scrolling speed;
    [1 <= speed <= 3]
  • showEndcaps : to show/hide encaps (Yes/No);
    showEndcaps = [1 | 2]
  • showInnerLines : to show/hide inner horizontal lines (Yes/No);
    showInnerLines = [1 | 2]
  • endcapsBg : endcaps colors (Common=#E0ECFF, Black, White);
    [1 <= endcapsBg <= 3]
I've recently updated the scroller by adding three parameters ('showEndcaps', 'showInnerLines' and 'endcapsBg'). Note that these parameters are not mandatory and the code is completely backward-compatible, so even if you're not using these your gadget will work the same.

You set these parameters with a data interchange format (JSON - JavaScript Object Notation) syntax like the following example:

{'imgHeight':'50', 'scrollerWidth':'400', 'maxDisplay': '15', 'speed': '1', 'showEndcaps': '1', 'showInnerLines': '1', 'endcapsBg': '1'}

To pass these data into Scroller gadget, use 'prefs' (User Preferences).
In any case, when you get this Gadget from the Friend Connect social gadget directory you will see a nice and simple inferface - as the following image - so you don't have to remember the name and value of each parameter:

Moreover, you can set some colors (see the image below) you want to use for this gadget. These colors are passed to the gadgets using the OpenSocial Gadgets.skins API.



Here is a snippet of code used in this page to show the Scroller 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-8649139874421480203" style="width:;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin[] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#FF0000';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin[] = '#ffffff';
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-8649139874421480203',
url:'http://www.sponks.com/gadgets/scroller.xml',
site: 'YOUR GOOGLE FRIEND CONNECT SITE ID',
'prefs':{:'50', 'scrollerWidth':, 'maxDisplay': '15', 'speed': '1', 'showEndcaps': '1', 'showInnerLines': '1', : '1'}
}, skin);
</script>
</div>

Notice: The width of the div tag (in this example is 404px) where the gadget will be inserted has to be larger than about 4 px of the width of the scroller (in this case scrollerWidth=400).

If you want to hide the endcaps, you have to select 'Show endcaps = No' (i.e. showEndcaps = 2) and set the ENDCAP_BG_COLOR parameter (see above). If you do so, the scroller looks like the following:

Hiding endcaps (showEndcaps = 2, ENDCAP_BG_COLOR = '#FFFFFF')

Remember to change also the 'ENDCAP_BG_COLOR' value as you like (e.g. you can set it with the background color of your webpage) otherwise you can see a different scroller from what you expect, as showed in the following:

Hiding endcaps (showEndcaps = 2, ENDCAP_BG_COLOR = '#FF0000')

Finally, here is an example where ENDCAP_BG_COLOR = '#000000', showEndcaps = 2, BG_COLOR = '#000000', BORDER_COLOR = '#808080', ALTERNATE_BG_COLOR = '#808080' and endcapsBg = 2:

A Scroller example on black background


What if someone says: "Hey, I don't want to appear on this gadget but I want to remain joined the web site". Well, I added to this gadget a new feature to let everyone to remove (or re-add) himself/herself from the gadget but not from your web site.

Let's take a look at the following images:

When a visitor is joined and signed in, the option "Remove me" will appear on the upper right corner of the Scroller gadget (Figure A). After clicking on "Remove me", the Visitor's account image will disappear from the gadget (Figure B). Then, the images on the right side will shift to left and the option "Add me" will appear on the upper right corner instead of the option "Remove me" (Figure C). So, the "Add me" option lets visitors to re-add themselves to the gadget. Notice that "Add me" and "Remove me" options appear on the gadget ONLY IF the visitor is signed in and his image appear among others images.