FB app request points to canvas page instead of pa

Question

I've created a facebook page app in the new timeline view with the js sdk, and I'm using a fb.ui call to use a multi-friends selector to invite my friends to the app. However, when my friends click on the invite they are taken to a version of my page which does not have a like button.

Screenshot of what people see when navigating to the page normally (ignore the facebook logo on the far left top here): http://i.imgur.com/R3S3g.jpg

Screenshot of what people see when linked through an invite: http://i.imgur.com/GfXfL.jpg

And I see the console error: 'Refused to display document because display forbidden by X-Frame-Options.'

Any tips on how to fix this?

Thanks for any help.

Edit: I've found that the issue is that the invite is directing people to the canvas url of the app, not the page tab. Is there a way to link people to the page tab?

Edit 2: After researching and hitting my head on the keyboard I have found a common solution is having the canvas page redirect to the page tab (as described here and here). This has worked for me, but upon accepting the app invite, the user is prompted to accept the app permissions, which aren't necessary to view the app, and I'm staying inside of facebook. I'll keep updating as I go.

Edit 3: I had authenticated referrals turned on in the app settings. I'm a dumb. I'll put up an answer in case anybody googles this.

Answer 1

App requests always point to the canvas page for your app (which is why you must specify a canvas page in the app settings for requests to work at all). Instead of having the canvas page point to the same content as your page tab, create a page that does nothing more than redirect to your page tab url.

Just put something like this in the canvas url page:

<script>
   window.top.location.href = 'YOUR PAGE TAB URL HERE';
</script>

If users are seeing permission requests when accepting app requests that probably means you have authenticated referrals turned on in the auth dialog section of your app settings.

Answer 2

I was trying to setup just this for shared links on users timelines. I evolved the code a bit to only redirect if the top location is not equal to the Facebook pagetab URL: This way, you do not need to add a extra 'redirect page'.

if (window.top.location.href != 'YOUR PAGE TAB URL HERE') {

    window.top.location.href = 'YOUR PAGE TAB URL HERE';
}