Documentos de Académico
Documentos de Profesional
Documentos de Cultura
1. BACKGROUND
2. GETTING STARTED NOW
3. EMBEDDABLE COOLIRIS MEDIA WALL FOR WEBSITES
4. JUMBOTRON
5. MODERATION
6. (OPTIONAL) DRIVE TRAFFIC BACK TO YOUR SITE FROM FACEBOOK POSTS.
PHP Syntax of an example page.
7. CUSTOM ASSETS
8. MARKETING BEST PRACTICES
1. BACKGROUND
This document covers the process for implementing Liveshare products by Cooliris. It begins
with an overview of the whole program, followed by a description of the products used. The
Liveshare mobile application represents the core element of the whole Liveshare experience.
However, this document will guide you through the implementation of all Liveshare components,
also describing the use of the website/facebook, jumbotron and moderation elements.
EMBEDDING ON A WEBSITE - The process is extremely simple. Please paste this code to
your site:
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.
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 - Static
FBML”. 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"
swfsrc='http://apps.cooliris.com/embed/liveshare.swf?
&cellSpacingX=0.1
&cellSpacingY=0.1
&numRows=3
&eventId=340,341
&backgroundImage=http://yourbackgroundimage.jpg
&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&src=http://
farm6.static.flickr.com/5122/5283794306_a79c164db2.jpg'
width='500' height='385' />
<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.
6. 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!
7. 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”.
If you have run into any issues or have any questions, please contact preston@cooliris.com. For
further documentation on customization for your Liveshare wall, visit http://www.cooliris.com/developer/
documentation/.
4. JUMBOTRON
(Live event only)
KEY INFORMATION
The jumbotron/large screen display simply requires you to connect a laptop to your video board.
Then, you just go to this URL in your browser and leave your computer alone.
http://preston2.public.cooliris.com/jumbotron/?eventId=597497
This URL is the web address for the jumbotron for event id 597497. I have sent you the event
ids for all your events. Simply add that number after the “...jumbotron/?eventId=”
You will have to login with the email address we provided to you and “feature” 6+ photos before
you will see photos in the stream. “Featuring” photos is mentioned in the next section.
(OPTIONAL) CUSTOMIZING THE APPEARANCE - You will provide Cooliris the needed assets
to create the branded experience you are looking to create. Example here:
(OPTIONAL) ADVERTISEMENTS
You can setup ads to work with the jumbotron. Please send Cooliris the assets and destination
links through email 2 weeks before launch. The jumbotron pulls in a separate feed composed
solely of advertisements, and displays according to the logic set in a configuration file.
5. MODERATION
The information below describes the process for using the photo moderation interface, which
allows a moderator to have control as photos are uploaded from users in the venue in real time.
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. They
will 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.
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.
TROUBLESHOOTING
If an error alert pops up, or a tab seems obviously wrong (The count shows there are pictures
left, but there's none showing in the UI), reloading the page will return it to the correct state.
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.
Table of Contents
THE TERMINOLOGY
THE PROCESS
LIVE EXAMPLE
IMPORTANT NOTES OF FUNCTIONALITY
PHP Syntax of an example page.
THE TERMINOLOGY
1. For each partner event, Liveshare has a unique event id. For the purposes of this
discussion let’s assume your event has the event id 423935.
2. For each picture taken, Liveshare associates a unique media id with that picture. For the
purpose of our discussion, let’s say we are talking about a particular picture with media
id 35148.
*use the colored numbers above as a guide through this document. Blue is the event id and red
is the media id.
THE PROCESS
The process is simple.
1. You will put a Cooliris Liveshare wall on a page on your site (e.g., http://
www.yoursite.com/photos ).
2. You will use php to create your HTML page to ensure that the link back to your page
goes to the correct image that is ‘zoomed’ in the Cooliris Liveshare photo wall. This php
syntax is given below. You will need a knowledge of HTML and PHP (or any other
server-side language) to incorporate this functionality successfully.
3. As a part of that page, you’ll add correct metadata to your page. Information can be
found here http://developers.facebook.com/docs/share under Sharing Rich Media.
This metadata is included in the code below. This ensures that when the user shares
to Facebook, the Cooliris wall can open within the facebook page, which is a great
experience for the user, and a hallmark of the Liveshare experience.
a. You’ll need the correct thumbnail image as part of the metadata. If you are
sharing a particular media id, you will need the url for that particular media
id. Here’s how you get it for an particular media id. Hit the following url: http://
www.cooliris.com/mobile/products/liveshare/getmedia/?mediaid=35148 Pass on
the correct media id. The url should redirect to an appropriate image url.
4. Important note: before the functionality will work, you will need to tell us the url (e.g.,
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 EXAMPLE
Here’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://preston2.public.cooliris.com/
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.
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):
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 this
image is.
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. :
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.
<?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" />
</head>
<br/>
<div id="cooliris-content">
<div id="inner">
</body>
</html>
7. CUSTOM ASSETS
This section lists the specs of all the possible custom assets you can incorporate into the
Liveshare experience across the jumbotron, your website gallery, your Facebook fan page
gallery.
Jumbotron
Main logo asset - the KISS asset at the top left (around 117x114): http://gaurav.public.cooliris.com/
concert/images/logo_kiss.png
Sponsor logo assets - the Dr. Pepper asset at the bottom left (around 76x50): http://
gaurav.public.cooliris.com/concert/images/logo_drPepper.png
Main logo asset - the KISS asset at the top left (around 400x300). Example:
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.
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.
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 seats
3. 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
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.