This tutorial will take you through How To increase fan for your Facebook page by asking them to like the page before accessing your great content. Meaning people have to become a fan in order to participate your contest, play your game/campaign.
I assume that you already added your App Profile Page as a Custom Tab (ex: Welcome) to your Facebook page. When people click on the Custom Tab link, it will determine to see whether current visitor is already a Fan to display a proper page.
Facebook 4RapidDev Landing Page
On the image above, when click on Welcome custom tab on my Page, you will see a landing page with few Facebook Like buttons – on the top is the default Facebook Like button for Page and others are Facebook Like button plugin. When click on Like button, current visitor will become a fan and be redirected to the contest/game page. And you can change the copy as well as image to whatever you want, of course.
PHP script to check if people like Facebook page
In the PHP code below, I’m using the latest PHP Facebook Graph API therefore it may a little bit different with your current so let download my source code to check out the Graph API to ensure it works properly.
<?php require 'src/facebook.php'; $facebook = new Facebook(array( 'appId' => 'your-app-id', 'secret' => 'your-app-secret', )); $signed_request = $facebook->getSignedRequest(); $like_status = $signed_request["page"]["liked"]; if(isset($_REQUEST["fp_pass"]) && $_REQUEST["fp_pass"] == "1"){ $like_status = 1; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <?php if(!$like_status):?> <div id="fb-root"> <script src="http://connect.facebook.net/en_US/all.js"></script> <script type="text/javascript"> FB.Canvas.setSize({ width: 520, height: 1000 }); window.fbAsyncInit = function(){ FB.init({ appId:'your-app-id', session:{}, status:true, cookie:true, xfbml:true }); FB.Event.subscribe('edge.create', function(response){ top.location.href = 'http://www.facebook.com/4.Rapid.Development?sk=app_246714398703948'; } ); }; </script> <div style="font-size:13px; color:#333333; line-height:24px;"> <p><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/4.Rapid.Development" show_faces="false" width="450" font=""></fb:like></p> <a href="http://4rapiddev.com" target="_blank"><strong>4 Rapid Development</strong></a> is a technical blog that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers. We're talking about Web Development, Search Engine Optimization, Integrating with social media sites and other stuffs relate to tips/tricks and tutorials.<br /><br /> We try with my best to create useful articles with fully source code, step by step image illustrations as well as video tutorials in order for people be able to use and adapt rapidly and easily.<br /><br /> Simply click on the <fb:like href="http://www.facebook.com/4.Rapid.Development" layout="button_count" show_faces="false" width="70"></fb:like> button to enjoy all our great hard-working and meet all people like you. </div> </div> <br /><br /> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F4-Rapid-Development%2F192737727433644&width=480&connections=40&stream=false&header=false&height=500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:480px; height:500px;" allowTransparency="true"></iframe> <?php else:?> <h3>Thank you for loving my page!</h3> <p>Place your content for your fan down here ...</p> <?php endif;?> </body> </html> |
Note:
- 1. Update the your-app-id and your-app-secret (on lines: 5,6,32) with yours. You can find them in the Application Settings Basic page as below:
Facebook Find App ID and App Secret
- 2. Again, you’re free to make your landing page more sexy and interest to engage people become your fan. 🙂
- 3. In the scope of this tutorial, I don’t mention How to integrate with Facebook user information (ex: profile, friends, photos, etc). We will talk about it later, please wait.
+ Download my source code and current Facebook PHP SDK
+ View demonstration on my Facebook page
