Simplest Facebook Fangate Implementation

When I say simplest, I mean, this really is the poor man's fangate! The entire concept revolves around hiding content via JavaScript or jQuery, then revealing it when Facebook registers a subscribe event.

The magic here is the subscribe event handler. Once you've added your facebook like button code, you can drop this script below it:

<script type="text/javascript">
FB.Event.subscribe('edge.create', function(href, widget) {
        // do something here
});
</script>

facebook-fan-gate
 

The second step is the fill in the event handler with code that reveals your content. The best approach is to not even output your content on the page, and use AJAX to pull in the content from your server. For example:

<script type="text/javascript">

FB.Event.subscribe('edge.create', function(href, widget) {

  $.ajax({

	'get-my-content.php?page=' + href,

	success: function(data) {

	  $('#my-element').html(data);

	}
  });

});

</script>

	

The href that is passed in refers to the URL that the user is liking. So, you could potentially use that in your content script as a basic check that the user didn't just visit the content script directly.
 

Okay, but what happens when your user already likes the page?

Facebook offers a method to check if a user likes a page, but it's just a bit more involved.

First, you need to know your Facebook page ID. You can get it by editing your facebook page, then looking at the URL. Once you have that, just plug it into the code below:


FB.init({
	appId  : 'MY_APP_ID',
	status : true, 
	cookie : true, 
	xfbml  : true  

});

	

FB.getLoginStatus(function(response) {

  if (response.status == 'connected') {

     var fb_user_id = response.authResponse.userID;

     var my_page_id = 'MY_PAGE_ID';
     var fql_query = 'SELECT uid FROM page_fan WHERE page_id= ' + my_page_id;
     fql_query += ' and uid=' + fb_user_id;

     var the_query = FB.Data.query(fql_query);

	
     the_query.wait(function(rows) {

       if (rows.length > 0 && rows[0].uid == fb_user_id) {

        // call the ajax method to load my content, as shown above
       }

     });

  }

});

	

 

Again, this is a poor man's method – it doesn't really secure your content. But then again, if the content is revealed simply by liking the page on facebook, how secure was it to begin with ;)

Subscribe

  • follow us in feedly


Tagged , .

Updated: 2013-08-24

Phil LaNasa