liveshare documentation full

8/8/2019 Liveshare Documentation Full

http://slidepdf.com/reader/full/liveshare-documentation-full 1/18



http://www.google.com/url?q=http%3A%2F%2Fmthomas.public.cooliris.com%2Fmobile%2Fproducts%2Fliveshare%2Fadmin%2F&sa=D&sntz=1&usg=AFQjCNEdopOtunylpVnUmWkzJGl0ZB3eBw















c. More information in section 4.

4. TEST THE COMPLETE FLOW OF LIVESHARE. Please perform this test 2 weeks

before launch. Ensure your event appears in the app, that your photo shows up on the

website gallery on your site and on Facebook, that photos show up in the moderation

interface (if you are actively moderating the event), (optionally) that photos show up

on the jumbotron display, and (optionally) that advertisements/merchandise appearscorrectly.

5. PROMOTION - defining a relevant strategy is crucial for the program's success.

Some general options: promotions before event to build buzz and educate users such

as emails before events, blog posts/press release, radio announcements, in-venue

postcards, instructional videos for jumbotron (like this one: http://vimeo.com/14309046),

signage in-venue, ample visibility on jumbotron and shout-out from onstage/from the

announcement/from the celebrity.

6. (OPTIONAL) DRIVE TRAFFIC BACK TO YOUR SITE FROM FACEBOOK POSTS. See

and implement section 6 of this doc.

7. (OPTIONAL) SEND CUSTOM ASSETS TO COOLIRIS IF YOU ARE GOING TO

BE INCORPORATING CUSTOM MESSAGING - Please allow 2 weeks lead time for

sending assets to Cooliris. See section 7 for more.

8. START MARKETING NOW!

3. EMBEDDABLE COOLIRIS MEDIA WALL FOR

WEBSITES

The Embeddable Cooliris Media wall is a media gallery that displays the photos taken by

the Liveshare app users. It is embedded into a website/facebook pages the same way a

YouTube video is embedded on a webpage. An example of an Cooliris Media wall is on http://kissonline.com/. Please see the information below for adding this wall to your website and

Facebook page respectively. First, though, you will probably want to learn more about how

Cooliris works on websites.

● General information: http://www.coolir is.com/developer/

● How to customize the experience: Customizations to the Cooliris wall can be added

in the form of Flashvars. A list of Flashvars is here: http://www.coolir is.com/developer/

reference/flashvars/

EMBEDDING ON A WEBSITE - The process is extremely simple. Please paste this code to

your site:

<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=38" />

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

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

http://www.google.com/url?q=http%3A%2F%2Fvimeo.com%2F14309046&sa=D&sntz=1&usg=AFQjCNGqXQfuMMPYOMszEY08PYl8ExspOw





http://www.google.com/url?q=http%3A%2F%2Fwww.cooliris.com%2Fdeveloper%2F&sa=D&sntz=1&usg=AFQjCNF3WLftBspzoNsCTge284LXbWduTA




http://www.google.com/url?q=http%3A%2F%2Fwww.cooliris.com%2Fdeveloper%2Freference%2Fflashvars%2F&sa=D&sntz=1&usg=AFQjCNERQGUb6ZpRxjUhC-kwxHKCJtmVGQ



































flashvars="eventId=38"

width="670"

height="450"

allowFullScreen="true"

allowScriptAccess="always">

</embed>

</object>

FURTHER INFORMATION

● Set the height and width as you wish.

● You should see “eventId=38” 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.

● Cooliris automatically creates a page with a Cooliris wall for every event. An example

page is here: http://www.liveshare.com/stream/9

○ Change out the number at the end of the url to reflect the event ID for your event

to see the content of your event.

EMBEDDING ON A FACEBOOK PAGE

Before you begin, take a look at this 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:

1. Go to your desired Page for the custom tab and select “Edit Info” next to profile image.

a. Note: You must have administrator privileges on your Facebook Page in order to do this.

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

3. 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”.

4. 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.

5. 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"

http://www.google.com/url?q=http%3A%2F%2Fwww.liveshare.com%2Fstream%2F9&sa=D&sntz=1&usg=AFQjCNGiiWSuLPLwAVcm7c9jLlY0o_taVg




http://www.google.com/url?q=http%3A%2F%2Fwww.facebook.com%2Fliveshare%3Fv%3Dapp_4949752878&sa=D&sntz=1&usg=AFQjCNF-8XsWywdDa2DGlXUuKNRuty7GCg




















http://www.google.com/url?q=http%3A%2F%2Fblog.cooliris.com%2Fwp-content%2Fuploads%2F2010%2F09%2Fliveshare_background_jumbotron_new_520x400_1b.jpg&sa=D&sntz=1&usg=AFQjCNGI8MJkhgCJVh72usLj9K8R_t5fgQ

http://www.google.com/url?q=http%3A%2F%2Fblog.cooliris.com%2Fwp-content%2Fuploads%2F2010%2F09%2Fliveshare_background_jumbotron_new_520x400_1b.jpg&sa=D&sntz=1&usg=AFQjCNGI8MJkhgCJVh72usLj9K8R_t5fgQ

http://www.google.com/url?q=http%3A%2F%2Fplatform.ak.fbcdn.net%2Fwww%2Fapp_full_proxy.php%3Fapp%3D4949752878%26v%3D1%26size%3Do%26cksum%3D56b4bb12c92be11b51c87731f107cc1e%26src%3Dhttp%3A%2F%2Ffarm6.static.flickr.com%2F5122%2F5283794306_a79c164db2.jpg&sa=D&sntz=1&usg=AFQjCNHsIEVGFOfnTEIzIww4D-_9E5cZEQ
























































http://www.google.com/url?q=http%3A%2F%2Fgaurav.public.cooliris.com%2Fconcert%2Fimages%2Flogo_kiss.png&sa=D&sntz=1&usg=AFQjCNEALNx0FGhnZVtaFgMuUjI8fmLLXw
















http://www.google.com/url?q=http%3A%2F%2Fgaurav.public.cooliris.com%2Fconcert%2Fimages%2Fjumbotron_bg.png&sa=D&sntz=1&usg=AFQjCNHUTX-cqHRFQbM-6aisw4ojYQloyA
















SELECTING A PARTICULAR EVENT

The moderation panel URL will end with something like: moderate.php?eventid=2%2C1or

moderate.php?eventid=2,1. Just assign the event id after the “=” sign.

WORKFLOW

When the page is loaded, the moderator gets the most recent 18 ‘under review’ items. The

moderator cherry-picks items in the under review list by dragging them to the featured star or

the trash can.

After all the awesome and objectionable photos are filed accordingly, the moderator clicks the

approve all button to send the rest of that batch of 18 photos to the approved area (Note: The

moderator is unlikely to care about photos in the approved area once they're in there, so that

tab will be unselected by default.).

The under review tab has two counts, in the format 18/50. The first number is the number of

items in the current batch. The second number is the number of items waiting behind that. Theywill be pulled in after the current set is approved or the page is refreshed.

Items from the approved tab can also be moved to featured or trashed (but not unapproved).

Clicking on the featured or trash areas allows you to see the most recent featured/trashed

items, and move them to approved or featured/trashed.

WHO CAN SEE WHAT

● under review / trashed = just those with the mobile device

● approved = anyone looking at the online embeddable wall

● featured = these are “special” approved photos that the jumbotron displays (featureditems are also in the approved area)

FEATURED ITEMS

Only featured items appear on the jumbotron. Dragging a photo to the top of queue area of the

featured star tells the jumbotron display to display that photo as soon as possible. Dragging

a photo to any other part of the featured star places the photo at the bottom of the queue, but

before any photos that have already been on the jumbotron.

STANDARDS FOR MODERATION

...what stuff do I accept, feature, put top of queue, and trash?

● TRASH - any inappropriate or irrelevant photo that absolutely needs to be eliminated.

Trash photos as sparingly as possible.

● FEATURE - photos that belong on the jumbotron at some point during the evening,

but do NOT need to go now. This includes adequate fan photos, moderate photos of the

crowd, etc.

● TOP OF QUEUE - photos that need to go up on the jumbotron ASAP. These include fan

photos where the lighting is great, great poses and/or facepaint.



● ACCEPTED - every other photo. The bulk of the remaining photos may not be especially

exciting to the general audience, but people will want to see themselves and their friends

and it will give them a reason to participate. Plan to accept a ton of photos.

TROUBLESHOOTING

If an error alert pops up, or a tab seems obviously wrong (The count shows there are picturesleft, but there's none showing in the UI), reloading the page will return it to the correct state.

6. (OPTIONAL) DRIVE TRAFFIC BACK TO YOUR SITE

FROM FACEBOOK POSTS.Drive traffic back to your site.

This document outlines the process needed to drive traffic back to the page on your site that

contains a Cooliris Liveshare photo wall when a user shares a Liveshare stream to Facebook

(either from the mobile app or from the website gallery). This is important because default

functionality is when a user clicks on the text hyperlink in Facebook, the traffic is driven to a

Liveshare page, which is a technical requirement at the moment because there has to be a

page for the user to link to from Facebook.

If you have a Cooliris photo wall on your site, we want the traffic to be driven to your page,

rather than to the Liveshare page, so you can capture all the unique users driven from

Facebook.

Check out this video to see an explanation of the functionality. http://www.youtube.com/

watch?v=-4U _ 6ZAVUGs#t=1m15s

THIS IS ALL YOU HAVE TO DO

1. Find section called “PHP syntax of an example page” below and copy/paste the

code in the correct parts of the HTML page. Some will go to the <head>, and the rest in

the <body>

2. Replace the Event Id with the event id of your event. The event id is the BLUE

number in the code example you’ll be copy/pasting, so keep track of it.

3. Choose what you want as the thumbnail image for the event. Choose a 120x120

square asset. This asset will then appear when a user shares the stream to Facebook.

See for yourself - test it:

1. Go to http://pr eston2.public.cooliris.com/Partner SharingTest.php

2. Share an image or the whole wall to Facebook or Twitter.

3. The link to Twitter will link you back to this site, rather than to http://www.liveshare.com/

http://www.youtube.com/watch?v=-4U_6ZAVUGs#t=1m15s











http://www.google.com/url?q=http%3A%2F%2Fpreston2.public.cooliris.com%2FPartnerSharingTest.php&sa=D&sntz=1&usg=AFQjCNEK3sUVtfRjSJ4yjuhkLZwg5RjuKQ








http://www.google.com/url?q=http%3A%2F%2Fwww.liveshare.com%2Fstream%2F423935&sa=D&sntz=1&usg=AFQjCNF_JbSRET7mBFYTSLvNSRvoQSsFsQ









































http://www.google.com/url?q=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fshare&sa=D&sntz=1&usg=AFQjCNFPXwliogjYieZH3c6exDoZVonBZQ












http://www.google.com/url?q=http%3A%2F%2Fwww.yoursite.com%2Fphotos&sa=D&sntz=1&usg=AFQjCNH8_MmA8iALwNShL4Vb21uLu6UBRQ









https://docs4.google.com/a/cooliris.com/document/d/1Ij890XM2fM7ZCOLeK5sGSrVBPOdonttnoDNtw-xgB3w/edit?hl=en#heading=h.rr1mwf-c1o9r4












https://docs4.google.com/a/cooliris.com/document/d/1Ij890XM2fM7ZCOLeK5sGSrVBPOdonttnoDNtw-xgB3w/edit?hl=en#heading=h.czg8rc-u86ibz







https://docs4.google.com/a/cooliris.com/document/d/1Ij890XM2fM7ZCOLeK5sGSrVBPOdonttnoDNtw-xgB3w/edit?hl=en#heading=h.3m2u9g-sz89t0



https://docs4.google.com/a/cooliris.com/document/d/1Ij890XM2fM7ZCOLeK5sGSrVBPOdonttnoDNtw-xgB3w/edit?hl=en#heading=h.ze0nul-ameroy



https://docs4.google.com/a/cooliris.com/document/d/1Ij890XM2fM7ZCOLeK5sGSrVBPOdonttnoDNtw-xgB3w/edit?hl=en#heading=h.k9iw5v-15ayec







http://www.yoursite.com/photos ) where you will display the Cooliris Liveshare wall.

Cooliris will then set a redirect from all the Cooliris event pages to your page in our

system, which causes everything to ultimately work together.

LIVE EXAMPLEHere’s a webpage demonstrating how you can arrive at a page with a Cooliris Liveshare

wall with a particular photo selected, as determined by the mediaId passed in the url. (note:

currently, if you go to the below url, it will redirect to http://pr est on2.public.cooli ris.c om/

PartnerSharingTest .php?mediaid=35148 , which is understandable, given the information given

in the Process steps above.)

http://www.liveshare.com/stream/ 423935/35148

TIP: Please share the above photo to facebook (by clicking the facebook button at

the upper right hand side of the photo), take note of the information given in the post

(thumbnail image, title text, sub title text, description text) and then compare that to what

you see when you view the source of this page to see how the source code in the page

relates to the Facebook sharing look/feel and flow.

IMPORTANT NOTES OF FUNCTIONALITY

- Thumbnail of the shared url is the image that is being shared to Facebook

- Even when you share a particular image to Facebook, it shows the right thumbnail and

shares the entire feed, that opens in-line with the selected media id zoomed-in

Notice the following things in the source of the web-page that enable an enhanced

sharing:

- There’s meta-data at the beginning of the web-page that facebook reads and enables

the enhanced sharing experience. The below metadata displays when a user shares an

individual image (This metadata adheres to the Facebook rules of sharing):

<meta name="title" content="Posted on Liveshare | " />

<meta name="description" content="This photostream of was captured at with

Liveshare, the mobile app that lets you and your friends take pics and see them

all in place." />

<title>Posted on Liveshare | </title>

<link rel="image_src" href="http://www.cooliris.com/mobile/products/liveshare/

getmedia/?mediaid=35148" />

<link rel='video_src' href="http://apps.cooliris.com/embed/liveshare.swf?

eventId=423935&mediaId=35148&showFullscreen=false"/>

<meta name='medium' content='video' />

<meta name="video_height" content="262" />








http://www.google.com/url?q=http%3A%2F%2Fpreston2.public.cooliris.com%2FPartnerSharingTest.php%3Fmediaid%3D35148&sa=D&sntz=1&usg=AFQjCNFLjw-e2JTxOW9lcnk7rjNxJr6ZGg






































allowFullScreen="true" allowScriptAccess="always" bgColor="#000000"

flashvars="eventid=423935&mediaid=35148" wmode="transparent">

</embed>

</object>

If no image is shared, and the whole feed is simply shared, you do not need to include a

mediaid flashvar in the embed code. See below.


444553540000" width="884" height="419">

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

liveshare.swf"/>




value="eventid=423935" />


<embed id="ci_25733_e" type="application/x-shockwave-flash"src="http://apps.cooliris.com/embed/liveshare.swf" width="884"

height="419" allowFullScreen="true" allowScriptAccess="always"

bgColor="#000000" flashvars="eventid=423935" wmode="transparent">

</embed>

</object>

PHP Syntax of an example page.

Example page here: http://pr est on2.publ i c.cooli ris.c om/P artner SharingT est.ph p

Alternate page with a media id selected: http://pr est on2.public.cooli ris.c om/

PartnerSharingTest .php?mediaid=35148

<?php

$mediaid = '';

if($_GET['mediaid'] != '')

{

$mediaid = $_GET['mediaid'];

}

$img_src = 'http://www.liveshare.com/images/liveshare.jpg';

if($_GET['mediaid'] != ''){

$img_src = 'http://www.cooliris.com/mobile/products/liveshare/getmedia/?mediaid=' .

$_GET['mediaid'];

}

?>













































<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<title>Partner Sharing Test Page</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/

reset/reset-min.css" media="screen" />



<meta property="og:image" content="<?php echo $img_src; ?>" />

<?php

if($mediaid=='')

{

echo '<meta property="og:video" content="http://apps.cooliris.com/embed/

liveshare.swf?eventid=423935"/>';

}

else

{

echo '<meta property="og:video" content="http://apps.cooliris.com/embed/

liveshare.swf?eventid=423935&mediaid=' . $mediaid . '"/>';

}

?>






</head>

<body id="body" onload="">

<br/>

<div id="cooliris-content">

<div id="inner">

<div id="main-window" class="clearfix">

<div id='wall' class="clearfix" align="center">


444553540000" width="800" height="600">

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

liveshare.swf"/>




value="eventid=423935&mediaid=<?php echo $mediaid; ?>" />


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

src="http://apps.cooliris.com/embed/liveshare.swf" width="800" height="600"

allowFullScreen="true" allowScriptAccess="always" bgColor="#000000"

flashvars="eventid=423935&mediaid=<?php echo $mediaid; ?>" wmode="transparent">



http://www.google.com/url?q=http%3A%2F%2Fgaurav.public.cooliris.com%2Fconcert%2Fimages%2Flogo_drPepper.png&sa=D&sntz=1&usg=AFQjCNEnP7vmhoexT-bHOCtZtTTiAU9elQ

































http://www.google.com/url?q=http%3A%2F%2Fpreston2.public.cooliris.com%2Fjumbotron%2F%3FeventId%3D597497)&sa=D&sntz=1&usg=AFQjCNGHxLSkIhKjPUA2-Qc5hO0JutyTeg













gaurav.public.cooliris.com/concert/images/logo_ drPepper.png

Ad feed assets - as seen here: http://www.youtube.com/watch?v=89XXcQU4AgI#t=0m15s (at least

720x480).

Gallery on your site and Facebook profiles

ASSETS NEEDED FOR GALLERY ON YOUR SITE

Logo overlay asset (roughly 100x100). Example found here:

Main logo asset - the KISS asset at the top left (around 400x300). Example:






http://www.youtube.com/watch?v=89XXcQU4AgI#t=0m15s







































We require these assets to be delivered to Cooliris in a Media RSS feed. Information on Media RSS

feeds can be found here: http://www.cooliris.com/developer/reference/media-rss/

Given that you’ll be giving us the url to a media RSS feed, you will host your own assets. You will also

include a destination url associated with every asset.

Gallery on your Facebook fan page

First, create a “splash” image of about 500x500. Make sure to match the size of the gallery to

the size you pick for the splash asset.

Second, create a background image the same size as above.



8. MARKETING BEST PRACTICES

This program is as successful as the amount of people using the mobile application, taking

photos and sharing to their social networks. Here is a listing of ideas for maximizing this activity.

MARKETING PRE EVENT:

HIGH IMPACT/EASY TO IMPLEMENT

1. Contest for the night and/or whole season/tour. The goal should be to incentivize

3 things: 1) Participation outside the venue (to ensure they are downloading it

before coming to the event). 2) Participation before the event (e.g., at the tailgates)

3) Continued participation after the event begins and throughout the whole event.

Examples: Biggest coordinated costume group, “Tailgate Superstars”, Best family shot,

Person with most featured photos (turn people into photographers), Most Featured

photos through Liveshare.

2. Long term stream to educate users. Create a channel/event in the Liveshare app for

fans to be constantly uploading great related photos not specific to a concert/game date

or city but rather to a pre-defined topic or theme - have this stream last for the month

before event launch.

3. Post to your site / Facebook page. Create a post on your websites called "CALLING

ALL ___ FANS WITH iPHONES AND ANDROID PHONES" - recruit them to download

the app and to be the folks who get the free shirt and are the "[band or team name]



Superstar Livesharers" for the night.

4. Press release. Example: http://tinyur l.com/32redso

5. Email blast where Liveshare is featured. Email sent to ticket purchasers about

Liveshare and the contests and big screen ‘fame’.

6. Daily story on your website connected to previous events talking about Liveshare and

the impact/how to participate.HIGH IMPACT/HARDER TO IMPLEMENT

1. Give phones to members of the band/team/crew/opening acts and snap photos the day

of and back stage before show. Great way to build buzz leading up until an event and

give your users an insight into their favorite team/band like never before.

2. Create promotional videos for your event and place these on Youtube or send out

to registered members, fan groups, etc. An example video is on http://vimeo.com/

14309046.

3. Get band/team members to Tweet/Facebook post about Liveshare

4. Put a callout on your Facebook page getting 5 ppl w/ iPhones/Android phones to come

early, get free shirts, if they take 100 great photos their name gets recognition in a

couple of possible forms:

a. featured the next day on your site or Facebook as a "Superstar Livesharer"

b. OR - the people could get a personal call-out by the star on Twitter (e.g.,

GeneSimmons: Amazing Cinci show. Thanks to Tammy, Kim and Jesse for

being Superstar Livesharers! Fans: Get Liveshare now.

MARKETING DURING EVENT:

1. Use Jumbotron to Ad assets to encourage users at the venue to download the app and

start sharing their images.

2. Hand out cards / put cards in seats3. Put signage around entrance, merch stand, bar

4. Red carpet / Press wall / Photo booth area

5. Get talent to use LiveShare in venue to take a pic of audience

6. Encourage fans to share the stream to their Facebook profiles

MARKETING POST EVENT:

1. Follow up with the fan who took the best photo. You can do that with a callout on the

website, or a Facebook/Twitter message from the athlete/musician.

2. Create a leader board on your facebook site, presenting the Top 5 contributors or the

Top 5 images of last night's event. You can find an example leader board here http://

tinyurl.com/3aev8xd.

3. Make your users aware of the sharing functionalities/like button on the Cooliris media

wall on your site and get them to share your walls on their facebook pages.

http://www.google.com/url?q=http%3A%2F%2Ftinyurl.com%2F32redso&sa=D&sntz=1&usg=AFQjCNH7KzK00aERiUfpfy_jTAundgug6g








http://www.google.com/url?q=http%3A%2F%2Ftinyurl.com%2F3aev8xd&sa=D&sntz=1&usg=AFQjCNFu9j4BWJxd0C0ZCabdEFgHkaDYZg

























liveshare documentation full

Documents