scroller gadget image
Use this gadget to show images of your community scrolling across your website.
Configuration and customization:
When you install it, you can set the following parameters (first two are mandatory, others optional):
  • imgHeight: height of each scrolling image (pixel);
  • scrollerWidth: width of whole Scroller gadget (pixel);
  • maxDisplay: number of recents friends that will be showed in the gadget;
  • speed: scrolling speed;
  • showEndcaps: to show/hide encaps;
  • showInnerLines: to show/hide inner horizontal lines;
  • endcapsBg: endcaps colors;
Moreover, you can also customize some colors (see the image below):
scroller demo image
On GFC official page there is the following message:
We're retiring Friend Connect on March 1, 2012. Find out how you can keep in touch with your community.

This means the gadget is no longer available.
Maybe, i'll decide to change its structure and create a new version with new features and/or new layout.
Rapid installation:
If you already know the settings for your site and have "YOUR GOOGLE FRIEND CONNECT SITE ID", then copy and paste the following code into your website but take care to set the parameters (highlighted in red below) according to your needs:
<script type="text/javascript" src=""></script>
<div id="div-7791692969327865584" style="width:px;"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '';
skin['ALTERNATE_BG_COLOR'] = '';
skin['BG_COLOR'] = '';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
{ id: 'div-7791692969327865584',
site: '',
'prefs':{'imgHeight':'','scrollerWidth':'','maxDisplay':'','speed':'','showEndcaps':'', 'showInnerLines':'','endcapsBg':''}
}, skin);
If you have not a "GOOGLE FRIEND CONNECT SITE ID" or you are not sure about settings to use, please choose the standard installation.
Standard installation:
Follow these steps to install this gadget on your website:
  1. Set your website - if not already done - on your Google Friend connect account
  2. Locate this gadget in the gadgets gallery and then click on "Get this gadget"
  3. Choose options for it
  4. Click "Generate Code" under "Create the HTML code"
  5. Copy the code and paste it into your website where you'd like this gadget to appear
  6. Enjoy!
More details:
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:
scroller demo2 image
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:
scroller demo3 image
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:
scroller demo4 image
A Scroller example on black background
Add/Remove Yourself:
If someone don't want to appear on this gadget but I want to remain joined the web site there is a 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.

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).