liveshare documentation full
TRANSCRIPT
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 1/18
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 2/18
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 3/18
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"
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 4/18
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"
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 5/18
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 6/18
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 7/18
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.
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 8/18
● 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/
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 9/18
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 10/18
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" />
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 11/18
<meta name="video_width" content="420" />
<meta name="video_type" content="application/x-shockwave-flash" />
Please see how the HTML metadata on the page given above corresponds to the information in
the post below.
...The above meta-data changes when the feed is shared vs when the image is shared.
If the user does not share an individual image, and simply shares the whole feed, you
will provide the thumbnail image for the Facebook post, and you can specify what thisimage is.
<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="https://reader009.{domain}/reader009/html5/0525/5b07e3f68e" />
<link rel='video_src' href="http://apps.cooliris.com/embed/liveshare.swf?
eventId=423935&showFullscreen=false"/>
<meta name='medium' content='video' />
<meta name="video_height" content="262" />
<meta name="video_width" content="420" />
<meta name="video_type" content="application/x-shockwave-flash" />
If an image is shared, we include the mediaid flashvar in the embed code to point to the right
image. Please view the Cooliris embed code below, and notice how the text in blue below will
dynamically change depending on the image that is shared. :
<object id="ci_25733_o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000" width="884" height="419">
<param name="movie" value="http://apps.cooliris.com/embed/liveshare.swf"/>
<param name="allowFullScreen" value="true"/><param
name="allowScriptAccess" value="always"/>
<param name="bgColor" value="#000000" /><param name="flashvars"
value="eventid=423935&mediaid=35148" />
<param name="wmode" value="transparent" />
<embed id="ci_25733_e" type="application/x-shockwave-flash" src="http://
apps.cooliris.com/embed/liveshare.swf" width="884" height="419"
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 12/18
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.
<object id="ci_25733_o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000" width="884" height="419">
<param name="movie" value="http://apps.cooliris.com/embed/
liveshare.swf"/>
<param name="allowFullScreen" value="true"/><param
name="allowScriptAccess" value="always"/>
<param name="bgColor" value="#000000" /><param name="flashvars"
value="eventid=423935" />
<param name="wmode" value="transparent" />
<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'];
}
?>
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 13/18
<!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" />
<!--BEGIN: Meta-data for facebook embedding-->
<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 . '"/>';
}
?>
<meta name="video_height" content="262" />
<meta name="video_width" content="420" />
<meta name="video_type" content="application/x-shockwave-flash" />
<!--END: Meta-data for facebook embedding-->
</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">
<object id="ci_25733_o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000" width="800" height="600">
<param name="movie" value="http://apps.cooliris.com/embed/
liveshare.swf"/>
<param name="allowFullScreen" value="true"/><param
name="allowScriptAccess" value="always"/>
<param name="bgColor" value="#000000" /><param name="flashvars"
value="eventid=423935&mediaid=<?php echo $mediaid; ?>" />
<param name="wmode" value="transparent" />
<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">
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 14/18
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 15/18
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:
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 16/18
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/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 17/18
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]
8/8/2019 Liveshare Documentation Full
http://slidepdf.com/reader/full/liveshare-documentation-full 18/18
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.