J2Play Friend Connect Gadget
From J2Play
The J2Play Friend Connect Gadget is a solution for third party sites who wish to add games to their own site, and connect with all other players from social networks in the J2Play Community. J2Play has provided a gadget version of their social console which uses Friend Connect technology to provide easy integration and user access to the community. You can see the gadget in action on J2Play's corporate site.
Contents |
Prerequisites
- A website that you can modify. You will be required to upload files and modify the HTML of the page to contain the gadget.
- A Google Friend Connect account. Sign in to or Sign up for Friend Connect and set up your site according to the instructions.
- A J2Play Developer account. If you haven't done so already, create an account at the log in page and make sure you can access the J2Play Management Site.
Step 1: Create a J2Play Network
- Log in and navigate to the J2Play Management Site.
- Click Networks.
- Click Add Network.
- Enter your network name (lowercase letters and numbers, please) and domain.
- Upload a 15x15 icon that will identify players on your network.
- Select the default game for your network. This is the game all users will start in.
- You can (but are not required to) customize the set of games on your site by unchecking All Available Games and moving your games of choice into the Selected Games list. With All Available Games selected, your gadget will automatically receive new games as they become available. Left unchecked, you'll be required to explicitly add new games at a later date.
- Take a note of the Gadget URL that is generated. You'll need this to create the J2Play Gadget.
- Click Save.
Step 2: Create a Sign in Gadget
- Log in to the Friend Connect administration site.
- If you haven't already done so, set up Friend Connect for your site.
- In the sidebar under your site, click Members gadgets.
- Click Add a Sign In gadget.
- Set the display settings to be consistent with your site and click Generate code.
- As described, copy the generated code to your website.
Step 3: Create the J2Play Gadget
- In the Friend Connect administration site, click Social gadgets.
- Scroll to the bottom of the list of available gadgets and clickCustom gadget .
- Copy the gadget URL for your J2Play network from the J2Play Management Site into the Gadget URL field in the Friend Connect administration site. Be careful not to have any extra whitespace in the URL.
- Under Choose the gadget's size, select a width appropriate for your site (the minimum width for the J2Play gadget is 725 pixels, and the optimal width is 917 pixels) and change Zoomed to Yes; ... (canvas mode).
- Click Generate code.
- Insert the code for the J2Play gadget into your website immediately below the code for the sign in gadget. When copying, omit the first two lines (they are already in the sign in gadget code and are only required once):
<!-- Include the Google Friend Connect javascript library. --> <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
- The final code for the 2 gadgets should look like this:
<!-- 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-1233083950634" style="width:282px;border:1px solid #cccccc;"></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'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#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';
skin['ALIGNMENT'] = 'right';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderSignInGadget(
{ id: 'div-1233083950634',
site: '12341234123412341234' },
skin);
</script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1233084591242" style="width:730px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1233084591242',
presentation:'canvas',
url:'http://production.j2play.net/gadget/network_name/web/game-80255/app.xml',
site: '12341234123412341234' });
</script>
You're Done!
Congratulations! You've added the J2Play Friend Connect Gadget to your website! Hopefully integration has gone smoothly and the results are what you expected.
Please direct any inquiries and support requests to J2Play Developer Support.
