Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Boost Your Likes by Creating a Facebook Giveaway Using WordPress

Last updated on by
Elegant Themes
Boost Your Likes by Creating a Facebook Giveaway Using WordPress

As a lot of you know that we recently launched a new site List25 last month. We have been doing a lot of social media promotions for it, and in one month you can see that the site’s facebook like count is already surpassing 27,000. Yes that is pretty insane. One of the things we did to give this site a boost start on facebook was creating a facebook giveaway campaign. For which you see the ad in the sidebar of WPBeginner. In this article, we will show you how you can boost your likes by creating a facebook giveaway campaign using WordPress. This will get very interesting in terms of results, so read along.

Note: Intermediate level of technical know how of WordPress and CSS is required for this tutorial. We tried to make it as clear as possible for everyone to follow.

How does this Giveaway work?

When the user lands on List25′s Facebook Page, they see the landing page for our contest. It says “List25 is doing a Holiday Giveaway” -> Win $25 Amazon Giftcards. Like our page to see how you can enter. Image below:

List25 Amazon Campaign

Amazon giftcards is something that a lot of people want. So majority of the users click Like to see how they can enter. When they like the page, they are now shown the fan-only content which has the instructions on how to win. It basically says, we are giving away 25 x $25 Amazon Gift Cards. You must share this page with your friends to qualify. There is a button for the user to click and share the page with their friends.

List25 Amazon Giveaway Campaign Details

When the user clicks on the button, a Post to Your Wall popup shows up like this:

List25 Giveaway Share Popup

We have already predefined the text and the image there. So all the user has to do is write their comment and share it. Once they hit share, they will be brought to the page to enter their information. If the user clicks Cancel, then they are sent back to the previous tab.

This campaign will be live until December 20th (that’s when we will announce our winners). So for those who want to see a live demo of this, head over to List25 Fan Page and see it for yourself.

The craziest part about all this is that most people think it will require you to do some crazy coding or pay big money to have an app like this. What if we were to tell you that we did this all with a combination of WordPress plugins, MailChimp and obviously design skills for the images. Want to know how to do it? Read along.

Step 1: Getting Things Together

First thing you need to do is figure out what you are going to giveaway. In our case it was Amazon Giftcards. As I mentioned previously, it required a combination of plugins and services. So I will lay it out all out here. Remember some are paid plugins:

  • WP4FB Pro <- Get the Pro option if you want to be able to do the stuff we did (the feature is called Like Gate and Share Gate) which is only available at Pro and Developer level.
  • WordPress HTTPs Plugin (Free from the Repository)
  • SSL Certificate for the HTTPs users. As of October 1st, Facebook now requires developers to have a SSL ready version for the users using secured browsing. If you are on a dedicated server like us, then you have to pay for a SSL certificate. HostGator charges like $50 / year for the service. But we ended up getting ours for $12.99 / year from Godaddy special Click Here to get it.

    If you are on HostGator’s Shared hosting plan, then KimWoodbridge has a tutorial that shows you how to use their Shared SSL.

  • MailChimp or Aweber Account. Basically you need a way to store the Name and Email, so you can later notify the winners. Facebook requires you to collect the data separately otherwise it is against their TOS. So no you cannot message the user on Facebook to let them know that they won.

Aside from all the above, you need to have the following graphics ready:

  • Non-Fan Page Graphics
  • Fan-Only Page Grahpics where you show details on how to Enter (with a click to share button)
  • Success Page with a Form where you can user can enter their data
  • Thumbnail for the Share Content

Total investment:

- $67 for WP4FB Pro
- $12.99 for SSL via Godaddy (This is a special offer. Normally it costs $69. Click Here to get it)
- Free upto 2000 Emails: MailChimp (Our plan is combined with WPBeginner so we are paying for it)
- 25 x $25 Amazon Giftcards ($625) <- This will vary based on what you are giving away.

Before you move on to the next step, It is assumed that you have gotten all the things together. For SSL, if you got the certificate, it needs to be installed on your server. HostGator installed it on our server for us. You just have to ask their support.

Step 2: Installing WordPress HTTPs

Simply install and activate the plugin WordPress HTTPs Plugin from the WordPress repository.

Go to Settings » WordPress HTTPs and change the SSL Host to your domain.

Make sure the checkbox for Force SSL Exclusively is checked.

WordPress HTTPs

Click Save Settings.

Step 3: Setting up WP4FB Pro

Once you have purchased WP4FB Pro, install and activate it on your site. You will see that 3 additional menu options are added to your WordPress dashboard. The Main WP4FB one, and then two custom post types called WP4FB pages and WP4FB Slides. So lets get started with WP4FB Menu. Fill out all the general settings such as footer text, RSS url, Twitter etc.

WP4FB General

The next option is Facebook. If you go there, you will notice that it requires Facebook Application ID and Secret Key. So you need to go and get that. Register your own application in Facebook Developers area. There are plenty of tutorials on the web of how to do it. When you buy WP4FB Pro, it comes with a series of video tutorials on how to do this. Therefore, I will not be covering how to register a facebook application in this article. (Use their video tutorial) or another tutorial on the web.

Once you have got your app ID and facebook secret key, insert it into WP4FB Facebook Settings.

WP4FB Facebook Settings

You need to have the fan-gate checkbox checked. Then select the pre-like page. But because you just installed this page, you will not see any option there. So what you need to do is go to WP4FB Pages tab and click Add New.

Create a pre-like page. In our case for List25, we created a page called Giveaway. Did not add any content in the content box. We simply used a background image to get the style that we needed. But this was a shortcut way of doing things rather than spending time to create a custom template for WP4FB.

WP4FB Pre Like Page

If you see, we have show navigation, and show page title set to NO. There is a defined header height because we are using our image as header background image. Our content is blank, so all the user really sees is the image.

Notice: That our image URL has https:// in it. The reason for that is so it works on Facebook.

You need to make sure that all Viral Features are turned OFF for the pre-like page. Once you have created the pre-like page publish it. Then go back to Facebook Menu under the main WP4FB settings and select this page.

Next you need to create a fan-only content page that has the details of how to enter the content. For this, we also used a background image to make things faster and easier for us. Except this time we used Content Background Image URL rather than Header Background Image URL. The reason for that was because we wanted to use HTML to initiate the Share Gate feature.

WP4FB Fan Only Page Settings

Again notice that the image url is HTTPS. You must do this.

As I explained that we used content image URL, so we can utilize HTML tags. Basically our image looked like this:

List25 Amazon Giveaway Campaign Details

We needed to make the Click here to Share button clickable. So we added the following HTML tags in our content area using the HTML editor rather than the Visual Editor.

<div style="min-height: 440px;">
<div style="width: 190px; margin: 308px 0 0 267px;"><a style="text-indent: -9999px; width: 190px; height: 28px; display: block;" href="https://link to our third page/">Click Here to Share</a></div>
</div>

Your CSS will vary based on the background image that you use. But you get the general idea of what we are doing above right? Basically we want to make Click Here to Share button a link to our secret page where the user can access the form to enter the contest.

Lets go ahead and create our third and final page. We followed pretty much the same direction as the fan-only page above. We used the content background image URL, and used HTML in the content editor. The most important part about this page was that we enabled the Viral Feature Share Gate.

WP4FB Share Gate

Now notice that we filled out the Open Graph Settings as well. This is the information that will be shown to the user when they hit the share gate point. See the image below:

List25 Giveaway Share Popup

So make sure that you put the right image, an accurate title and a compelling description.

The final page looked like this:

List25 Enter Giveaway

So basically our background image had two empty fields. We went into MailChimp and grabbed a form code for a new email list that we created for List25. And added that into this last page’s content area with the styling.

Here is the code that we added (obviously your form code will be different, but this would be a good starting point):

<div style="min-height: 440px;">
<div style="width: 190px; margin: 188px 0 0 280px;"><form id="mc-embedded-subscribe-form" class="validate" action="http://list25.us1.list-manage.com/subscribe/post?u=549b83cc29ff23c36e5796c38&amp;id=184bf03dd3" method="post" name="mc-embedded-subscribe-form" target="_blank">
<div style="margin: 0px 0 0;"><input id="mce-FNAME" class="required" style="background: transparent; border: 0px; box-shadow: none; width: 160px;" onfocus="if (this.value == 'Name…') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Name…';}" type="text" name="FNAME" value="Name…" /></div>
<div style="margin: -5px 0 0;"><input id="mce-EMAIL" class="required" style="background: transparent; border: 0px; box-shadow: none; width: 160px;" onfocus="if (this.value == 'Enter your email…') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email…';}" type="text" name="EMAIL" value="Enter your email…" /></div>
<div class="clear"><input id="mc-embedded-subscribe" class="button" style="width: 185px; background: transparent; display: block; text-indent: -9999px; cursor: pointer; border: 0; margin: -8px 0 0 -10px; height: 25px;" type="submit" name="subscribe" value="Enter the Giveaway" /></div>
</form></div>
</div>

After you publish this page. Take the URL of this page and add it in the button of the fan-only page code that we shared above.

Step 4: Promoting the Giveaway

You can add the giveaway page, but no one will know about it. If you have an existing user base, then you can let them know about the giveaway. In our case, we did not have that. Following are the steps that we took:

- Added a sidebar banner on List25 and WPBeginner promoting the contest.
- We are also running Facebook Ad Campaigns to promote the contest (additional money that we are spending but you don’t have to)
- Shared it with our friends

The viral aspect of the giveaway carries on its own. Everybody wants free money.

Results

Need I say more that we have over 27,000 likes in one month. Ofcourse not all of them are from the contest because we are doing other campaigns as well. But it is fair to say that at least a third of these fans are from the giveaway.

How long did it take us to do this? I’d say roughly 4 – 5 hours. Was it worth it? Heck yes it was.

Will you be doing this on your site? Let us know your thoughts.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • alfonso

    Good post but…. simply wp4fb doesn’t works so well.
    In my case if I enable sharegate or invitegate the page become a blank page.
    If I don’t select viral features the page come back to be normal.
    It is only my bug or is a general case ?

    • http://www.wpbeginner.com Editorial Staff

      Haven’t used that plugin a while. Please ask their support team.

  • Paul GO

    You have 206,500+ LIKES?? WOW! That’s amazing!! And yet most of your post only have aprox 30 Likes….hmmmm- IM SAYING FAKE LIKES! Your Fans are not engaged at all. I have pages with 3,000 Likes and get hundreds of likes every post!

    • http://www.wpbeginner.com Editorial Staff

      If that is your only way of determining whether the fans are fake, then you must not have a good idea of how FB works. We had over 50k people talking about our stuff at one point. However, FB has been changing their algorithm lately. This have caused a significant drop in our fan engagement. However, our reach is still very high. I don’t like lying in general, but lying to myself by getting fake likes would be the dumbest thing ever. I could’ve easily deleted your baseless comment, but I don’t like censoring comments. Below is a screenshot of the analytics page that should be proof enough:

      http://www.wpbeginner.com/wp-content/uploads/2012/12/list25fbstats.jpg

  • Mads

    Hi, great post.

    Quick question: Isn’t it against FB rules to have a competition that is dependent on the user sharing its content?

    Would love to do something similar, but it seems this is a issue for me..

    • http://www.wpbeginner.com Editorial Staff

      Not sure if that’s against the rule. We have seen numerous big brands doing the same thing which is why we did it on our site. If the rules changed since that time, then we can’t speak for it.

      • Mads

        Thats cool, have you done any competitions since this one? And how have they worked?

        Could be cool to see more of this stuff, really think its an awesome post.

        • http://www.wpbeginner.com Editorial Staff

          Nope haven’t done any giveaways since then.

  • Jack Kieffer

    Hey Syed/WpBeginner staff – on that first image, where you have a “like our page” button – is this part of the image, or does WP4FB allow you to add this button? Did you just make this region of your image clickable?

    • http://www.wpbeginner.com Editorial Staff

      That’s just part of an image.

  • http://www.wpbeginner.com/ wpbeginner

    wp4fb Lets hope that they respond. I know that it worked fine for us when we used it.

  • http://www.facebook.com/truenewzealand spikemaine

    The WP4FB plugin is not working as expected — the fangate function appears broken. I’ve written the wp4fb but right now, I’m feeling like I just gave up $70. Hopefully, it’s my error and not an incompatibility with Facebook. Otherwise, we were very excited about this tutorial.

    • http://www.facebook.com/profile.php?id=100003349207135 Noahj Holland

      Did you ever get an answer to this? I know that Facebook sometime ago had disabled the auto refresh for fans who liked pages, so when somebody liked a page it did nothing.. just stayed there. Although if they refreshed the page they would see the fan content. Anyway I came across some pages that had non fan content and fan content, and when I liked the page it auto refreshed to show the fan content.

      Normally I would have known about something like this, so I’m not sure and came across this post through a search. Thanks.

  • DarrylKraemer

    Thanks for the excellent write up Syed an David. I wondered who you used to make your graphics for this campaign? Thanks!

  • jimmyc

    Hi! Great post. We have followed your tutorial and have got it running. Although we have noticed that when a user shares the page it adds it to their profile page but not to their friends newsfeed. Did you have this issue? Was it something to do with the wordpress plugin or a facebook app setting?

    • wpbeginner

      When a user publishes something, it automatically goes to their friend’s homefeed. Based on that friend’s edgerank, it is determined where they show up or if they show up at all.

      • jimmyc

        @wpbeginner Thanks for the quick reply. We have also noticed though that if I was to post it (and share it publicly) it wont appear on my own newsfeed. I’m assuming that is all connected with my own edgerank?

  • ODG6Actual

    Great article, setting something up myself based on this. Only issue I am having is that the SHARE page automatically fires the popup for the FB Share dialog rather than presenting the image and info for the user to click. Is there something Im missing… I have it setup as stated in the article.

    • wpbeginner

      @ODG6Actual You have to make it so it is click activated… so the share page is actually the third page in the string… Our contest is no longer live, but how we did it was non-fan content… fan content (where when a user clicks to enter the giveaway) they see the popup to share. Once they share they will be taken to the tab to enter the info.

      • ODG6Actual

        @wpbeginner Hmm… Ok, rethinking it.

  • Esteban

    Hi,

    Great tutorial! I just have one question:

    You have changed the landing page to the “Share Page”. It is a marketing strategy?

    Thank you

  • thewpwonder

    Great post and very timely, as I am working on my facebook fanpage this week. This article is very helpful as I am weighing my options for which route I want to choose.

  • AmandaStewart

    another question: the part after you share, it asks to fill in your email.. is it all entirely processed thru mailchimp? and is it also a requirement for the contest? if so, isnt that a pretty expensive mailing list or is it worth it to have that even if most are not interested in the product? thank so much. this is perfect for my new site http://www.waterzombie.com to help get the word out there. will you be at the wordcamp in MIA again?

    • wpbeginner

      @AmandaStewart You don’t have to collect using MailChimp. We are using it, but you don’t have to. You can use a form where all emails are sent to a “new email address’ from where you can track it. You can use another WordPress plugin that is built just to collect emails.

      Yes will be there at WordCamp Miami

  • WPLift

    This is a great showcase – Thanks Syed,

    Im going to try something similar for one of my blogs – Thanks for sharing it.

  • AmandaStewart

    great post. thank you. as i am just starting a new biz and this is a great way to get more eyeballs.

    one question. if i’m on shared hosting with godaddy with other domains in the account, then would that ssl cert go as a general and under the main domain of the account or can it be for individual domains in tht shared account?

    • wpbeginner

      @AmandaStewart You need to ask this question to your host.

  • http://bestbloggingtools.com/ Faizan Elahi ( BestBloggingTools)

    Will GetResponse work instead of Aweber or mailchimp?

    • wpbeginner

      @Faizan Elahi ( BestBloggingTools) Sure it would.

  • Da’Scott Says Ifihadarockidbussyoheadbich

    Ill have to check this out on my break

  • hmmmmm2012

    You are not supposed to use Facebook for promotional campaigns, it is a violation of the TOS. Can you show us where this is now allowed?

    Next, you have a bunch of quantity likes, but no quality likes. Let us know in a followup how many of those likes make it worthwhile to spend time and money managing your new page.

    Also, FCC regulations require that you disclose affiliate links…like the one to WPFBPro plugin. :)

    • wpbeginner

      @hmmmmm2012 When we were doing our research, in the facebook TOS for giveaways and contests, it clearly states that you have to use an entry method other than liking the page. You are also required to store the data elsewhere hence the entry form. You can do giveaways at anytime… Heck brands have been doing this forever… Again, we are not using FB as a promotional campaign…. rather we are using it as an outlet for our new site for the sake of building a brand. We are not telling FB users to go buy something elsewhere. Rather it is encouraging them to engage in our FB page hosted on FB.Quantity over quality… we will tell overtime how well this goes. But we are getting good interaction on the page. We are also getting a lot of users visiting our site using FB. Read the FTC Disclosure link in the footer and you will see it all mentioned there.

      • http://www.sitebuilder.ws/ SiteBuilder

        @wpbeginner Interesting, thanks for the article and the explanation of the TOS. I’m definitely gonna give this a go. I’ll let you know when I do, and make sure to tell us if FB decides its not ok. Great post!

  • ErwinPrasetyo

    great explanation…^^

  • http://wpin.me/ WPinme

    Sorry to come back again just a quick heads up, clicked on the WP4FB Pro link it isn’t working

    • wpbeginner

      @WPinme Fixed it.

      • http://wpin.me/ WPinme

        @wpbeginner sweet will take a look at it cheers

  • http://wpin.me/ WPinme

    Sorry to come back again just a quick heads up, clicked on the WP4FB Pro link at it isn’t working

  • http://wpin.me/ WPinme

    Awesome post, + you now have another like for your List 25 page, all my friends are now aware of it.

    How to go viral huh! Great stuff, thanks for sharing!