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>

Hollo

Is there a way to check if a particular user has liked your facebook page/app? That is, does the facebook API provide this functionality? If so you could use it to check if the user has liked your page/app on the serverside, and display/hide the content accordingly. – Brewington

I posted this question quite a while ago and got a notification that it became a "famous question." I'm not sure that I like being associated with this bribery-related question, lol. – Hollo

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>

Sophistication

what if the like button is already liked, how can I capture this? – Lobeline

pages.isFan... Google it and you should be able to find docs on it. – Sophistication

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

Erotic

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.

Mcelhaney

but it is tied to your URL. If the website portal isn't my domain, it won't work! – Racehorse