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:
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.
When the user clicks on the button, a Post to Your Wall popup shows up like this:
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 move to the next step, it is assumed that have gotten all things together. for ssl, if got certificate, needs be installed your server. hostgator our server us. just 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.
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.
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.
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.
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.
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:
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.
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:
So make sure that you put the right image, an accurate title and a compelling description.
The final page looked like this:
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&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.
