"Powering" the FB like button

[horazio]

Hi,
I have a plain HTML website (see my signature) and I was thinking of making the download links visible only when the page has been liked thru the FB button.
Can you help me because I don't know how to do this ?

What I want to do is:
Once the visitor clicks on the like button then a new link appears on that page


Thanks

[SambaNeko]

This could be done, but I'd advise against it. It requires users to give you access to their basic profile info as well as their Likes, and most people won't do it. They'll just leave your page instead.

If you want though, the basic procedure goes something like this:
- create a Facebook app (doesn't need to have any content; you're just using it for API access)
- get the user to Like your page, and to authorize your app to access their relevant data
- when the user goes to your download page, check if they're logged into Facebook; if not, prompt them to login
- access their Likes through the Graph API and see if your page is there; make your download links visible if so

[horazio]

thanks, i did a bit of research and it seems that making contents available to fans is one of the most commons techniques used by all brands and companies.
But it's also complicated because you have to combine scripting languages, one of which is FBML (a mix of html and facebook script) ...
There are many blogs talking about this but none explaining exactly step by step how it's done...

[SambaNeko]

It's your choice; but here's a quick sample that I put together from snippets on Facebook's Javascript API Reference:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

	FB.getLoginStatus(function(response) {
	  if (response.status === 'connected') {
		// the user is logged in and has authenticated your
		// app, and response.authResponse supplies
		// the user's ID, a valid access token, a signed
		// request, and the time the access token 
		// and signed request each expire

		alert('logged in');
		var uid = response.authResponse.userID;
		var accessToken = response.authResponse.accessToken;
		
		FB.api('/me/likes', function(response) {
		  for(node in response.data){
			  alert(response.data[node].name);
		  }
		});
	  } else if (response.status === 'not_authorized') {
		// the user is logged in to Facebook, 
		// but has not authenticated your app

		alert('logged in; no auth');
	  } else {
		// the user isn't logged in to Facebook.

		alert('not logged in');
	  }
	 }); 
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

You will need an App ID to interact with Facebook's API, so create an app if you need to. You will also need to create a channel file (this is detailed on the reference page that I linked to). Then copy your App ID and channel file location into the code above and it's ready to use.

Once ready, it will check the user's login status with Facebook. If they're logged in and they've authorized your app, you can check their Likes. Instead of alerting them, you'll of course want to compare them to what you're looking for instead.

If the user's not logged in or hasn't authorized your app, you'll need to add some code to handle that. Here's a reference for FB.login; you'll need to ask specifically for the "user_likes" permission.

Try that and post any questions.