6
Getting Started with LiveShare 1. General background information Every stream in the LiveShare ecosystem has an id. When the time comes we will work together to put the streams in the LiveShare mobile application. For testing purposes, you can simply use the “Cooliris Behind the Scenes” stream, which has a stream id of 36, which will become relevant below. 2. Directions for putting the photo gallery on your website The process is extremely simple. Please paste this code in the HTML of any webpage: <object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="670" height="450"> <param name="movie" value=" http :// apps . cooliris . com / embed / liveshare . swf" /> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="flashvars" value="eventId= 36" /> <embed type="application/x-shockwave-flash" src=" http :// apps . cooliris . com / embed / liveshare . swf" flashvars="eventId= 36" width="670" height="450" allowFullScreen="true" allowScriptAccess="always"> </embed> </object> FURTHER INFORMATION Set the height and width as you wish (highlighted above). You should see “&eventId=36” in the snippet above. That signifies the event you will be displaying in the Cooliris wall for that day. When your events become a part of the Liveshare database, we will provide you a link where you will be able to view all of your event Id’s. If you have already had your events entered in our database and have not received this link, let us know. 3. Directions for putting the photo gallery on your Facebook Fan page Before you begin, take a look at Paris Hilton ' s Facebook fan page to see what displaying Liveshare photos on your Facebook fan page will look like. To display your Liveshare photos on a tab on your Facebook Page, you will need to create a custom tab. Creating this custom tab is very simple, just follow the below directions: Go to your desired Page for the custom tab and select “Edit Info” next to profile image. Note: You must have administrator privileges on your Facebook Page in order to do this. Under the Applications section, there should be an item that says “Apps You May Like - Static FBML”. Select “Add App”. If you refresh the page, you should be able to see a new App in your 'Added Apps' Section called “FBML - FBML”. Select “Go to App”.

Documentation: Getting started With Live Share

Embed Size (px)

Citation preview

Page 1: Documentation: Getting started With Live Share

Getting Started with LiveShare 1. General background information

● Every stream in the LiveShare ecosystem has an id. ● When the time comes we will work together to put the streams in the LiveShare mobile

application. For testing purposes, you can simply use the “Cooliris Behind the Scenes” stream, which has a stream id of 36, which will become relevant below.

2. Directions for putting the photo gallery on your websiteThe process is extremely simple. Please paste this code in the HTML of any webpage:

<object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

width="670" height="450">

<param name="movie" value="http://apps.cooliris.com/embed/

liveshare.swf" />

<param name="allowFullScreen" value="true" />

<param name="allowScriptAccess" value="always" />

<param name="flashvars" value="eventId=36" />

<embed type="application/x-shockwave-flash"

src="http://apps.cooliris.com/embed/liveshare.swf"

flashvars="eventId=36"

width="670"

height="450"

allowFullScreen="true"

allowScriptAccess="always">

</embed>

</object>

FURTHER INFORMATION○ Set the height and width as you wish (highlighted above).○ You should see “&eventId=36” in the snippet above. That signifies the event you will be

displaying in the Cooliris wall for that day. When your events become a part of the Liveshare database, we will provide you a link where you will be able to view all of your event Id’s. If you have already had your events entered in our database and have not received this link, let us know.

3. Directions for putting the photo gallery on your Facebook Fan pageBefore you begin, take a look at Paris Hilton's Facebook fan page to see what displaying Liveshare photos on your Facebook fan page will look like. To display your Liveshare photos on a tab on your Facebook Page, you will need to create a custom tab. Creating this custom tab is very simple, just follow the below directions:

● Go to your desired Page for the custom tab and select “Edit Info” next to profile image.○ Note: You must have administrator privileges on your Facebook Page in order to do this.

● Under the Applications section, there should be an item that says “Apps You May Like - Static FBML”. Select “Add App”.

● If you refresh the page, you should be able to see a new App in your 'Added Apps' Section called “FBML - FBML”. Select “Go to App”.

Page 2: Documentation: Getting started With Live Share

● Now you can customize your new tab on your Page. Customize the name of the new tab in the “Box Title” edit box. Some suggestions are: Liveshare Wall, Photo Wall.

● Now look at the editable “FBML” box. This is where you can add and customize the code that will display the Cooliris Wall with your Liveshare photos. Copy and paste the following into the FBML box area, and customize any of the editable fields (highlighted below) as desired. Please refer to the notes section below for clarifications on customization.

<style>embed { border: 1px solid #d9d9d9;}

</style>

<h1>DEFINE TITLE</h1><br>

Download the free app LiveShare by Cooliris for iPhone, Android

and WP7 <a href=http://www.liveshare.com/>here</a>.

Snap pictures and watch everyone’s photos flow into one live

photostream. Share the stream on your phone, website or Facebook.

<br/><br/><br/>

<fb:swf

swfbgcolor="ffffff"

swfsrc='http://apps.cooliris.com/embed/liveshare.swf?

&amp;cellSpacingX=0.1

&amp;cellSpacingY=0.1

&amp;numRows=3

&amp;eventId=36

&amp;backgroundImage=http://yourbackgroundimage.jpg

&amp;pageUri=http://www.facebook.com/myFanPage'

imgsrc='http://platform.ak.fbcdn.net/www/app_full_proxy.php?

app=4949752878&v=1&size=o&cksum=56b4bb12c92be11b51c87731f107cc1e&s

rc=http://farm6.static.flickr.com/5122/5283794306_a79c164db2.jpg'

width='521' height='481' />

<br />

Notes:○ “numRows” is where you can specify the number of rows of photos that you want in your

Liveshare wall.○ “eventId” is where you put in your event ID, so that your event photos will show up in the

Liveshare wall.○ “backgroundImage” is where you can customize the background image of the Liveshare wall.

Leave it blank if you just want your photos on a black wall.○ “pageUri” is the URL of the facebook page or tab where the embed wall lives. This helps us track

your traffic.○ ‘imgsrc’ is the URL of the image that appears before the Liveshare wall can be interacted with.

See a good example here.○ Be careful to keep all of the quotation marks as they are - adding extra ones or deleting them can

break your code.● Click “Save Changes” at the bottom of the page to save your changes, and go to your Facebook Page to

view the finished Liveshare tab!● Optional: Make your new Liveshare photos tab the default page that people see when they visit your

Facebook Page by going to your Page Wall and selecting “Settings”. 4. Test the flow

Page 3: Documentation: Getting started With Live Share

● Go to http://www.liveshare.com/stream/36 and click ‘Follow’ to follow the stream (you’ll first login with your Facebook ID info, but not to worry, nothing whatsoever is posted without your stated permission).

● Open LiveShare, go to “My Streams”, and click on the stream title “Cooliris Behind the Scenes”, and you’ll enter the stream.

● Click the camera button at the bottom-center, and snap a picture. The photo should then appear in the stream.

● You’ll then be able to see the photo displayed at http://www.liveshare.com/stream/36 and on your Facebook fan page (if you made one)

○ Aside: When we work together to create a stream, we will make sure that it is actively moderated. We will specify your (or, whoever on your team) email address as a moderator account.

○ You will then login to the moderator page for this event here: http://www.cooliris.com/mobile/products/liveshare/admin/#- you will then login (link in the upper right of the page)

○ enter the stream id you’ll be moderating, and then you’ll be able to see the moderation process.

● On moderated streams, the moment you approve the images, they’ll instantly appear in the gallery.

5. Specs for customizing assetsThis section lists the specs of all the possible custom assets you can incorporate into the Liveshare experience across the website gallery, your Facebook fan page gallery. You’ll need to specify a destination url as well. Gallery on your site and Facebook profilesExample image

Page 4: Documentation: Getting started With Live Share

Background imageAsset that is w=420 and h=262 Logo overlayLogo overlay asset should be a transpagent .PNG (roughly 100x100). Example found here:

Page 5: Documentation: Getting started With Live Share

Ad assets (See the “Get exclusive Paris beauty tips here”)Ad assets can be any rectangular asset size. Ideal is roughly the size of the whole gallery. Gallery on your site

Background assetSimply make that the same size as the gallery w x h Logo overlayMatch the requirements above for logo overlay assets. Gallery on your Facebook fan pageFirst, create a “splash” image of about w=520 x h=481. Make sure to match the size of the gallery to the size you pick for the splash asset.

Page 6: Documentation: Getting started With Live Share

Second, create a background image the same size as above. They can be the same asset, but the background should have a reduced opacity. Let me know if you still have any questions after going through this info and the info in the documentation I sent - thanks!Preston PS - feel free to call me if that's more efficient 520-409-8628