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>