I have created an app inside a company page to add more tabs/pages with a "like-gate" to ensure the user likes our page before moving forward. The like gate sits at a location say "index.php" if the user likes our page "index2.php" is included, in they do NOT like us "index1.php" is include instead. This all functions correctly.
My problem is that I would like to include a "like" button inside the "index1.php" (if they dont like us) page. I included a button allowing the user to like us, but need to refresh after this button is clicked so the user can be evaluated at the like-gate again and redirect accordingly.
The code below allows a user to like but does not redirect as I would like it to. I have look at the examples on the fb developer page but am new to fb app dev and cannot figure out my error. Any help would be appreciated, hopefully this is enough information, but reply if you need more. Thanks for any help you can provide.
<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";
fjs.parentNode.insertBefore(js, fjs);
FB.Event.subscribe('edge.create',
function() {
top.window.location = 'http://www.facebook.com/pages/TAG_Communications/122751567742494?sk=app_243094502403141';
}
);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/pages/TAG_Communications/122751567742494" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
Wow, I'm trying to do the exact same thing and was searching this at the same time you posted this question! Not much out there on this.
I came across http://www.techjam.gr/2011/web-design/execute-javascript-facebook-button-clicked/ which explains what to do to run a callback script after the button is clicked very clearly. I see you already are doing this for the most part, but maybe there are a few pieces explained that you left out or didn't specify.
Also I've run into a lot of trouble trying to redirect parent frames because it triggers a cross domain javascript access security error. Not sure if that's part of your problem. For my own case I plan to just redirect my iframe page from something like no-fan.php to fan.php on the click - I don't need to re-evaluate if they are a fan or not with my fangate code if they clicked the like button.
Hope that helps you out.
UPDATE:
Got it working with help from the link above!
Here's what I did (code below):
Be sure to use the normal FB.init code.
Add the callback script with the redirect code above the button.
Add the xfbml version of the like button.
That's it!
Note that I did actually use top.window.location and sent it to my fangate evaluation code anyways. The reason is, if you just redirect the frame it leaves the rest of the page as is , and it still has the facebook like button near the title. Refreshing the whole page gets everything looking the way it should and avoids confusion.
code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId :'your id here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'full path to file', // channel.html file
oauth : true // enable OAuth 2.0
});
</script>
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
top.window.location = 'your tab url';
});
</script>
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like"><fb:like href="your page you want to like" send="false" layout="button_count" width="200" show_faces="false"></fb:like></div>
