Fluid Socialize Implementation Guide
From FluidRetailWiki
Contents |
Overview
Fluid Socialize is a hosted solution making implementation fast and easy. Follow these steps to get up and running in no time.
Implementation Steps
- Register for Fluid Socialize
- Add Fluid Socialize embed code to your product detail page and configure parameters
Register for Fluid Socialize
To get started, sign up for an account here
Copy and paste the embed code given in the last step of the registration process. You'll need to put this code in the HTML of your product detail page.
Adding Fluid Socialize to Your Product Detail Page
The embed code is broken up into 2 sections. The first block of code should be placed in the <head> section of your page. In this section, you will need to configure certain parameters like product name and a link to a product image. Here is a sample of the code:
<script type="text/javascript" src="http://fss.fluidretail.net/js/fs.js.php?hjrl=CompanyName&apps=7"></script>
<link rel="stylesheet" type="text/css" href="http://fss.fluidretail.net/css/fs.css.php?hjrl=CompanyName&apps=7"/>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
var item = new FSItem();
item.id = '1001';
item.name = 'Deluxe School Daypack';
item.imageUrl = 'http://fss.fluidretail.net/images/sample/bag_75x75.jpg';
item.largeImageUrl = 'http://fss.fluidretail.net/images/sample/bag_300x300.jpg';
item.type = FSItem.TYPE_PRODUCT;
// Set to FSItem.TYPE_PRODUCT for product pages and FSItem.TYPE_PAGE for category or
home pages.
item.url = self.location.href;
// Optional: This passes the URL of the current page for sharing.
item.price = 0.99; // Optional: Item Price.
// Embed Fluid Social Chat and Facebook
(new FSEmbedder()).embedFluidSocial( "fluidSocialContent1", FSEmbedder.CHAT_FACEBOOK , item );
// Embed Fluid Social Sharing
(new FSEmbedder()).embedFluidSocial( "fluidSocialContent2", FSEmbedder.SHARING, item );
});
</script>
The parameters you will need to configure are:
- 1. item.id - Here you should specify the Product ID or style number of the product.
- 2. item.name - Here you should specify the name of your product
- 3. item.ImageUrl - Here you should specify a URL to a small thumbnail image of your product. This image will be used in the application when friends share products. We recommend using an image that is 75x75px.
- 4. item.largeImageUrl - Here you should specify a URL to a large image of your product. We recommend an image that is 300x300px.
- 5. item.type - This should be set to FSItem.TYPE_PRODUCT for product pages and FSItem.TYPE_PAGE for category or home pages.
- 6. item.url - Here you should specify the URL of the current page for sharing.
- 7. item.price = This is an optional setting. You can specify the price of your product here.
The second block of code should be placed in the <body> section of your page. You will need to use standard CSS (Cascading Style Sheets) so that Socialize blends in with your other page elements and is positioned to your liking. Though you can place Socialize anywhere on your page, we believe the best placement for the Facebook and Chat functionality is underneath your main product image. Here is a sample of the code:
<div id="fluidSocialContent1" style="float: left; width: 408px;" ></div> <div id="fluidSocialContent2" style="float: left; width: 408px;" ></div>
Note: The 2 fluidSocialContent divs do not have to be placed together. You can position them separately within your CSS.
Place Your Cross Domain Receiver File
Facebook Connect requires that you install a simple HTML file at the root of your web site so that it can make cross domain scripting calls.
The file should be called xd_receiver.html and it must be accessible at http://www.yourdomain.com/xd_receiver.html
The contents of the file must be the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body>
</html>
