Facebook Contest - Part 2

Introduction

Congratulations on choosing the New Spark Media Facebook UGC Contest!

The UGC contest is fully functional, feature-rich interactive Facebook Canvas Application that enables you to provide an engaging multimedia experience for your users. This application includes everything you need to collect and publish user-generated content and conduct a contest with multiple phases, secure voting and social sharing.

While the UGC Contest can be completely customized, it can also be branded and deployed very quickly - it is a fully functional website out of the box. This documentation assumes a basic design implementation. There are few key concepts that you should understand in order to prepare your deployment and you should review this documentation site before you dive in.

See how it works

If you are having Filemobile perform a simple personalization of the contest application, you should check out the checklist of deliverables that we've created.


Quick Start Guide

Skinning Guide

Your contest was likely installed for you, and may also be configured. Here is a quick run-down of everything you need to do to get the Contest loaded up into a browser error-free:

  1. Read the System Overview
  2. Set up Responding Domains
  3. Create Channels
  4. Configure the Facebook App Settings
  5. Connect your Facebook App to your company's Fan Page
  6. Configure Global Variables
  7. Configure the contest Phases
  8. Edit Email Templates
  9. Set up Voting
  10. Set up the Webcam Recorder


Next, you'll want to make it look your own:

  1. Create the images in this list
  2. Using these PSD files
  3. Edit the CSS
  4. Change form fields


System Overview

Media Factory has the features and tools to power your UGC Contest. The following topics will help you learn more about how you can use Media Factory to get your project up and running.

Watch the New Spark Media Platform overview video

Templates

All Media Factory applications consist of the following types of templates:

TypeDescription
Wrapper templatesThe main wrapper includes the HTML file headers, meta and content to be included on every page of the site. Other wrappers can be XML, text only, HTML email, etc. All application templates are assigned a wrapper.
Application templatesThe "meat" of the application. Application templates are assigned URLs and contain the code specific to each page, for example: /home, /profile, /entry, etc. There are also sub-templates that are not assigned URLs but are instead called from within application templates with parameters using the <fm:Include> component.
CSS stylesheetsAn application can contain many stylesheets that are loaded in sequence from the global.css stylesheet by /services/cssloader which is optimized for performance cache. Tip: During development, put a copy of your stylesheet in your assets folder for quicker updates.
Email templatesSimilar to application templates, these are all the emails that the system is going to send out for you. There is more information on email templates in the developer docs.


Editing Templates

The Media Factory CMS includes a basic template editor that uses file locking and records that last edit by time and user. The editor is accessed via the applications tab in Media Factory. The web-based editor may not provide an ideal experience for a developer working for many hours on customizing the application. If you prefer a desktop editor experience, you will need to configure WebDAV for Media Factory. The instructions can be found in the developer documentation.

Caution: Please note that WebDAV for Media Factory is beta, and while it is well used by many developers it can be unpredicatable in some configurations.

Caution: WebDAV for Media Factory does not support file locking, so be careful not to overwrite other developers if you are working in a group.

Caution: WebDAV for Media Factory does not support time and user stamping.

Tip: For in-depth template code documentation, please visit https://docs-platform.newspark.ca.

Backups

Backing up your Contest is easy.

If you plan on making changes to an application (live or staging), we recommend you first make a backup. Inside the Application click "Backup and Restore". On this page, on the left hand side, change the filename field (something like "myappname_todaysdate" works well) and click "Download". This will download an XML file of all the templates and translations in that app. This is a great way to move your staging application changes to the live application. If something goes wrong, or you want to update a live app with the staging version, simply restore that XML file. On the right side of the same page, click "browse", find that XML backup, and click "Restore".

It is recommended that you have two applications for each project. A live app and a staging app. The live app will contain your custom URL(s) (http://www.mydomain.com/) and the project.fm domain (myappname.projects.fm) and will be what the the world sees. The staging app will only need a projects.fm domain (staging.myappname.projects.fm) and it's where you should do all your development. And only after testing should you backup and restore the staging app to live.



Assets

Assets are the static files that your application uses such as images, custom JavaScripts, custom CSS or anything else you might need.

There are two ways to manage your assets: the Asset Manager web interface in New Spark Media Platform and via WebDAV.

The Asset Manager can be accessed via Applications > Assets in Media Factory. This basic interface is limited to uploading one file at time, whereas WebDAV allows batch uploading using drag and drop.

Note the two fields highlighted above: Template URL and Absolute URL. The absolute URL is the actual path to the image which MUST be used in the template application - relative URLs will not work. The Template URL makes use of the {$assetbase} variable, which renders the base path to your assets. So, when placed in a Media Factory template, both of these strings will render the same URL path.

Why would we do such a thing? The first and most important reason is that your assetbase URL can change if you choose to enable secure HTTPs on your project. Recent changes in Facebook now require all apps to be HTTPS, and if you used {$assetbase}, all your URLs can be updated at once. Another benefit is portability across projects, each of which have their own asset base URLs.



System Updates and Application Upgrades

The Media Factory system consists of three main components: the New Spark Media Platform CMS, Applications and the API. Each are handled differently with respect to upgrades.

ComponentDescription
Media FactoryThe back-end system, fully hosted by Filemobile. Upgrades happen regularly and automatically following emailed release notes that are also available at the Developer Portal and Twitter. These upgrades do not affect the front-end community website.
Application - JavaScriptsOur static JS files are upgraded with bug fixes automatically and tested for backwards compatibility. Major new releases of the application use new JS files. This is rare, and implications should be discussed if a major application upgrade is requested. It is highly recommended not to download and edit our static JS files. Better to create a new JS file for your functions or submit a feature request / support from Filemobile.
Application - HTML, CSS and FMLThe front-end website, hosted by Filemobile and customized by you. We’ve made efforts to keep the application as modular as practical to simplify upgrades (ie. sub templates) but this can be challenging if the application has been heavily customized. We recommend creating a separate CSS stylesheet for your custom styles.
APIThere is one version of the API. Web services are regularly extended and are tested to ensure backwards compatibility. Changes to web services should not affect any live applications. In rare cases where an interruption may occur, we will notify you via the release notes, Media Factory email list and Twitter.

â–² Back to Quick Start Guide



Configuration

Responding Domains Setup

One of the first things that you will likely ask yourself is, "How do I see my Facebook app?" For viewing your website as a Facebook canvas app, you will have to first set up a responding domain. By default, the application has probably been set up on a URL similar to http://your-app.projects.fm. This URL is configurable in the Settings section of your application. You will have to then use this domain to setup your Facebook App.

First, visit the application settings for your application:

Domains are configured on the first tab: General.

Tip: To use your own domain, create a CNAME to www.filemobile.com and enter your domain in the Application Settings section. Media Factory takes care of the rest.

On the General tab, you can change the name of the application and edit the responding domains. You can also add additional domains to the list. For example, if you are hosting a website in multiple languages, you would configure on URL for each language with a corresponding language parameter beside the domain name (en). When that URL is requested, the application is automatically displayed in the appropriate language. For more information on the translator, see Translation below.

FieldDescription
Application nameThe name of the application. Tip: Using the URL as the Application name makes it easier to identify in lists and in WebDAV environments.
Main application domainThis domain name will be used to determine links to your application, in for example RSS feeds. It must match one of the responding domains below. Do not include 'http://'.
Responding domainsAdd in any subdomains (or additional domains) and languages that should link to your application. The second field is a 2-letter ISO countrycode for the translated language you want to use for this domain. Do not include 'http://'."
GMaps keyThe GMaps Key field is only used in legacy, pre-3.0 applications using the deprecated Google Maps API V2. Newer apps don't require this key, and this field can be left blank. You can still get a key at http://code.google.com/apis/maps/signup.html
FB App IDEnter the App ID and Secret keys that are associated with that domain. For more information on setting up Facebook, see Facebook Setup below.
FB SecretEnter the App ID and Secret keys that are associated with that domain. For more information on setting up Facebook, see Facebook Setup below.
Report Offensive EmailWebsite users can report media and comments as offensive. These reports are sent to the email address entered here.


â–² Back to Quick Start Guide



Channels Setup

Channels are used to keep different types of media separate. In this case, you'll want to separate entries and comments. In addition, you'll want to organize your finalists and winners so they can be displayed separately. In the example below, we are also keeping entries from multiple languages separate so they are only displayed on their respective sites.

Channels can be found in the Media > Channels section of Media Factory.

You should set up at least four standard channels:

ChannelDescription
EntriesThis is where all the uploaded entries from users will reside. If you are planning a multilingual website, you can create sub-channels in order to keep the content separate. For each language of the website, the content channel must be configured in the Global Vars.
CommentsThis is where all the comments will reside. If you are planning a multilingual website, you can create sub-channels in order to keep the comments separate. For each language of the website, the content channel must be configured in the Global Vars.
FinalistsThis is where all the entries selected as finalists will reside. When the contest phase changes and it is time to show the contest finalists, entries from this channel will be displayed on the Home page gallery.
WinnersThis is where all the winning entries will reside. When the contest phase changes and it is time to show the contest winners, entries from this channel will be displayed on the Home page gallery.


Tip: If want to include Finalists mixed in with the entries gallery, make that channel a sub-channel of Entries. If you want to include Winners mixed in with Finalists, make that channel a sub-channel of Finalists.

To create a new channel, follow these steps:

  1. Inside New Spark Media Platform, hover over "Media Manager" and click on "Channels".
  2. Click "Add Channel".
  3. Fill in the name field with "Content". When you click on the shortname field, it should autofill with "entries".
  4. No other information is required at this point.
  5. Click "Create".
  6. The new channel should now show up in the list. Note the id number. You will need it for setting up the global variables.
  7. Repeat these steps for the other channels.


Next, you should configure the Content channel to send the appropriate moderation emails. Also make sure that the Project Settings are correct.

From the drop-down menus, select the appropriate Approved moderation email and Denied moderation email. These emails should be included in your UGC Contest application.

â–² Back to Quick Start Guide



Configure the Facebook App Settings

This section explains how to get your App ready for integration into Facebook.

For your app to work inside Facebook, you'll have to first create a Facebook Application.

  1. Login to the Facebook developer section and create a new application.


  2. You should arrive in the Settings > Basic section, where you can edit your app icon and name. These elements show up when users login to your site with Facebook for the first time.


  3. In the App Domain section, add in the domain URL of your app which can be found in the Responding Domains section in the App Settings in Media Factory.
  4. In the Website section below, enter the public URL of your UGC Contest website. If you have more than one URL, you'll need multiple Facebook Apps for login.
  5. You will have to enter the canvas URL of your app in the App on Facebook section. This will be the same as your App Domain, except that you will have to add "http://" for the Canvas URL and "https://" for the Secure Canvas URL
  6. Copy the App ID and App Secret keys and paste them into your UGC Contest application settings. See Responding Domains above.
  7. Go to the Settings > Auth Dialogue section. Here, you can customize how the Auth Dialogue looks like by entering the details you need to show on it.


  8. In the Configure how Facebook refers users to your app section, make sure you enter email, publish_actions in the "User & Friend Permissions field. In the "Extended Permissions" field, you must enter in publish_stream, offline_access.
  9. Go to the Settings > Advanced section and make sure that you have a support email entered. This is a Facebook requirement.




Tip: You'll need to modify this Facebook application with your live URLs!

When a user submits an entry or adds a comment, they are prompted to publish it to their Facebook timeline. You can change the default text that appears in the "entry" category of the Translator.

VariableDefaultNotes
facebookApp on Filemobile's UGC ContestThe text that comes after the title when submitting a new entry.
facebookCaptionComment onWhen submitting a comment, this goes next to the title of the media the user is commenting on.
facebookCommentYour Facebook comment isWhen adding a new comment
facebookEventuploadedThe text that comes before the entry title when uploading.


Tip: Create a Facebook alter-ego for testing

You are going to be testing the behaviour and copy of messages shared to Facebook. In order to avoid annoying your friends and spoiling the surprise for your sponsor, create a second or third Facebook account. Connect your alter-egos so you can see what the feed messages will look like.

â–² Back to Quick Start Guide



Connect your Facebook App to your company's Fan Page

If you want to link your Company's fan page to your new Contest, you will have to go to the following link:

  1. Go to https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL where YOUR_APP_ID is your Facebook app ID and YOUR_URL is your responding domain URL. For eg: https://photocontest.projects.fm/
  2. Here, you will be asked to add your App to any of the pages you administer.
  3. More info can be found here - https://developers.facebook.com/docs/appsonfacebook/pagetabs
  4. Click here to learn about how to implement a fan-gate for your tab app.

â–² Back to Quick Start Guide


Translation

The Media Factory application template system includes a powerful translation tool. Each application has its own table of translations that can be found in the Translator section:


Translations are broken out into categories, and are made up of keywords and associated strings. The usage syntax in a template is {%category:keyword}. The template will render the appropriate translation based on URL, which is configured in Responding Domains above.

More detailed information can be found in the developer documentation, or watch this quick video:

â–² Back to Quick Start Guide

Global Vars

In addition to managing language translations for multilingual websites, the Translator tool also manages global variables.

Open the translator section of the application inside Media Factory and open the var section:


The following table describes each of these variables, and identifies which ones MUST be changed:

variablechange requiredvaluesnotes
allowedFiletypesCommentno['1','2','3','4']Sets the type of comments that will be allowed: 1=image, 2=video, 3=audio, 4=text
allowedFiletypesEnterno['1','2','3','4']Sets the type of files that can be selected by the uploader: 1=image, 2=video, 3=audio, 4=text
anonymousCommentsno'true' or 'false'Select whether your contest will allow anonymous comments
appNameyesFilemobile ContestUsed by Facebook dialogue boxes
appUrlyeshttps://photocontest.projects.fmUsed for generating paths in the Open Graph tags
canvasUrlyesphotocontestYour Facebook app's Namespace.
channelCommentsyesId of the 'Comments' channel you createdSets the base channel for the comments. If this value isn't changed, the site will break
channelEntriesyesId of the 'Entries' channel you createdSets the base channel for the entries. If this value isn't changed, the site will break
collectionEditorsPickyesId of the 'Editors Choice' collection you createdSets the channel the featured entry. If this value isn't changed, the site will break
enterDescriptionno'true' or 'false'Turn on or turn off the maximum character length and display on /enter.
enterDescriptionCountdownno'true' or 'false'Display the characters remaining ('true'), or show 'current/maximum' ('false')
enterDescriptionLengthnoint > 0Maximum number of characters allowed in the description on /enter
facebookCommentsno'true' or 'false'Setting this to 'true' will enable Facebook comments for the Entry pages
fbAppUrlyeshttps://apps.facebook.com/photocontestEnter the full path of your Facebook app here
fblangnoen_USUsed to tell Facebook the language of our site
fbPageNameyesFilemobileEnter your company's Facebook page username here. If you do not have a username, enter the page ID here in the format "pages/Filemobile/21049493488".
file_size_limitnoint > 0 in MB (default 500)The maximum file size accepted by the uploader. Can be up to 1000MB, but very large files can negatively impact user experience.
file_upload_limitnointegerThe maximum number of files that can be uploaded at once
imageResizeUrlLivenohttp://cimg.filemobile.comThe address of the service to fetch resized images. FM support only, do not change.
imageResizeUrlStagingnohttp://mf.staging.filemobile.comThe address of the service to fetch resized images. FM support only, do not change.
langno'en', 'fr', etc...Language code used to tell our application how to render multilingual content
languageUrlnohttp://fr.website.projects.fmThis default is empty so that the language toggle will not show if not needed. To enable the language toggle, enter and save a valid url to the alternate language of your application. To change the text of the link, edit menu:language in the translator.
locationnoUSUsed to specify whether states or provinces are shown.
mapModerationno'approved' or 'notdenied''approved' will only show approved content, 'notdenied' will show approved and unmoderated content on maps
medialistCommentFiletypeno1,2,3,4Sets the type of comments that will be displayed: 1=image, 2=video, 3=audio, 4=text
moderationCommentsno'approved' or 'notdenied''approved' will only show approved comments, 'notdenied' will show approved and unmoderated comments
moderationMediano'approved' or 'notdenied''approved' will only show approved media, 'notdenied' will show approved and unmoderated media
multimediaCommentsno'true' or 'false'Select whether your contest will allow multimedia comments
multimediaUploadsno'true' or 'false'Select whether your contest will allow multimedia entries
noResultsTagsnoNo tags availableUsed to specify what text should show if an entry does not have any tags associated with it
shareEmailyesno-reply@yourdomain.comWhen people send email to each other from within the contest, this is the "from" address
singleMapEntryno'true' or 'false'Setting this to 'true' will display only the current entry on the map of the entry page. Setting it to 'false' will display the current entry along with all the entries located geographically close-by.
siteTitleyesContest 3Your website's name goes here. This is the text that is displayed in the title bar of the browser.
subChannelUploadno'true' or 'false'If you have entry sub channels you'll want to set this to 'true' so users can choose what category their entries belong to. If you don't have sub channels, leave it set to 'false' so the 'Entries' channel will be automatically chosen.
tagCloudModerationMediano1Sets the moderation filter for tag clouds.
transcoderSDnoint > 0This is the transcoder profile ID for videos. The default is 22, but you can also set up custom transcoder profiles.
transcoderThumbnoint > 0 (default 15)This is the transcoder profile ID for video thumbnails. Change this if you have created a custom transcoder profile for watermarks or other effects.
voteSinceno'midnight, -1 hour'You must change this var to reflect the voting rules. If your contest is daily voting, choose 'midnight'. If it's hourly, enter '-1 hour'.
webcamCommentno'true' or 'false'Anything other then 'true' will hide the webcam in the comments
webcamUpload*yeswidget id or 'false'Enter your webcam recorder's widget ID here. If you don't want webcam recorded entries, set this to 'false' to hide the webcam and tab on the enter page.

* Note: Webcam upload is beta only.

â–² Back to Quick Start Guide



Contest Phases

The contest application is pre-configured with the following phases, based on our recommended best practices:

  1. Nomination Phase - People can enter the contest by submitting content.
  2. Nominations Closed - Uploading is disabled. People can still register, like, comment and share. Judges select 3-12 finalists in the backend.
  3. Vote Phase - The public votes on the finalists!
  4. Voting Ends - Vote buttons are disabled, and the public is told when to come back to see the winner. People can still register, like, comment and share.
  5. Winner Announced - The winner is celebrated in copy and creative! People can still register, like, comment and share.

The phases of the contest are also configured in the Media Factory translator, under a category called "phases".

Tip: The vote start date is somewhat independent - you can start voting right away if you wish.

variablechange requiredpossible valuesnotes
2entryClosedDateyesJune 19 2012 11:59:59AM ESTSets the date and time that entries into the contest will be closed.
3voteStartDateyesJune 20 2012 12:00:01AM ESTSets the date and time that voting on finalists will start.
4voteEndDateyesJune 26 2012 11:59:59PM ESTSets the date and time that voting on finalists will end.
5announceWinnerDateyesJune 29 2012 12:00:00AM ESTSets the date and time that you intend to refresh the site and announce the contest winner.
finalistsChannelyeschannel ID (integer)The channel in which you have placed your finalists media submissions.
winnerChannelyeschannel ID (integer)The channel in which you have placed your lucky winning entry.

Tip: Change the dates for testing

Use the phase dates above to move your contest through time. Set dates in the past and future and refresh your app to see what the site will look like at each phase. Don't forget to enter the real dates when you're done! The home page touts for each phase also have to be designed and configured.

â–² Back to Quick Start Guide


Project Settings

Project settings concern configuration that affects all applications, media and users in the project. They can be found under Settings > Project settings in Media Factory:

Below is a table describing the various projects settings:

SettingDescription
Project titleThe title of the project as it appears in the project drop-down menu in Media Factory. If you only have one project, you can't see the drop-down menu.
Media moderationSets the overall rule of whether to ever show unmoderated content in an application. It is recommended to set this to Post, since this allows more flexibility in the application.
Media moderation emailSets the overall rule of whether to ever send moderation email. If you intend to send moderation email - when media is approved or denied - set this to Send by default.
Media moderation email - Approved / DeniedThis the email template that will be sent when ANY MEDIA is approved or denied. This should be set to None. You should set email templates on the channel configuration page, so that you can specify different emails for content uploads and comments.
Group moderation email - Approved / DeniedThis the email template that will be sent when ANY GROUP is approved or denied. You probably won't send these types of emails with the UGC Contest, so leave it set to none.
Event moderation email - Approved / DeniedThis the email template that will be sent when ANY EVENT is approved or denied. You probably won't send these types of emails with the UGC Contest, so leave it set to none.
Storage domainAdd 's3.amazonaws.com/storage.filemobile.com' in here.
Media callback URLSome actions like approve and deny can trigger an XML payload to be posted to this URL.

â–² Back to Quick Start Guide



Project Permissions

Project settings concern configuration that affects all applications, media and users in the project. They can be found under Settings > Permissions in Media Factory:

On this page, check the 'Use HTTPS' setting. This will allow your app to be loaded via an https URL and is required for it to function properly as a Facebook app.



Email Templates

There are a number of system emails that are going to be sent out to your users:

EmailDescription
registrationThe email that will be sent when users first register in the contest. It's plain text by default, but you can use the HTML wrapper to really wow them.
Media Approved (en/fr)This is an HTML email that is sent to the user once their content has been approved by moderators. We've provided you with both an English and French version. Set the appropriate email in the channel configuration.
Media Denied (en/fr)This is an HTML email that is sent to the user if their content is denied by moderators. We've provided you with both an English and French version. Set the appropriate email in the channel configuration.
tellafriendThis is the email that is sent when users click to email a file from the entry page.
lostpasswordThis email contains instuctions and a system-generated link to reset a user's password.

You can customize the copy and graphics in the emails by visiting the Email templates section of your application:

Tip: You can find information on the variables available in the system email templates in the Developer Documentation.

â–² Back to Quick Start Guide



Voting Settings

Voting settings allow you to specify how frequent a user can vote on an entry. By default none of the options are selected, and you MUST select one of them in order to allow users to vote successfully. The latest version of the contest introduces a new workflow that makes it easier for users to vote by simplifying the registration process for voters.

Download Vote Lite information PDF


Below is a table describing the various voting styles available to you:

Voting StyleDescription
Multiple times per media item, once every dayA user may vote multiple times for an entry but this is restricted to only one vote per day.
Multiple times per media item, once every hourA user may vote multiple times for an entry but this is restricted to only one vote per hour.
Once per media itemA user can vote only once per entry throughout the voting phase.
Anonymous voting with reCaptchaA user can vote anonymously and multiple times for an entry. But everytime they have to enter a reCaptcha to to ensure that the vote is generated by a real person. No user login is required for this style. If you require this type of voting, you will need to contact support@filemobile.com.

â–² Back to Quick Start Guide



Webcam Recorder

The webcam recorder is a widget which allows users to record video entries via their webcam, on the contest Enter page. It can be installed and configured on the "Widgets" section of Media Factory:

To install a webcam recorder, simply click on the "Install" button, and you will be navigated to a Widget Details page, where you can further configure your webcam recorder in the following tabs:

  • Info
    1. "Id" is the unique widget ID that represents this webcam recorder and should be saved under the Global Vars keyword "webcamUpload".
    2. "Name" and "Description" fields can be filled to help us identify the webcam.

  • Behavior
    1. You should fill in the maximum length, in seconds a user can record for in the "Recording Length" field.
    2. The "Channel" option, if not checked will always prompt the user to select the channel they wish to upload their recording to. Usually, this option should be checked and you should select the "Entries" channel in the list below.
    3. You can select the page a user is redirected to after they finish recording. Usually this should be set to "/uploadcomplete".

  • Design
    1. Here you can enter the "Welcome and Exit messages" that should appear when the user lands on the webcam recorder page, and when they are done with the recording respectively.
    2. If you want to display your company's logo on the welcome screen of the recorder, paste the logo's absolute URL in the "Logo URL" field.
    3. The "Button colour" and "Background Colour" allow you to customize the colours used on the widget. You can select a colour by clicking on the small circle inside the text field and then by clicking anywhere on the colour selector.

  • Embed
    • You can copy the code from the "STL Embed code" text-area and paste it anywhere on the site you wish to render the webcam recorder.

â–² Back to Quick Start Guide



Design

The Contest can be completely customized in its layout, look and feel. However, using the guidelines found here, you can apply your branding and color scheme to the application in a relatively short amount of time. This section provides a workflow walkthrough with everything you need to personalize the creative in your contest.

The stylesheet base.css includes all the paths to the sprites and some images. Once you've edited the image PSD files, upload your new images to your asset folder.

Tip: A Firefox plugin that is very, very highly recommended is Firebug. It allows you to inspect and modify HTML and CSS in the browser and see the results in real time.



Image List

Below is a table describing the graphic elements that need to be considered when designing your application:

Creative elementDimensionsDescription
tout-1.pngwidth:730pxThe first big graphic people will see on the homepage telling them the contest is open. Touts are the big call-to-action graphics at the top of the home page, below the navigation. You can set a different tout for each phase, so that the users landing on the home page know the current phase. Change the path in the /home template.
tout-2.pngwidth:730pxThe tout for the second phase: Entries are closed, come back to vote when we pick some finalists. Change the path in the /home template.
tout-3.pngwidth:730pxThe tout for the third phase: Vote for the finalists! Change the path in the /home template.
tout-4.pngwidth:730pxThe tout for the fourth phase: Voting is closed, come back later to see the winners! Change the path in the /home template.
tout-5.pngwidth:730pxThe tout for the final phase: Check out the contest winner! Change the path in the /home template.
fangate_tout_unliked.jpg810px by 780pxIf you are implementing a fangate page for your app, this image will show content to users who have not yet liked your page. Change the path in the /fangate template.
fangate_tout_liked.jpg810px by 780pxIf you are implementing a fangate page for your app, this image will show content to users who have already liked your page. Change the path in the /fangate template.
buttons.pngThis sprite is used for the next and previous buttons on the /entry page, gallery pagers, the vote button and most of the clickable elements on the website. Change the path in base.css.
corners.pngThis sprite image is used for the navigation bar background, tab contents background, and the top and bottom of the various boxes. For boxlarge, boxmedium and boxsmall the corners.png has the same bottom and top height, it is the width that will change per column. Change the path in base.css.

Now, put all these images into Asset Manager and update the paths in base.css and /home.



PSD Files

Each sprite PSD contains a layer with information saying what part of the site the image belongs to, and what CSS style uses that part of the image (in case you need to change the CSS height or width). You are free to edit the sprite as much as you want, but the further you stray from the default image sizes and postition, the more changes you'll have to make to the CSS.

To download a PSD, right-click on the link and hit "Save Link As…"

buttons.png

corners.png

tout.png

fangate.jpg



Design Guide

There are some images that can't, or shouldn't, be added to the sprites. These include the homepage tout, gallery thumbnail backgrounds, form element background, loading icon and default thumbnail icons. You can modify these graphics as standalone images, although only several are recommended to be changed. The design team should download the file design_guide.psd below, and use it to design the background, touts, headers and footers in context.

design_guide.psd

Download design_guide PSD


Translating Images

If you are planning a multilingual website, you will most likely have images that are language-specific. Our recommended approach is to create two folders in assets, say "en" for English and "fr" for French. Within each of these folders, place all the images for both of the sites, maintaining the same file names for both.

Now, to render the correct path when the page loads, use the {$lang} variable:

<img src="{$assetbase}/images/{$lang}/tout.png">

On http://english.my-app.projects.fm, this will render <img src="http://assets.newspark.ca/681/images/en/tout.png">


CSS

Included in the application are five CSS files: global.css, reset.css, base.css, facebook.css and comments.css

StylesheetDescription
global.cssThis stylesheet calls the other three CSS files. It is called by our cssloader in the header of the application.
reset.cssThis stylesheet contains a standard browser CSS reset.
base.cssThis stylesheet holds all the layout and design styles specific to the UGC Contest app.
facebook.cssThis stylesheet is an extension of the base.css stylesheet and adds Facebook specific styles wherever necessary. It also overrides any styles that need to be styled differently for the Facebook canvas app.
comments.cssThis stylesheet holds all of the styles for comments.

While you are free to edit any of the CSS as much as you'd like, there are a few things that may be better left alone. Inside base.css, any style that appears before where the sprite included has to do with the overall structure of the site, the three different box sizes and the thumbnail layout. There probably won't be a need to change anything in here except the colours and thumbnail background image URL.

Your design team should complete the form below and return it along with the sprites and custom images.

Download style guide RTF

Download style guide DOC

Forms

When adding custom form fields you should use meta data. To use meta data, make sure the 'name' attribute of the form field has to be 'meta[varname]'. And to access the variable in a <fm:MediaList> use the variable {$$media_metadata.user.varname}

Registration

Adding custom meta data to the register form in the 'sub_inputfields' template

Text input
<li class="label"><label for="meta_title">Title</label></li>
<li><input type="text" class="fmInput required" id="meta_title" name="meta[title]" title="Title"/></li>
Check box (commonly used for newsletter opt-ins)
<li class="label checkbox clearfix">
    <fm:Form_CheckBox name="meta[opt1]" formType="simple" class="left" id="opt1" />
    <label for="opt1"> I want this opt-in</label>
</li>
Select
<select name="meta[title]" class="fmSelect">
    <option value="Mr.">Mr.</option>
    <option value="Ms.">Ms.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Miss.">Miss.</option>
</select>

Upload

Adding custom meta data to the upload form

Create the form elements on /enter.

<li class="label"><label for="meta_animaltype">Type of Animal</label></li>
<li><input type="text" class="fmInput required" id="meta_animaltype" name="meta_animaltype" title="Type of Animal"/></li>

Open the sub_uploader sub-template and within the function upload(), look for the if(page === "upload") statement. You will notice that the code within this conditional helps in collecting some of the relevant upload data such as tags, geo_lat, and meta-data for the uploader. Add in your meta data details.

if($('meta_animaltype')) {
    swfu.addPostParam('meta[user][animaltype]',$('meta_animaltype').value);
}



Sub Templates

The ease of development for this version of the contest application comes from the pre-built sub templates. These sub templates use various FM components, HTML and CSS to create dynamic and customizable code. We've built several sub templates based off popular and often reused features.

You can use these sub templates in the same way that you would use any other component on our platform. By changing the variable values for a sub-template you change the way the sub template renders the components, HTML and CSS that it contains. Simply take the sample code in the examples below or use the Builder Tool to customize the sub template until you get the desired result.

Another great reason to use sub templates is because you can build your own and edit what we've already built. If you find you are using the same snippet of code across multiple pages or even multiple projects, its easy to create a sub template of that code and have a central place to add and edit features (Sub templates do not exist across multiple applications or vhosts. You'll have to copy and paste your code from one application to another).

Unlike most <fm> tags, <fm:Include> requires all the variables to be sent even if they are empty. If you encounter an error that reads "Template variable not found: varname, on line x", it's because the <fm:Include> is missing a variable.

Below you will find a list of all of the pre-built sub-templates we offer and all of the the possible combinations you can use to display your content.


sub_ad

The sub_ads template is used to render ad space inside of the application. You can choose to display a bigbox, leader or text based ad. To control what is actually displayed in the ad space you need to edit the contents of the sub-template itself.

Include code example
<fm:Include name="sub_ad" type="bigbox" />
variablerequireddefaultpossible valuesDescription
typeRequirednull'leader', 'bigbox', 'text' 

sub_comments

The sub-comments template is used to render a list of comments on the page. This template can be used to show comments on a specific media item by providing an appropriate media id or show all comments by providing a media id of 0.

Include code example
<fm:Include name="sub_comments" mediaid="{$$media_id}" filetypes="1,2,4" page="{$$get.page}" pagesize="5" sort="upload ASC" showPager="true" />
VariableRequiredDefaultPossible ValuesNotes
mediaidRequired0 or a valid media idGrabs the comments for the specified media item. The comment list is mainly used on the entry page so {$$media_id} will normally used. However, if you'd like to list comments elsewhere, you can use the value '0' to grab all comments in the vhost
filetypesOptionalnull'1', '2', '3', '4'Allows you to filter by a specific filetype. 1=image, 2=video, 3=audio, 4=text. You can supply multiple values by separating them with comma's, ex. '1,2' will return only images and videos.
pageOptionalnullIntIf you are going to display a pager you should all have 'page="{$$get.page}"' to make sure the pager gets the correct page number.
pagesizeOptional30Int, 1 to 200The number of media-items per page. A maximum page size of 200 is enforced, attempting to set this to anything greater will cause the page size to revert to 200.
sortOptionalupload DESC'upload DESC', 'upload ASC', 'rating DESC', 'rating ASC', 'approvedcomments DESC', 'approvedcomments ASC', 'notdeniedcomments DESC, 'notdeniedcomments ASC', 'votecount DESC', 'votecount ASC'.Multiple sort fields may be specified separated by commas, eg: sort="commentcount DESC, upload DESC"
showPagerOptionalnull'true' or 'false'The value 'true' will show a pager, any other value will not display anything
reportOptionalnull'true' or 'false'The value 'true' will show a report link, that can be used to report the comment to the site admin. Any other value will not display anything
commentStyleRequireds3s1, s3This is the class applied to the comments. Each class changes the layout for comments.

The sub_gallery template is used to render a list of media items and is probably the most common template that is used. By changing the values of the columns and thumbtype attributes you can completely change the layout of your site without editing any CSS or HTML.

Include code example
<fm:Include name="sub_gallery" columns="two" pagesize="12" thumbtype="wide" transcode="12" sort="{$$get.sort}" showPager="true" page="{$$get.page}" collection="{$$get.collection}" channel="{$$get.channel}" user="" startTime="" query="" />
variablerequireddefaultpossible valuesnotes
pagesizeOptional30Int, 1 to 200The number of media-items per page. A maximum page size of 200 is enforced, attempting to set this to anything greater will cause the page size to revert to 200.
thumbtypeOptionalwide'wide', 'tall', 'image'Determines the layout of the thumbnails. All thumbs use the same HTML, only the CSS changes.
transcodeOptional1211, 12 or any custom transcoder ID
sortOptionalupload DESC'upload DESC', 'upload ASC', 'rating DESC', 'rating ASC', 'approvedcomments DESC', 'approvedcomments ASC', 'notdeniedcomments DESC, 'notdeniedcomments ASC', 'votecount DESC', 'votecount ASC'.Multiple sort fields may be specified separated by commas, eg: sort="commentcount DESC, upload DESC"
showPagerOptionalnull'true' or nullThe value 'true' will show a pager, any value other will not display anything
pageOptionalnullIntIf you are going to display a pager you should all have 'page="{$$get.page}"' to make sure the pager gets the correct page number.
collectionOptionalnulla valid collection ID
channelOptionalnulla valid channel ID or channel short name
userOptionalnulla valid user ID
startTimeOptionalnullUsually you should use YYYY-MM-DD HH:MM:SS format, but things like 'yesterday' will also work.This attribute filters by the upload date. No media before the startTime will be returned.
queryOptionalnullAny phrase you would like to search for.Media will return if the title, description or tags match the phrase.
filetypesOptionalnull'1', '2', '3', '4'Allows you to filter by a specific filetype. 1=image, 2=video, 3=audio, 4= ext. You can supply multiple values by separating them with comma's, ex. '1,2' will return only images and videos.

sub_inputfields

The sub_inputfields template is a easy way to turn on and off various popular register form fields. If you want to add custom form fields, like metadata, feel free to edit the sub template.

Include code example
<fm:Include name="sub_inputfields" email="true" password="true" username="false" firstname="true" lastname="true" address="true" city="false" province="false" country="false" postalcode="false" birthday="false" gender="false" phone="false" cellphone="false" captcha="true" newsletter="true" rules="true" map="true"" />

sub_jsgallery

The sub_jsgallery template renders a media gallery in a tabbed interface. This template allows you to display media based on differing criteria inside of the same space on any page. You might for example display the Most Recent, Most Commented and Most Viewed media under each tab.

Include code example
<fm:Include name="sub_jsgallery" id="galleryone" tab1="Land" tab2="Space" tab3="Water" tab1sort="upload DESC" tab2sort="hits DESC" tab3sort="{%var:moderationComments}comments DESC" tab1channel="592" tab2channel="596" tab3channel="594" tab1collection="" tab2collection="" tab3collection="" tab1filetypes="" tab2filetypes="" tab3filetypes="" columns="two" pagesize="6" thumbtype="wide" transcode="12" />
variable(s)requireddefaultpossible valuesnotes
idRequiredstringA unique identifier that is used to create the gallery. If you want to have multiple JavaScript galleries on a single page, you'll need to set different ids.
tab1
tab2
tab3
RequiredstringThe name of the tab. If there is no value passed the tab and the tab contents are not displayed.
tab1sort
tab2sort
tab3sort
Optionalupload DESC'upload DESC', 'upload ASC', 'rating DESC', 'rating ASC', 'approvedcomments DESC', 'approvedcomments ASC', 'notdeniedcomments DESC, 'notdeniedcomments ASC', 'votecount DESC', 'votecount ASC'.Multiple sort fields may be specified separated by commas, eg: sort="commentcount DESC, upload DESC"
tab1channel
tab2channel
tab3channel
Optionalnulla valid channel ID, or channel short name
tab1collection
tab2collection
tab3collection
Optionalnulla valid collection ID
tab1filetypes
tab2filetypes
tab3filetypes
Optionalnull'1', '2', '3', '4'Allows you to filter by a specific filetype. 1=image, 2=video, 3=audio, 4= ext. You can supply multiple values by separating them with comma's, ex. '1,2' will return only images and videos.
pagesizeOptional30Int, 1 to 200The number of media-items per page. A maximum page size of 200 is enforced, attempting to set this to anything greater will cause the page size to revert to 200.
thumbtypeOptionalwide'wide', 'tall', 'image'Determines the layout of the thumbnails. All thumbs use the same HTML, only the CSS changes.
transcodeOptional1211, 12 or any custom transcoder ID

sub_map

The sub_map template renders media based on its geographical location using Google Maps technology. In order to see media on a map you'll need to make sure that geographic data was captured when the file was uploaded to Media Factory. To learn more see our geo location documentation.

Include code example
<fm:Include name="sub_map" lat="51N" long="92W" zoom="3" width="100%" height="350px" search="true" />
variablerequireddefaultpossible valuesnotes
latoptional52NInteger better 0 and 180 plus a compass direction, N or SThe latitude of the center of the map.
longoptional92WInteger better 0 and 180 plus a compass direction, E or WThe longitude of the center of the map.
zoomoptional3Integer better 1 and 14The larger the number, the closer the zoom.
widthoptional100%Integer plus '%', 'px' or 'em'Sets the width of the map using CSS.
heightoptional300pxInteger plus '%', 'px' or 'em'Sets the height of the map using CSS.
searchoptionalnull'true' or nullThe value 'true' will show the map search box, any value other will not display anything.

sub_rightrail

The sub_rightrail template allows you to include additional information like recent comments, a tag cloud and even a custom box to the right side of the main contents of the home page.

Include code example
<fm:Include name="sub_rightrail" ad="true" recentComments="true" tagCloud="true" mediaGallery="false" custom="false" />
variablerequireddefaultpossible valuesnotes
adOptionalnull'true' or nullIf true, this adds the bigbox type of sub_ad to the right rail.
recentCommentsOptionalnull'true' or nullIf true, a box showing a list of the most recent comments is added to the right rail.
tagCloudOptionalnull'true' or nullSetting this to true adds a box containing a tag cloud with the most common tags from your contest.
mediaGalleryOptionalnull'true' or nullIf you wish to show a list of media in the right rail, set this to true.
customOptionalnull'true' or nullIf you wish to show any custom data in the right rail, set this to true. You will also have to add your custom data in the "custom include" section of the sub_rightrail template.

sub_share

The sub_share template allows you to include social networking options for user to share the media they submit and view through the contest.

Include code example
<fm:Include name="sub_share" mid="{$$media_id}" mediatitle="{$$media_title}" url="http://{$$vhost}/{$$basepage}/{$$subpage}" email="true" facebook="true" delicious="true" digg="true" twitter="true" />
variablerequireddefaultpossible valuesnotes
midrequireda valid media IDIf included in a media list or on an entry page
mediatitlerequiredCurrent media's titleThis title of the media to be shared.
mediadescriptionrequiredCurrent media's descriptionThe description of the media to be shared.
urloptionalcurrent URLhttp://yoururl/basepage/subpageWhatever URL you want the share to link back too.
emailoptionalnullnull or 'true'Allow the user to share via email
stumbleuponoptionalnullnull or 'true'Display the StumbleUpon share button. Any value other than 'true' will hide the button.
googleplusoptionalnullnull or 'true'Display the Google +1 share button. Any value other than 'true' will hide the button.
pinterestoptionalnullnull or 'true'Display the Pinterest "Pin it" share button. Any value other than 'true' will hide the button.
twitteroptionalnullnull or 'true'Display the Twitter share button. Any value other than 'true' will hide the button.
linkedinoptionalnullnull or 'true'Display the Linkedin share button. Any value other than 'true' will hide the button.
facebookoptionalnullnull or 'true'Display the Facebook share button. Any value other than 'true' will hide the button.
deliciousoptionalnullnull or 'true'Display the Delicious share button. Any value other than 'true' will hide the button.

0 comments

Be the first to comment on Facebook Contest - Part 2.

Add a Comment

  • captcha