FB Image Contest Users Manual
Table of contents Description.. 3 Step by step installation... 5 The administration interface.. 10 Creating a new contest... 13 Creating a Facebook Application.. 19 Adding images to your contest.. 32 Managing your users. 36 2
Description First of all, let me thank you for your purchase of FB Image Contest (mentioned as FBIC from here on). This is a Facebook application which can run inside Facebook as a Facebook Page Tab iframe Application or outside of it, and is fully mobile responsive. To use this application you will need a webserver with PHP and MySQL support and a domain name with an SSL certificate. The SSL certificate is required by Facebook since they only allow secured domains (https://) to be included as an iframe. You can decide not to use it inside a Facebook Page Tab, and in that case you do not need an SSL cert If you add your contest to a Facebook Page then there will be displayed a landing page with a likegate (if likegate is enabled). Once a user connects to the app, they are taken to the main app page outside of Facebook (to ensure this runs ok on mobile). The landing page (or the main page if outside Facebook) will be displayed only for users who are not connected to your contest, revisiting your link after connecting will take them directly to the gallery. You will need a Facebook account with a pre created Facebook Page and a Facebook Developers account. You will also need the installation archive of FBIC. The application has a built-in automatic updater from where you 3
can upgrade to the latest version anytime with only two clicks, if we release updates. Please note that mobile devices don t allow you to use Facebook Applications but you can access the administration interface of this application anytime from your mobile device since it is 100% mobile friendly. 4
Step by step installation 1. Extract the FBIC installation archive to your hard drive with WinZip or WinRAR and upload the files included with an FTP Client (Ex. FileZilla, CuteFTP, etc.) to your webserver. You can upload it to the domain root, a subdomain s root or even to a subfolder. I will use a subfolder in this example since that is the suggested location. This way, you can use the domain root as the main sales page of the application. 5
So for this example, the files are uploaded to http://mydomain.com/fbic/ 2. Using your cpanel or any server administration interface you may have, create a new MySQL database and a new MySQL user and add the user to the created database with ALL PRIVILEGES. Note these details down, since you will need them during the installation of the application. Here is a quick video tutorial about how to create a new database, a new user, and add the user to the database: http://screencast.com/t/awff4rnzwhku 6
3. Using your favorite browser, navigate to your files admin directory. In my example this will be the following: http://mydomain.com/fbic/admin/ The FBIC installation wizard should appear which will guide you through the installation process. On the first screen you will see some welcome text. Read it and when you have everything ready click on the Next button in the bottom right corner. The error and success messages are displayed in the top right corner, so pay attention to them during the installation process. 4. On the Database Details screen, you have to enter the MySQL database and user details that you have created in the 2 nd step. Enter your MySQL database name, MySQL Username and MySQL User password. The hostname is usually localhost on most servers but if you have a given hostname than please use that one in the first field. When the form is completely filled you can click on the Next button in the bottom right corner. The installation will 7
automatically check if your details are correct, so if you are sent back to this screen with an error message it means that your details are incorrect. Please make sure that the details are correct and click Next again till you reach the next screen. If you keep getting errors about your details here, it is not an issue we can assist with you need to ask your webhost the correct details for your database as we have no access to that, it is entirely unique to you. 5. The next screen is the Site Details screen where you can define your administration details. Please note that the administrator which you create now is the main administrator of this installation. This user can manage all the applications, users and other administrators of this 8
installation so please choose a secure password. Fill the first 5 fields with the administrator details, your full name, your email address, your desired username and the two password fields with the same secure chosen password. The next field is the Brand Name which will be displayed on the login screen and sitewide in the administration area in the top right corner as a logo. You can change this text to an image later if you would like to better use an image. Fill it with some text (for example: Social FB Contest ). The last field is the Password reset email which must be filled with a real email address. If any of the administrators forgets his/her password, the password reset email will be sent from this email address. When all fields are filled, click on the Next button in the bottom right corner. 9
6. The Last screen in the installation wizard is the Finish screen which will notify you about your installation status. This last step will also delete the installation file automatically from your server. You can click Finish in the bottom right corner. After five seconds you should be redirected to the login screen. If you are taken back to the installation wizard than means that your installation file couldn t be deleted thanks to your server settings. If you hit this problem than please navigate to the admin directory of the application using your FTP client and manually delete the install.php file. After deleting this 10
file navigate to your admin directory using your browser to log in. You installation is now finished and you can log in to your installation at http://mydomain.com/fbic/admin/ You can watch a video about how to install this application at: http://screencast.com/t/8x1n8d8wn 11
The administration interface This area is secured and protected and can be accessed only by the main administrator of this installation. Please note that you should be logged in now as the main administrator which allows you to change the installation details and manage the other administrators and their applications. The dashboard will display the currently logged in administrator s applications, statistics and all the user and use details of their applications. As a main administrator you can see a green box on the top of the page from where you can access the main administrator dashboard. You can click the Manage Installation button so you can change the installation details, see stats, etc. From here you can see sitewide statistics from the past 30 days, global statistics of this installation, edit or delete any other administrator s details or log in as that administrator to manage his applications with one click. 12
Clicking the Change Installation Settings button in the bottom right corner, you can change your branding name, or you can upload an image to use it as a logo, change the footer text and the password reset email but the most important part is the Registration URL field on the top of this modal window. 13
This is URL with a unique security token on the end. Visiting this URL anyone can sign up as an administrator. So when you are selling access to your installation, you can set this URL the final page. You can reset the security token anytime by pressing the Reset registration token button in the top right corner and saving your changes if you feel that this URL was shared on warez sites or whatever. If you don t want to share this URL you can ask for the details required in a form or in email and you can create manually the administrator user accounts. When you changed the installation details you can press the Dashboard menu item in the top to access your dashboard. You can navigate back anytime to the main administrator interface when you are logged in with the user details set during the installation. The dashboard screen is pretty simple. You can create new contests, manage them if you have any, check statistics, etc. You can also change your account details by pressing on your name in the top right corner. You can also log out from here. 14
Creating a new contest You can click the Create Contest menu item anytime to create a new contest. On this page you will see a big form which must be filled with the details of your contest. You can change these setting anytime so if you make any typos, or you can edit it with a single click. The first field is the Title field. This will be used in the administration interface to make a difference between applications. For example let s now create a Puppy beauty contest. Enter this in the title field. The next field is a WYSIWYG editor called Headline. This will be displayed in the header of the user interface. You can use any text or even upload an image here, depends what you prefer. Let s enter now Puppy beauty contest! Enter to win awesome prizes The next field is a switch called Show toplist. You can turn of or on to show the toplist on the user interface. Set it to yes. Two new fields will appear. In the first one you can enter any number. This will be the number pictures shown in the toplist. Let s add 10 for now. The second new field is another switch. 15
You can define to show or not the number of votes in the toplist. Set it to Yes for now. The Show rules field is another switch. If you want to define detailed rules for the contest, for example details of the prizes, end date of the contest, etc than turn it on by setting it to Yes and adding your rules in the WYSIWYG editor which will appear. Maybe the Contest style field is the most important so we will explain it later in more detail. Just leave this as it is for now. The Automatic approval does what it says. If you turn it on than all the user uploaded images will be automatically approved and displayed in the User Interface. If you set it to No than you have to manually approve all uploaded images. Set it to No for now. The Email notifications field is another switch. If you turn it on, an automatic email will be sent to the user when you approve his uploaded image in the system. You can edit the template of the email after turning this function on. For now let s turn it off. The Autoresponder field is maybe the most important here since here you can define your autoresponder details. The application will send all the users names and email addresses who connect to this application, to this autoresponder. 16
The next group of fields are the Integration settings, from these fields you can define the Facebook related details. If you turn on the Enable likegate switch, than every user must like your page before accessing your contest. Enabling the sharegate means a message will be posted on every users Facebook profile when he/she connects to your application - useful to give a viral effect to your contest. You can get a Facebook App ID and Facebook App Secret from Facebook Developers at https://developers.facebook.com/ after creating a new application. Facebook recently changed 17
the Facebook Developers interface so will explain in details how to do this. For now leave these two fields empty and the Facebook Tab Link URL field to. The last switch in this group is for turning the Facebook Comments on and off for the uploaded pictures. If is on than Facebook Comments will be displayed in every photo s details page. The next group is fields are for the design related changes. You can change every color and image in the user interface so it fits your needs and your niche. 18
The last field is used if you want to customize or translate the user interface. If you set it to Yes you can edit or replace every single line of text displayed on the User Interface. And now let me explain the Contest Style switch was mentioned before. It s pretty self explanatory but let me show you some examples with the three different settings. If the I will upload the images and a voter will be the winner option is selected, it means that only you can upload images and the users connected to your application can vote on them. 19
This way you can give a prize to a random user who voted on any of your pictures. Users connected to your application can t upload any photos to your application. When this option is selected a button will appear on the Images page for this application from where you can upload the images for voting. If you use the Users will upload the images and most voted will win contest style, than you can t upload any images to your contest. Users will have a page on the user interface where they can upload their own images, promote them with a unique link, share it on their wall or invite friends to vote on it. With this contest style activated, the winner of the contest will be the user who has the most votes on his picture. One user can upload only one image and if this contest style is activated, than it is recommended to turn off the Automatic approval function, so you can moderate and activate the images uploaded. The last contest style is the Both Admin & Users will upload images, and there will be multiple winners which includes both of the styles detailed above. This way you can have two types of winners, one for the most voted image and a random user who voted on the images. Now your contest should be ready and you only need the Facebook integration details which I m explaining in the next section detailed as possible since Facebook recently changed 20
the user interface of Facebook Developers. Do not forget to click on Save changes. Your application will be shown on your dashboard and you can edit it later after you receive your Facebook application details. Creating a Facebook Application To start creating a Facebook application, navigate to the Facebook Developers page. If you aren t logged in, than please do so and log in to your account. In the top menu click on Apps than on Create a new app An overlay window will appear, in the first field (called Display Name ) type in a title for your application. This title will be 21
displayed during the connection to your application so use a relevant and meaningful title. The second field is optional, you can leave this field blank. In the Category section, you have to choose a category for your application. This field is required so choose an accurate category for your application. Click on the Create App button in the bottom right corner. A new overlay window will appear, fill in the security code and click on Submit 22
You can see your Facebook APP ID in the top but as you can see, your App Secret isn t displayed. To view your App Secret, click on the small Show link, type in your password and click on Submit. This way your App Secret will be displayed. Note down these two in a text document or whatever since you will need it later. As you can see in the image above this application is in development mode since Facebook has the sandbox mode 23
enabled by default. To enable your application for every user clik on the Status & Review link in the left side. Now click on the switch on the right side, right after the application title: A confirmation dialog will show up. Click on Confirm and your application can be accessed by anyone from now on. 24
Now you need to connect your contest created in the previous chapter to this Facebook Application. To do so, go to your dashboard and click on the blue button with a pencil icon to edit your application. Scroll down and at the integration settings part, add your Facebook App ID and Facebook App Secret which you noted down to the specific fields Save your changes and go to your dashboard and click on the small orange button with a like icon on it for your application. Please note that these details are different, so it s important to 25
use the button for application you want to connect to Facebook. The important part is on the left side of this page. You have to enter these details at the Facebook Developers site. This way the contest will be connected to your Facebook Application. Click on the Current Settings for this app and the Facebook Developers page will be opened for this application. Keep both pages opened since you have to copy some text. You should be on the Settings page for your application, but if not then click on the Settings link in the left side. From FBIC copy the value of the App Domains field and paste it into the specific field at Facebook Developers 26
When you are ready with this step, click on + Add platform link at Facebook Developers: An overlay window will appear, click on the App on Facebook link Some new fields will appear on your settings page. From your FBIC page copy these two values to the specific fields at Facebook Developers: 27
And now click again on the +Add Platform link This time click the Page Tab link. For the Page Tab Name field type in any name you want. This will be displayed on your Facebook page so use a relevant name here. And now copy the Page Tab URL and Secure Page Tab URL fields from your FBIC settings 28
Please make sure that all the text copied is correct and you followed these exact steps. When you are ready click on Save Changes in the bottom right corner You can close this page now since You don t have anything to do here from now, but you can come back anytime to make changes as required. Go back to your Facebook Integration details page in your FBIC installation and click on the Add to Facebook Page button. 29
A new page will be opened which will list your existing Facebook Pages in a dropdown list. Click on the dropdown list and select the page where you want to add your contest. After selecting the desired page, click on the ADD button below the dropdown list. You will be taken to your Facebook page. You need one more detail from here to add to your FBIC detail which is the Facebook Tab Link URL. 30
To get this link please do this in your Facebook page where you have added your application. Click on the small down arrow on your Facebook Page Move your mouse over your freshly created application s icon and click the small pencil icon in the top right corner Now click on the Link to this tab link in the appearing menu 31
A new overlay window will appear which contains only a link. Copy this link and go to the edit page for your contest and fill the field with your link. Save your changes and this should be all. Your contest is connected now to a Facebook Application which is added to a Facebook Page. To view a video tutorial about this whole process, please click the link below: http://screencast.com/t/bqomcnllftp Please note that you need to make the steps above only if you want to show your contest inside an iframe App ad a Facebook Page, if not then please follow these steps: Create the Facebook application as you have created it before until the steps where you need to copy the URL s to Facebook Developers. For this style of contest outside of Facebook you need to use the second bunch of URL s in the Integration page. This is a lot easier than the previous tutorial. 32
At Facebook Developers, click on Settings on the left side, then on the add platform button in the bottom of the page This time select the Website menu item Now you have to copy the two field values and save your changes. You don t need to make any extra steps. 33
Adding images to your contest There are two ways to add images to your contest, depends what contest style have you selected when you created your contest. If the I will upload the images and a voter will be the winner contest style is selected, than only the administrator can upload images for voting. To do so, you firstly have to completely connect your contest to Facebook as shown in the previous chapter. When you are ready with the integration, you can navigate to your dashboard and click the black button with a camera icon. This icon will show any unapproved image with a blinking number. It s useful if you are using a contest style where users can upload images and you have the automatic approve function turned off. This way you can see if there are any images waiting for your moderation. To upload images, click this icon and in the upper right corner click the Upload images button. 34
A new overlay window will appear with a Browse and a Start upload button. Click on browse and select as many images you would like to upload and click on the Start upload. If you have the Automatic approval turned off, than you have to approve the uploaded images one by one. You can easily see which image isn t approved since will have a red border around it. The unapproved images are listed first in the list. 35
To activate an image, simply move your mouse over the image and tree buttons will appear. One for the moderation, one for viewing the image live in the user interface and one for deleting the image. To approve the image, click on the first button. If the image is already activated, than an orange button will be shown, which will deactivate the image if you click on it. As you can see this page offers some more functions. Will show details about the image and if you click the image itself, than 36
the image will be shown in full size. You can also navigate among the images from the overlay gallery to inspect every image in detail before activating it. Please note that if you deactivate an image, will not be deleted, to do so click on the red button with an x icon. A confirmation dialog will appear from where you can completely delete your image. If any of the two last contest styles is activated which allows the users to upload images, than a new button will appear in the images screen from where you can change the activation email template which is sent to the users. Also you can turn it off from here, or easily change its template. It s useful since you don t have to go back to the edit screen to change these settings. Clicking this button a new overlay window will be shown, from where you can change the activation email related settings for this contest. 37
Managing your users You can easily reach the users page for any of your contests from your dashboard. Just click the green button. From this page, you can manage all your users who have connected to this contest. You can view detailed user details or you can delete them. Deleting a user, will delete the image which was uploaded by this user, and any vote or share made by this user. Clicking the Details button will show a new overlay window: 38
Including the user s id in your database, the users full name, the users Facebook email address, his Facebook location (if is set in his profile, clicking it will show the address in Google Maps), his Facebook account language, the gender of the user, the date when the user connected to your application, the date when a message was shared on his wall (if the Sharegate function is turned on), the date when the user details were sent to your autoresponder (if this feature is turned on), a link to his Facebook profile and finally hid Facebook profile picture. From the upper right corner of the user list, you can search any user by any data, like his name, email or even name. You can also export all of your users to a.csv file with a single click. The export function is a must if you are using a contest style where you give prize for a random person who voted on an image. You can export your list and use http://random.org for example to pick a random winner but if one of the first two contest styles is turned on, than a new button will appear to randomize the users list. Clicking it, will randomize this list, and you can easily pick a winner. (The first, or first three for ex.) 39
Exporting Facebook UIDs WE have added a feature for the Facebook marketers where they can export Facebook User Ids for they custom audience based ad campaigns. The use of this feature is really easy. On your dashboard click on the Export UID button to go to the export page: In the top right corner there are two buttons. First will export all the user ids who have voted, independent on which image they voted on. The second button will export all user ids in your database for the specific contest. So even if only a user just joined your contest but didn t vote on any picture, his UID will be on the list. But if you want you can export user ids based on they vote. You can see all the images for the contest; just move your mouse of the image which voters you would like to export and click on the appearing button. 40