Display content after clicking Facebook Like button

Question

I have a section of a webpage that I only want people to be able to access after clicking a Facebook Like button.

How do I hide that particular area and then display it only after someone clicks the Like button.

As for the Facebook Like code it looks like this:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="www.oursite.com" show_faces="false" width="330" font="verdana"></fb:like>

<div id="hidden-area">Hidden Content</div>

Answer 1

Use 'edge.create':

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe

really simple... can even couple it with jQuery.

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId   : '<?php echo $facebook->getAppId(); ?>',
            session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
            status  : true, // check login status
            cookie  : true, // enable cookies to allow the server to access the session
            xfbml   : true // parse XFBML
        });

        // whenever the user logs in, we refresh the page
        FB.Event.subscribe('auth.login', function() {
            window.location.reload();
        });

        FB.Event.subscribe('edge.create', function(response) {
            $.get('URLlink?uid=' + <?php echo $uid; ?>, function(data) {
                $('#id').html(data);
            });
        });
    };

    (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
</script>

Answer 2

I'm not quite sure if this works. Remembering the f8 introduction of the like button facebook don't let website owners see who liked their page.

The like button is rendered client side from the java script file hosted on facebook. I'm not a super java script expert, but I don't know a way to get variables from external java script files.

The only idea I have is when a user made his likes public. You probably could read the cookie and then look up his likes on his public facebook page. As facebook loads most of it's content dynamically you can revers engineer the java script functions used on the public page by facebook internally, even if they are not part of the official API

Answer 3

Another way is the plugin Like 2 Unlock for jQuery

It allows to lock discounts, videos, download links, images, bonus content, forms and more. It’ll help you to increase the number of likes, to get additional traffic and more customers from the social network.