Step by step integration photo contest campaign in facebook tabs

Recently we had successfully setup a photo contest campaign for one of our client in Penang. The photo contest campaign is conducted by following steps.

1. New visitor will first need to like their facebook page before joining the photo contest.
2. Once liked the facebook page, visitor need to agreed to share with their basic information including name and email.
3. Visitor join the contest by uploading their photo and write some description about their photo.
4. Visitor click on submit to gain the approval from administrator.
5. On the voting date, voting event will be started. Each of the visitor can only vote once / day.
6. Administrator will generate the report and announce on the winner.

In this facebook tips, we are not sharing on how to do the display part of the website and admin control panel. We assume you already complete the application/system.

Below are the step by step on how to integrate photo contest page into facebook tabs:

Step 1 : Make sure all application / system already completed and tested, Make sure your facebook status is develoer, and make sure you have the page access as manager, make sure that your current website domain name has SSL certificate.

Step 2 : Go to https://developers.facebook.com/

Step 3 : Click on the “Apps” shown in Step 2, Then “Create New App” as shown below

Step 4 : Fill up the form as below :

Step 5 : Fill up the form as follow.

Step 6 : Once done on above, you are ready to start add in the apps in your facebook page tab area. Now type in following URL to attach to facebook page tab.

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID &display=popup&redirect_uri=YOUR_URL

YOUR_APP_ID – Apps ID as shown above.

YOUR_URL – the URL that point to your facebook apps.

Step 7 : Choose respective Facebook Pages and click on “Add Page Tab”.  Then you should be able to see the tab in your facebook page.

Step to force visitor like your page before they can see the real page

Step 1 : Go to your website. Under index.php, you add in the following script :

// Facebook function to like before used page. //
function parsePageSignedRequest() {
    if (isset($_REQUEST['signed_request'])) {
      $encoded_sig = null;
      $payload = null;
      list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
      $sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
      $data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
      return $data;
    }
    return false;
}
 
if($signed_request = parsePageSignedRequest()) {
	if($signed_request->page->liked) {
		echo "<script type="text/javascript">
		echo "		window.location = \"home.php\"";
		echo "</script>"; 
        } else { 
                echo "<div class="like_content">"; 
                echo " <img style="width: 780px;" alt="" src="./images/Like_Page.jpg" />"; 
                echo "</div>";
        }
}

home.php is the page when user already like the page.
Like_Page.jpg is the page when user not yet like your page.

Step to retrieve visitor details such as name and email

Step 1 : Download facebook SDK for PHP. You can download directly from here. Just in case if next time the page already changed, you always can refer to https://developers.facebook.com/docs/php/gettingstarted/.

Step 2 : Just follow the step shown in the Step 1. Just in case you still cannot understand on the page, you can always refer to the example of the page.

NOTE (1) : Remember to include facebook.php for all the pages that need to have facebook authentication access else it will not work.
NOTE (2) : Remember to configure your REQUEST_URI to a correct place of the website and remember to include NOTE (1).

FYI, if your application do not require visitor to like your website, you can ignore the “like” page step.
FYI, if your application do not require visitor to provide their details, you can ignore the “retrieve details” step.

Thats all. It seem like simple right?

If you have any question, please do not hesitate to contact me. OR you just reply on the comment, I will try my best to answer your question.

Thanks
KMChew
ideaone.com.my