You may not know this, but Facebook allows you to add custom applications that gives you HTML functionality. Don’t know HTML? Don’t worry! What I’ll show you is very simple. Using 3rd Party Facebook Applications allow you to do a number of things, some of which are free and some are paid. This post will cover free applications.
3rd Party Facebook Applications
Who doesn’t want to grow their email list? I have dabbled in 3rd party Facebook Applications before, but never on such a strategic level. Just so we are on the same page, 3rd party Facebook applications are what show up next to the Likes and Photos Tabs on your page.
Are you running an illegal Facebook Contest/Promotion/Sweepstakes?
Did you know you may be breaking Facebook Law? According to the Facebook Page Guidelines, you cannot run a promotion or contest using Facebook’s features, including the Like button, comments or shares. You aren’t even supposed to announce the winner on Facebook. Pretty crazy right?
“If you use Facebook to communicate about or administer a promotion (such as a contest or sweepstakes), you are responsible for the lawful operation of that promotion, including the official rules, offer terms and eligibility requirements (e.g., age and residency restrictions), and compliance with regulations governing the promotion and all prizes offered in connection with the promotion (e.g., registration and obtaining necessary regulatory approvals). Please note that compliance with these guidelines does not constitute the lawfulness of a promotion. Promotions are subject to many regulations and if you are not certain that your promotion complies with applicable law, please consult with an expert.”
How to run a Legal Facebook Contest
The WooBox Static HTML iFrame application allows you to run a contest using their 3rd party application for free. Below is a step by step guide on how to install and run your legal promotion.
Step 1. Login into Facebook and click here to begin the installation process.
Step 2. Click “Install Page Tab”
Step 3. Choose the Facebook Page you would like to install your application on
Step 4. Once your desired page is chosen, click “Add Page Tab”
Step 5. You will be redirected to the settings page of your new app.
Step 6. Select what you want your app to display. We are going to use HTML in this example.
Step 7. Use a form creator to generate fields that ask for information. I like to use Google Forms.
If you have a gmail account (if you don’t, you should) you can generate forms that ask any question that your little heart desires. Google also gives you the HTML that allows you to embed the form anywhere HTML is accepted. You’ll need to create your Google Form before we can move on.
Creating a Google Form
These are the steps to create a simple google form as well as embed the form via HTML in your facebook application. If you already know how to do this, you can skip down to the next section.
Step 1. Login into Gmail
Step 2. Click “Drive” at the top
Step 3. Click “Create” at the top left
Step 4. Select “Form” from the drop down
Step 5. Name Your form. I chose “Sample Facebook Picture Contest”
Step 6. Choose a theme for for your Google form. I used the default theme.
Step 7. Create your form with the type of questions you would like to ask. I used text fields to ask for name, email and I used multiple choice for the 3rd question.
Step 8. Choose the options you would like for when the form is completed.
Step 9. When you are finished adding your questions and editing the options. Click “send form.”
Step 10. A pop-up will appear. You want to click embed to grab the HTML
Step 11. Copy the HTML and keep it in your clipboard for later.
The answers submitted to this google form will populate in your Drive under the title of the form that you chose and (Responses). You can also choose to get e-mail by going to the Tools menu and Notification Rules section of the spreadsheet.
Facebook Application Settings
Now that your google form is created, we can go back to the settings of the Facebook application we installed and paste the code of the Google Form. Make sure you still have HTML checked.
Don’t get scared by all of the HTML code in the below image. HTML is what we are going to enter so it looks nice and pretty. You are able to enter the code when “Source” is selected on the right.
As you read on you’ll see that when we click over to “Editor” it will let you move the pictures around. These images are populated by using HTML. Keep reading for how to grab and edit the HTML for these images.
Add images to your application from Facebook Album using HTML
Every image on the internet has an image source code that we can grab and put in our application. Let’s say that you have a Facebook album with all the pictures you want to use, like in this example.
I am using Google Chrome as my web browser. This penguin picture (so cute, right?) is posted on Facebook and I right clicked it and selected “Copy Image URL”. Now we are going to go back to our application settings and paste the following code.
<img src=”IMAGE URL”/> – Replace IMAGE URL with the URL we copied by right clicking the image in the Facebook Album. Make sure you are in Source when you paste the code, not Editor. Once you paste one image code, hit enter and paste the others.
Once you have added all your images and the Google Form via HTML, you can click over to Editor and move the images around by clicking and dragging. We’re almost at the end, so pat yourself on the back for getting this far.
The images got cut off above so you can…..Click here to see the live contest example.
Moving down the options, we have more items to edit. The application allows you to set a fan gate, which prevents non-fans from engaging with your contest. The fan gate prompts non-fans to like you, which is a great feature. I would suggest using an image for your fan gate. If you or your know someone who is handy with Photoshop, you can have them create a graphic for you. My fan gate has an arrow pointing to the where the Like button is within Facebook.
Tab Name is the name that shows up under the application itself like you would see with Likes or Photos. I named mine Photo Contest.
Tab Image is what will appear on your Facebook Page. The dimensions are listed in the settings, but cannot exceed 111 pixels wide and 72 pixels high. Again, you may need to know someone who can help you with photoshop, or you’ll be stuck with the default image of the application.
Custom Tab image | Default Tab Image
Now you’re done! Well almost.
Click Save Settings to save any and all changes. Now I am sure you want to see your hard work in action. Head to the Facebook page that you added your app to to see how you did.
Promote your contest
Now that the easy part is over (haha yeah right), you’ll want to promote your contest by word of mouth, posting a flyer on your Facebook page, emailing your list and tweeting it out. Offer a prize, create a sense of urgency by announcing when the contest is over and for extra measure email, all respondents personally thanking them for participating if you have the time.
The application automatically populates a link that you can share on your social media sites. This is the test album to teach you how to run a legal Facebook Contest. You can see what the sample photo contest looks at this link - http://statictab.com/mhtvsyo.
I know what your thinking. Why go through all of this trouble just to run a contest I can easily do on Facebook by asking for Likes. The benefits of fan-gating and email collection should be enough to convince you. The share link provided in the settings is also compatible with mobile devices.
Comment below with the link to your Facebook Contest. You’ll find that not a lot of people know that Facebook doesn’t allow you to run contests by using it’s functionality. Share this post with friends and you’ll blow their mind.