Question

I’m currently building a Facebook Application for a client using the new timeline layout which means no landing pages etc. Anyway, there’s an app that we want users to go to which has one of those annoying ‘Fan Gates’ where you must ‘Like’ the page before you can view the full application. It was decided that we would have a ‘Like’ button inside the page, which means I needed to manually do the refresh/redirect after they click Like to show the proper application.

I’m using this code to achieve this:

<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_GB/all.js#xfbml=1&appId=xxxx";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<script>
    window.fbAsyncInit = function() {

        // Javascript SDK Settings
        FB.init({
            appId  : 'xxx',
            status : true, // check login status
            channelUrl : 'https://www.xxx.com/assets/apps/channel.html', // Channel File
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });

        // Automatically increase height of our canvas.
        FB.Canvas.setAutoGrow();

        // When they click the like button within our app refresh the page and take them to our app.
        FB.Event.subscribe('edge.create', function(href, widget) {
            window.top.location = '//www.facebook.com/xxx/app_xxx';
        });

    };
</script>

<div id="like"><div class="fb-like" data-href="xxx" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div></div>
<img src="/assets/apps/lyc/img/nolike.jpg" />

To quickly walk through it there’s the javascript sdk being included for the like button and the functionality I need. Then I set the SDK Settings, automatically grow the length of the iframe and finally have my click event functionality where if the button is clicked I take them to the app page.

This works correctly everywhere except in IE7. When you click ‘Like’ in IE7 it simply sits there and doesn’t run the redirect. I can’t see any errors though. As I said all other browsers do the redirect.

I’ve been stuck on this for quite a while so any help would be greatly appreciated.

Cheers

Answer 1

I suspect that IE7 is blocking your JavaScript redirect because it doesn’t consider clicking inside of an iFrame (the Like button) as valid user interaction. IOW, this is a redirect-blocking mechanism of the web-browser. To confirm that this is true please change the following code:

FB.Event.subscribe('edge.create', function(href, widget) {
            alert('You clicked like!');
            window.top.location = '//www.facebook.com/xxx/app_xxx';
});

Does the alert show up? If it does then that confirms that the event is being trapped, but the browser is preventing the redirect. A good workaround is to display a “continue” button in addition to attempting the redirect just in case the redirect doesn’t work in certain browsers.