Sponks on Facebook
December 14, 2009

iPhone Gadget: An iPhone for all of your Friends





An iPhone for your community!
Here is my last work: an 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

Moreover, there is no need to use any Flash plugin and its installation is very simple.

Then, you can also customize the background color of your community.

That's all!
I think the best way to understand what I'm talking about it is an example.
So, let's look at the following



Follow these steps to install the gadget on your Website:

  1. Select your Website - where you want to install the iPhone gadget - on your Google Friend connect account
  2. Browse the gadgets gallery
  3. Choose the "All Gadgets" tab
  4. Locate "iPhone" gadget and then click on "Get this gadget"
  5. Choose options for your gadget
  6. Click "Generate Code" under "Create the HTML code"
  7. Copy the code and add it to your site
  8. Enjoy!

Here is a snippet of code used in this page to show the iPhone 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['ALTERNATE_BG_COLOR'] = '#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/iphone.xml',
site: 'YOUR GOOGLE FRIEND CONNECT SITE ID',
'prefs':{'iphoneWidth':''}
}, skin);
</script>
</div>


Please, note that the value of parameter 'iphoneWidth' (width of the iPhone) starts from 240px to 414px (default is 282px).