iPhone Gadget: An iPhone for all of your Friends
iphone gadget image
An iPhone for your community!
Here is the iPhone gadget for Google Friend Connect, so you can put a iPhone on your website and show your community within it.
But that is not all because, like the real iPhone, you can:
  • scroll its contents (by using your mouse, look at the following image)
  • click on members and get more informations about them
  • navigate among all members of your community

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

Configuration and customization:
When you install it, you can set the following parameter:
  • iphoneWidth: width of the iPhone (pixel);
You can also customize the background color of your community as you can see below:
iphone gadget details
That's all!
I think the best way to understand what I'm talking about is an example.
So, let's look at the following example.
Example:
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="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-7791692969327865581" style="width:px;"></div>
<script type="text/javascript">
var skin = {};
skin['ALTERNATE_BG_COLOR'] = '';
skin['BG_COLOR'] = '';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-7791692969327865581',
url:'http://www.eaglewebapp.com/ewa/gfc/iphone/iphone.xml',
site:'',
'prefs':{'iphoneWidth':''}}, skin);
</script>
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!

PS: the iPhone4 had not yet been released when this app has been developed
PS2: iPhone is a trademark of Apple Inc.