Image Image Image Image Image Image Image Image Image Image

In Tech We Love | October 24, 2017

Scroll to top

Top

No Comments

Creating Facebook 'Like Gated' Content - In Tech We Love

Creating Facebook ‘Like Gated’ Content Facebook New App
intech

The aim of this article is to give you a quick overview of how to get started with adding ‘like-gated’ content to your Facebook page. Essentially what we’ll be doing is creating a custom tab on your Facebook tab and then using a like gate to choose which content to display to visitors to the page. People who have liked the page will see the full contents and people who haven’t liked the page will see content encouraging them to like the page.

Before you get started, it’s worth making sure you have a few things set up so you can work through quickly:

  • FTP access to a domain where you can host the content you plan to use – in this example we are going to use PHP so to follow this tutorial, make sure you have it installed on the server your using/li>
  • A valid SSL certificate for the domain you are going to host your content on
  • A Facebook Developer account – if you don’t have one already, you can register here
  • A Facebook page your Facebook Developer account has admin access rights to (you might want to create one you can use to test with)
  • An 111 x 74 pixels image in (JPG, GIF, or PNG format) to use as the preview image for your new tab

Ok, so now we’re ready to get started…

Setting up your Facebook App

First of all, you can follow the steps below to create a Facebook App through your developer account. The App will then be pulled into the new tab that we’ll create shortly.

Step 1

Facebook Developer Portal

Go to developer.facebook.com login and click on ‘Apps’ on the right hand side of the top naviagtion

Step 2

Facebook Create New App

Click on the button that says ‘Create New App’ in the top right hand side. In the dialogue that comes up add the App Name you want to use. Other values are optional. Press ‘Continue’

Step 3

Facebook New App

Your new app has now been created. Scroll down to the section of the page where it says ‘Select how your app integrates with Facebook’

Step 4

Facebook Page Tab

Select the tick next to ‘Page tab’. Here you will need to add a page tab name, this can be anything. You also need to add secure (https://) and non-secure (http://) urls for the content you are going to add. Decide on a page location you want to use. Note you either need to include a query string at the end of the urls (in the format of ?value=1) or alternatively have a / at the end of the urls.

Examples would be Page Tab URL: http://www.bluesyncmedia.com/products/ and Secure Page Tab URL: https://www.bluesyncmedia.com/products/
OR
Page Tab URL: http://www.bluesyncmedia.com?products=1
and
Secure Page Tab URL: https://www.bluesyncmedia.com?products=1

Make sure you also add your page tab preview image and select the width of content you’d like to use – either 810 px or 520 px.

Creating The Content For Your Tab

It’s possible to create the content for your tab using a variety of scripting languages, in this example, we’re going to use php.

Download the Facebook PHP SDK, you’ll need the contents of the src folder. Set up a test page like the code example at the bottom of the page article on nazly.net:

<?php
require ‘src/facebook.php’;

// You can find your app id and app secret at the top of the basic settings for your app on the Facebook Developer portal replace the YOUR_APP_ID_HERE, with your App Id, replace YOUR_APP_SECRET_HERE with your App Secret.

$facebook = new Facebook(array(
‘appId’ => ‘YOUR_APP_ID_HERE’,
‘secret’ => ‘YOUR_APP_SECRET_HERE’,
));

$theRequest = $facebook->getSignedRequest();

if($theRequest["page"]["liked"] == 1){
echo “The real content”;
}
else{
echo “Like our page to view”;
}
?>

Upload your page to the location you specified as your Page Tab URL. You can update the content at any time you like so you can either move onto the next steps now or add your real content to the example.

Adding Your App To Your Facebook Page

Now have your app set up, you can customise the following url in order to actually add the app to a tab on your page:

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

You can find your app id at the top of the basic settings for your app on the Facebook Developer portal – insert this into the url above where it says YOUR_APP_ID and page tab url in the link above where it says YOUR_URL (for example http://www.bluesyncmedia.com/products/).

Once you’ve customised the link with your info, simply paste this into your browser window.

https://www.facebook.com/dialog/pagetab?app_id=445126428933504&redirect_uri=http://www.bluesyncmedia.com

The following dialogue should appear. Simply select the page you want to add your Facebook App to and press ‘Add Page Tab’

Add Page Tab

 

Congratulations! Your Facebook App should now appear as a tab when you view your Facebook page!

Submit a Comment