Question

To explain, I’d like for a link to only become available for clicking once visitors have ‘Liked’ my website (not my Facebook page – the actual website). I’ve been trying to do it using this code:

<script>
  FB.Event.subscribe('edge.create', //FB.event.subscribe attaches a handler to an event and invokes your callback when the event fires.
    function(response) { //This is where the response function is inserted, I used document.write for this example
    document.write(';<a href="#">This is the HTML I want to display</a>');
    }
  );
</script>

But even after I like my website the link doesn’t display. I hope I’ve been as clear as possible, any help would be greatly appreciated.

Answer 1

I managed to get it working after some thinking and playing around:

<!-- FB Javascript SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
    appId: 'APP-ID',
    channelUrl : '//WWW.WBESITE.COM/channel.html', // Channel File
    status: true,
    cookie: true,
    xfbml: true,
    oauth: true,
});

// Additional initialization code here
    FB.Event.subscribe('edge.create', function() {
    window.location.href = "http://WEBSITE.COM/";
}); 
};

// 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>

<!-- More FB Javascript SDK (Like Button) -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script src="//connect.facebook.net/en_US/all.js#xfbml=1">
</script>

The FB.Event.subscribe needed to be placed within the window.fbAsyncInit function. I then made it so that instead of having the HTML appear after the ‘Like’ button had been pressed it simply redirected it using the window.location.href = “http://WEBSITE.COM/”; to a page that has the new link included on it. The document.write function wasn’t working because it would get rid of all the HTML on the page other than what was included in the function.

The code above needs to be placed just after the opening tag and then you can place the code for the ‘Like’ button:

<div class="fb-like" data-href="http://WEBSITE.COM" data-send="send" data-layout="button_count" data-width="450" data-show-faces="true"></div>

Anywhere that you would like on the page!