Contact Us
  • Facebook iFrame Tabs: After Liking, Redirect Fans to a Different Tab with Reveal

    Facebook Page Tab ProgrammingSomeone posted a question on our blog this morning asking how a certain Fan Page redirected users to a different tab after they clicked to Like the page.

    Now that Facebook supports iFrames in page tabs, redirecting a user from one tab to another tab (or to any URL) after they have Liked the page is quite simple, using just a bit of JavaScript.

     

    NOTE:

    • This can only be done on the index page of a Facebook iFrame application page tab. You can’t do this with Static FBML!;
    • There would be no fan-only content on this tab, as it will redirect to the specified URL permanently for fans. Of course, you might want to put a message there for those users who might have JavaScript turned off in their browser. Just provide the redirect URL as a link for fans who don’t have JavaScript (a rarity).

    When creating your Reveal tab iFrame application, just add this bit of code at the beginning of the fan-only content:

    <script type="text/javascript">
    if (top != self) top.window.location = 'http://URL-OF-DESTINATION-TAB';
    </script>

    What the above JavaScript does is load the “top.window.location” URL, overwriting the current page — “top” refers to the “parent” page which is the Facebook page into which the iFramed page is embedded.

    As mentioned above, because this is accomplished using JavaScript, fans with JavaScript disabled in their browser will not be redirected. So you could put alternate content for that possibility, perhaps “Click here to ….” linked to the redirect URL.

    So there it is. Pretty easy!

    Comments

    1. You are too good to us. Looking forward to testing this new trick after lunch. :)

      • is this correct? i cant seem to get it to show yourlikepage.html after like is clicked $app_id,
        ‘secret’ => $app_secret,
        ‘cookie’ => true
        ));

        $signed_request = $facebook->getSignedRequest();

        $page_id = $signed_request["page"]["id"];
        $page_admin = $signed_request["page"]["admin"];
        $like_status = $signed_request["page"]["liked"];
        $country = $signed_request["user"]["country"];
        $locale = $signed_request["user"]["locale"];

        // If a fan is on your page
        if ($like_status) {
        $a = file_get_contents(“yourlikepage.html”);
        echo ($a);
        } else {
        // If a non-fan is on your page
        $a = file_get_contents(“yournolikepage.html”);
        echo ($a);
        }

        ?>

    2. Hi, great topic.
      Can I use an iframe page tab as my landing page?

      • Yes, for non-fans. Fans will always get the Wall and this can’t be changed.

        • Thanks timware,

          I’ve tried here but it’s not working
          I’ve changed the “Default Landing Tab” inside “Manage Permissions” in Page Edit.
          But the landing page still the Wall isted of the page I’m trying to use. What I’m missign here?

          BTW the page is http://www.facebook.com/fpsk8

          • Remember, Felipe …. If you’re a Page Admin you’re also going to go to the Wall by default, and this cannot be changed.

            You can ONLY set the default landing tab for non-fans, including non-admins.

    3. timware :
      Remember, Felipe …. If you’re a Page Admin you’re also going to go to the Wall by default, and this cannot be changed.
      You can ONLY set the default landing tab for non-fans, including non-admins.

      Thanks again.
      I was a page admin. It’s working

    4. Tim,

      I KNOW that for fans the wall is always the default tab.

      Do you have an update on when Facebook will allow a facebook destination page for fans?

      • No, Jeremy, I have no idea if Facebook is considering doing that. I suspect their thinking is that once you’ve made your pitch to non-fans, and they convert to fans, then its back to the emphasis on social — which happens on the Wall. Everything they do is directed at increasing engagement.

      • One way to direct current fans to a tab would be through the use of an ad. Another is to use the top photos or profile pic to point to the new location of tabs.

        Now if they could just let us target a tab in a post!

        • Mario, You can link to a specific tab in a URL.

          Just go to: “Edit page > Apps > Link to this tab”

          and you can see the link to a tab. It’s also visible in the address bar of your browser when you’re on the tab.

          To link to the Wall, just append “?sk=wall” (w/o quotes) to your Fan Page URL:

          http://www.facebook.com/MyFanPage?sk=wall

    5. Is there a way to put this script in buttons on the page?

      Some real functionality here would be to have someone like the page for content…then have an opt-in form, again promising the content…then on submit of the form…go to a different Page having a tab with the download of the content…no like necessary.

      In essence the download page would be just that: a place not being promoted with the download; so no one really knows about it (social discovery disabled) or even an app which hasn’t been “added” to the original page.

      You would have to have multiple pages on Facebook, no big deal. But the problem with this chain of events is the submit button in the opt-in. You would have to have this script embedded into the submit button somehow.

      Anyone suggest help with this particular scenario?

    6. I usually use the JavaScript SDK for iFrame tabs, but if you are going to be using the PHP SDK anyways, wouldn’t it just be easier to use if ($like_status) … header( ‘Location: http://www.facebook.com/page/?v=blahblah‘ ) ; else … write out the non-fan content.

      • I don’t know, Ken. My solution really isn’t that difficult. But that’s what makes horse races, eh? I do appreciate the comment. I’m sure there a number of ways to skin le chat.

      • mountaincoder says:

        if you’re using the php SDK anyway then why do a redirect at all? you know up front if it’s a fan or not, just draw the correct page.

    7. Thanks Tim for the quick heads up.

      That is a little lame of Facebook. I want my fans to experience some cool new tabs/apps I come up with.

      How should I repromote that?

      p.s. your blog rocks

    8. one little question: after using this code
      does that mean that after liking the page whenever a fan will try to see the reveal tab he will imeediately be bounced to the other tab and will not be able to see the reveal tab ?
      thanks

    9. Wow, I am so glad that I discovered your blog. I have put that script into my page of my app, but it redirects immediately without people clicking on like. Is there a way to stop this?
      I made my facebook fan page with WordPress.

    10. Hi,timware.I’m concerned about your blog for a long time. now, I have one little question:when i upgrade myFan Page.It’s warning me:You are not an admin of any pages.Can you tell me why?

    11. Quick facebook questions: I want to set something up on facebook (maybe through events?) where we send out a mass facebook message inviting previous customers to like our new facebook business page. (There are about 30,000 people on file…)

      The idea is that I would say something like, “Like Affordable Lamps [our company] on facebook and get a promotional code for 10% off.” But, how can I set it up so that it sends the code automatically to anyone who likes us (for a limited time)? Is there an app that I can make for that or do I just have to respond directly to each individual like?

      Thank you so so much! This is all pretty new to me….This blog has been a huge help already!

      • You can’t trigger an email or other action targeted at the user when they Like your page.

        I’m not sure what you mean by sending out “a mass facebook message” … unless you mean sending out an email to your list about your Facebook page?

        • I thought maybe you could do it through events, but now I see that they have to ‘like’ us first. Thanks for explaining that. I’m definitely a newbie… :)

      • I think she means sending an email to her customer list about her page.

        Heather I would say your best bet, since as Tim notes, you cannot have it send an email to someone who Likes your page, is to place the 10% off code on a special Page Tab that only allows users who Like the page to see it.

    12. Hi Tim,

      I’m glad I found this site as it has given me some information I could not find elsewhere.. Is there absolutely no way to get around the issue of current fans not being redirected to my default landing page? At the moment as you know only non-fans are being redirected which seems pretty strange to me!

      Thanks!

      Pat

      • Nope. Facebook’s logic is that engagement happens most on the Wall, and it wants to encourage engagement, so once you’ve sold a user and they become a fan, then it’s on to the conversation….

    13. Hi please can some one help me. I been strugling for few days now.
      I have created face book app using frames.
      first content has some text asking peaple to like the page. how do i redirect them to the second page in my frame ones they clicked like?
      Please point me in the right direction

    14. As a PAGE, when you have users land on a dedicated “Landing Tab”, they are asked to “Like” the page. Once they do so, they are now a Fan.

      Once a “Fan”, they should be AUTOMATICALLY redirected to the Wall….But this is not the case. Fans remain on a now blank Landing Tab…and have to Click “Wall” to go over to the Wall.

      Yes, the next time they visit the page, they are automatically taken to the Wall, but without an automatic redirect to the Wall, after Clicking “Like”, the user experience is confusing… Whats up with that??

      It would be great to hear any insights into this.
      Thanks

      here’s my Page: http://www.facebook.com/pages/Engage-360/126031610758199

      For the time being, I just added a second page to the Landing Tab, but would rather the new Fans be auto-redirected to the Wall.

      • Shane, You’re trying to use the redirect script on a Static FBML tab. It won’t work there because the JavaScript won’t execute without a user action (eg click). The redirect script works on an *iFrame* tab only.

        • Thanks for the quick response!
          I was pretty sure we made the script in an iFrame tab, being that it was developed post March 11, when Fb required iFrames rather than FBML moving forward.
          I will reach out to my developer to double check on this.

          I also heard a rumor that Fb would soon be phasing out “Landing Tabs” for Pages (and other functionalities) in an effort to monetize that functionality for brands…

          • The tab your URL points to was definitely created using the Static FBML app …. the icon gives it away. As of today, despite the Facebook warning, admins can still add the Static FBML app to their pages, although I’m sure that door will slam shut soon.

            I haven’t heard anything definitive about Facebook phasing out landing tabs for pages, although some admins report that the “Default landing tab” setting isn’t present in their editing screen.

    15. Gotcha. Thank you very much Sir for your quick replies and expert insight.
      I will be posting a link to your blog.
      Thanks again :)

    16. I want to achieve similar result. But instead of re-directing the user to a tab, I want a prompt windows opened up which is pre-filled with information that the user can then click the button to post to his wall.

    17. Great article Tim. Thank you very much. Tim, can you make articles about analisys of code features of some cool pages. Zappos, for instance. I can not understand how did they embed a poll in Landing page and add share function.

      Thank you.

    18. Hello. I’m from Spain. Excuse my vocabulary.He tested and does not work
      Where to put the script? In the html?
      When I put the script directly opens the page that I post.
      Example:

      top.window.location = ‘http://www.google.es’;

      Sorry

    19. Can you create more than one tab with this software?

    20. I can’t get the redirect to work. I get an error
      Parse error: syntax error, unexpected ‘<' in /home/mysite/public_html/MySecondaryDomain.com/TestFolder/index.php on line 17
      which is displayed even to non-fans. I mention that since I would have expected it to read the Fans content part only once someone Likes the Page.

      I pasted the 3 lines of the code above after the
      if ($like_status) {
      line in the iframe reveal tab tutorial.

      Could someone also give the PHP script for this?

      Many, many thanks for all the great work you do.

    21. What’s the use of this since once you’ve become a fan you’ll always be redirected?

      Anyhow, what I wanted to know is if it’s possible to ad a like button inside the iframe.
      I don’t seem to find any info about this.

      Thanks!

      • You are NEVER redirected automatically after Liking. You have to set up the reveal page to do that, or redirect as this tutorial tries to explain.

        While I was waiting for a reply for a reply to my question above, I reduced the width of my webpage to 520 px and loaded it within my reveal tab. My webpage has a Like button in it too (to the website, not my FB page where the visitor has just landed from after Liking my FB page) and it works fine inside the iFrame.

        To the best of my knowledge, there is no technical or TOS problem in having a Like button on your iFrame tab.

        You can’t do it in FBML directly but you can cheat… have a comment thingy and hide everything but the Like button within it.

        Don’t ask me about the coding part though, I get an HTML guy to do it for me.

    22. Okay, just to be sure, what I’m looking for is a way to like (become a fan) not to like the content within the iFrame.

      So the like button I want inside the iFrame has the exact same functionality as the default like button on the fb page.

      Hope this makes sense..?

      • Yes, if you put a like button inside the iframe that is for the fan page itself, it will function just like the like button at the top of the page in the title. I am pretty sure that was already answered in this thread. Or maybe it was another blog post here.

      • The only way in which the Like inside the tab WON’T behave like the Like button next to the Page name is Liking the page won’t cause the Like next to the Page name to disappear until after the user has refreshed the Page.

    23. Hi. Who can help me? I make a two tab. One of them is landing page tab – anyone can see this tab “click and like” (index.html) other one is only for fans (tab.html). Now

      <script type="text/javascript">
      top.window.location = 'http://URL-OF-DESTINATION-TAB';
      </script>

      Which should put this code. “tab” or “index” and what should be a link? “tab” link or “index” link. thank you!

    24. Any possible fix for me Tim? To my post #45 above?

      Maybe someone can share a PHP script? Would have to be complete since I’m strictly a copy-paste artist and can, at best, replace the URL.

      Thanks

      • I believe the error message tells you exactly where you’re making your mistake. As you say, you’re a “cut and paste” guy, so probably have one too many ‘<‘ in your script. You might want to have your HTML guy look at it.

    25. Kapster says:

      i’m using this code
      <script type="text/javascript">
      top.window.location = 'http://URL-OF-DESTINATION-TAB';
      </script>"

      Seems to work great using firefox but does not work using IE any ideas on how to fix the code so it works for both browsers ?

      Thanks in advance :)

    26. Kapster says:

      forgot to mention what i’m using this for… Facebook (TabPress) and trying to redirect to my wall once the user becomes a fan. With Firefox it works fine and once the users becomes a fan they are redirected to the wall , but in Internet Explorer once the user becomes a fan it looks like it redirects but only to a blank page within facebook with the words “Powered by TabPress”

      Thanks Again.

      • OK, to have this script work in Internet Explorer and all other browsers, it needs to look like this:

        <script type=”text/javascript”>
        if (top != self) top.location.href = ‘http://URL-TO-WHICH-TO-REDIRECT’;
        </script>

        Thanks for pointing this out! I’ve modified this post to reflect the new approach.

        • I found your blog through my friend Ken Hood and this is exactly what I am looking for with one twist. I amredirecting to a amazon astore that is more than 520px wide so my solution is to just pop open a new browser window during the redirection. Any idea what variation of the top.lociation.href to use? Thanks Jim K.

          • The above script is set to totally overwrite the window it’s on. The script checks to see if the URL of the window it’s in matches the redirect URL. You’d need to change “top.location.href” condition to open a new browser window with a specific URL. I’m not sure how to do that. Sorry.

    27. How can I make a landing page redirect to the wall when the user clicks on like? This code automatically redirects everyone to the wall if I set up the url to point to the wall. I want people to click like then go to the wall. Do you know how I can do this?! Thanks very much!

    28. timware :The method described in this post DOES use JavaScript.

      As I understand it, you have to add the javascript to the fan gate page you make using php. I basically need a method of basically making fan gate but without php – with fbml it was easy it seems but now that is being retired. On the fan page I could add the redirect as shown. Very simple. However, I cannot make the fan gate without php! Thanks

    29. Dan Stramer says:

      Hi,
      Your site is a great resource, I have learned a lot.
      I was wondering if you and the community could help me on my issue::
      Is there a way of showing a list of my fan page liked pages? Is there an fql query to check for the pages that my fan page likes?

      I found the option of this URL: http://www.facebook.com/browse/?type=favorite_pages&page_id=your page id]
      which gives a list of your pages favorite pages, but I would like to write an application which will show a list consisting of the page’s name, logo, number of fans(and any other optional relevant info). A list which I can control design wise and show as an iframe application.

      Thanks a lot in advance,
      Dan

    30. I was using your fb.Init code, and then tried adding the code you suggest above, and it caused an infinite loop bug. Can’t have both, so I figured, well… What if instead of using this code, I use the fb.init code with the condition if top != self.

      That did the trick.

      Just for conformity and continuity of advice on this blog, I’d suggest that you change the above script to be

      if (top != self) {
      FB.init({
      appId : 'YOUR-APP-ID-HERE',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml : true // parse XFBML
      });
      };

      Works like a charm, AND also works with very tall pages without scrollbars.

    31. Also, I’ve been googling for an hour… I cannot figure out how on earth they (BandPage, or Kamelia, or whomever you linked to in the above post) mimicked the WALL on their application iframe. Can you point me in the right direction for learning how to do this? I think it’s a very neat effect.

      Obviously it must be some code they included in the source for their iFrame, but I cannot for the life of me, figure it out.

    32. Hi Tim,
      sorry for off topic but i was wondering, is it difficult to create a solution for iframes so that when i click on fanpage tab a pre-loader is shown to the user until the custom page fully loads? Right now when you click on the tab a white page is displayed until the page comes up.

      Any thoughts?

      Thanks.

    33. Please forgive me, I really am a novice at this.

      I added the TabPress app to my Facebook page & was able to add images to the non- fan area. I’m wondering:

      1. How do I actually publish the FB page? (I know…this is a silly question, but really don’t know.)

      2. Will the TabPress logo and edit info in the middle of the page disappear once the page is published?

      3. I want to offer a chance to win something once they become a fan. (would like a pop-up to fill out info for the entry)

      Thank you in advance of any help you may offer! :)

      • Once you’ve added TabPress, the tab is on your page. Only page admins see the edit screen, and use the “preview” links to see how it looks to everyone else, fans and non-fans. If you want to see how it looks to non-admins, log out and look at it, or use a different non-admin login.

        #3: that content would go in the “content for non-fans” box.

        There’s no actual “publishing” the tab. Once you’ve added it to your page, it’s published.

    34. Thank you very much for the quick response!

    35. tamir :
      one little question: after using this code
      does that mean that after liking the page whenever a fan will try to see the reveal tab he will imeediately be bounced to the other tab and will not be able to see the reveal tab ?

      Which code are you referring to in question #16?
      thanks

      • this articles code in general, it creates a redirection that on first time when you lke the page redirects you to a different location. but when you already liked a page, if you try to see it’s landing page again, you just can’t see anything because it redirects you again

        • That’s right. Once someone has Like the page, they can no longer view the Welcome tab.

          This doesn’t make for the greatest user experience, since there will be a tab for fans that, when clicked, just redirects them somewhere else.

          And, of course, you have to make sure that what’s on your Welcome tab isn’t useful content, but simply an enticement to Like to page.

          And regarding #16, I did make a change to the code in this article to ensure it works with IE.

    36. Thank you both! This is a wonderful resource, I will be sure to share it.

    37. I have another question… ( and I’m sure there are even more to come, the more I learn. So, Thank you again!)

      Once someone likes the page, we have put an entry form for a chance to win an item in the fan box. Once the fan submits their info, they are then directed to go to the wall.

      The next time they log on, they are sent directly to the wall. But, the welcome tab is still visible and when clicked on, it still shows the entry form.

      Is there a way to have that entry form not show again once it has been filled out and submitted?

    38. Hello TIm,

      I just need little help from you. I have created fanpage where there are 3 iframe tabs; Welcome, Product and Features.

      And inside Welcome tab/page, there is navigation menu which has Home, Product and Features,

      What I want is when user click Product menu from welcome page , it should display Product tab from iframe application. I hope you understand what I’m asking. If you could help me on this it would be really great help to me.

      Looking forward to your reply

      • That would take some JavaScript programming, Shawn. You’ll have to research this.

        • he can also do it easier with the use of three buttons
          and href with target = _top
          and be sure to give the link not of the tab itself but of the iframe tab location on your server or you get a facebook logo before redirecting to the tab itself

          • Thanks, but I want other iframe tab to display when I click on the navigation menu of welcome tab. currently I have done with href tab to display other page from server but I want to show from iframe tab when link is clicked.

    39. shawn :
      Thanks, but I want other iframe tab to display when I click on the navigation menu of welcome tab. currently I have done with href tab to display other page from server but I want to show from iframe tab when link is clicked.

      i thought you already have three tabs…
      if you need one with tabbed navigation you need JS
      like timware sayed
      google html tabbed content and you will find many free scripts

      • this is the fanpage I’m working on
        http://www.facebook.com/LarryLayton

        this page has 3 tab (welcome, product and features) welcome tab has 4 navigation ( welcome, product and features). when user click on product from welcome tab, it should redirect to product tab. if any one can give me codes for it i would really appreciate it.

        • ok so it is different tabs ! my first answer applies
          you can just design it to look like a tabbed menu on top

          use the same four buttons with the same design looking like a top menu and use it in all four tabs so it will look like a tab menu,
          it will be sort of just like the old facebook page had

          the JS solution is for one facebook tab containing
          inside four tabs, you don;t need that

        • Shawn-

          1) You need to first setup your app correctly… you have obviously not followed the detailed instruction available here on the HyperArts blog. Your app is blocked when browsing securely.

          2) Once you have spent the hours reading and learning here (make sure you read *all* of the iframe posts and comments), then you need to take the next step and…

          3) Google and find a free script (like we all had to do) that allows you to do this . Google “JQery multitab” for starters.

          4) You could also offer to pay anyone here. I’m sure Tamir, or Tim or someone else here could save you a ton of time if you would prefer to just “cut to the chase” and get this done. But an *offer to pay* goes a long way.

          Everyone in this community is ready to help… for free… but you have to do your homework first and come prepared to class.

          Good luck. (btw.. sometimes I’m the Big Meany here, so don’t take it out on the rest of these wonderful folks here that I scolded you).

    40. hey timware is that possible when we click like button and open a new wndow or new tab with me url???

    41. Hello;
      I’m able to use the code that you have provided succesfully but i have abit issue with it, once the person like the page it redirects from reveal tab to other custom tab but when this fan wants to view the reveal tab, it doesnt let him to see it anymore, it always redirects it again to custom tab. is there anyway that this code will redirect only one time to custom tab but then if person wants to see landing page, he can still see it. i have made abit search and i figured out that it is actually possible. on http://www.facebook.com/MINI in this facebook page, it opens at welcome tab then once visitor likes the page, it redirect him to wall but then if he wants, he can still view welcome tab.

      • Analisa says:

        Mitch, your non-fan landing tab will not be visible to fans once they click Like. You should make that tab designed specifically for people who are not fans, and if you need to put some of that content on the fan tab as well, just duplicate it. There is no way, that I know, for you to send fans back to that non-fan tab, unless they “unlike” the Page.

      • Mark Paul says:

        Hello Mitch,

        Sorry for bad English,

        I saw in your page that it direct in your welcome page,
        I just want to know how did you do that? can you help me?
        because I tried the code that they’ve said, its not working to me.

        I hope you can really help me with this..

        Thanks

    42. I just want to know how can I embed youtube video on iframe page with image to click. Like we have it on fbml where swf src and img src so that we can click on image to activate youtube video. So, I am wondering how to put an image to to activate embed youtube video on iframe page? Any one knows?

    43. Hey, can someone help me out ? What I’m trying to do is, redirect the “fan” of the page to the Wall tab, instead of coming onto the landing page ALL the time. Is there away around this?

      Here is the code I’m currently using in my iFrame:

      <fb:visible-to-connection>
      <script type="text/javascript">
      if (top != self) top.window.location = 'url here';
      </script>

      <fb:else>
      Welcome, Non-fan.
      </fb:else>
      </fb:visible-to-connection>

      And it just loads the wall tab itself..even if they are a non-fan of the page.

      • Analisa says:

        Andy, have you set the default landing tab for non-fans to be this custom tab? If so, all fans will still go to the Wall. You cannot control where fans land, ever.

        • Hello Analisa,
          I have set the default landing page as the iFrame. But when i use said code, it takes them to the wall, even if they aren’t fans?

      • Hi! Have you found a solution for this?

    44. Thanks for the javascript, it works, although I would suggest this option native to your tabpress app to avoid a redirection. As it is, when someone Likes, the workaround first directs new fan to your fb app URL for fans, then redirects to the javascript’s new tab url.

      Would be a better user experience to give admin option to take people straight to the preferred url upon Liking. Would be a great update to an already awesome app!

    45. p.s. also service Facebook might not like the redirection.

    46. I meant “nervous”..

    47. hi, thanks for the code, but I still seem to have an Error in IE 8. i get a Permission Denied error!. A quick google search shows that i might have to add something like – header(‘P3P: CP=”CAO PSA OUR”‘); – but it still does not work. Can you help me out.

    48. Wonderful, thanks! Just trying to troubleshoot two things:

      When I add the script to our custom “Welcome” iframe, with top.window.location being the wall, the landing page gets stuck in an endless loop for non-fans, apparently attempting to load the frame, detecting the script, redirecting, and repeating.

      Without the script, tab loads fine, but does not redirect once liked. Is there any way to make this redirect work for the Wall and not another tab?

      Now, here’s the catch. Can you tell me if this is possible…

      We want fans (who have liked the page) to be able to view the tab when they click it. But for non fans, we want the auto-redirect to the Wall once liked.

      Please advise if you need clarification. Thank you very much for your time!

    49. Hello,
      I have used that code, I didn’t find anything special there. This code redirect to the another link, it doesn’t care whether it’s Fan or Non-Fan. Can someone try this in his fanpage and show me the proper way ? or send me the link of that page.

      if (top != self) top.window.location = ‘url here’;

    50. thanks for the tips, but I have a question. how can I show a different content on a tab for the fans and for the non-fans? In FBML there was a code… is this still available now with iframes?

    51. Mark Paul says:

      Hello can anybody help me where do i put the code

      if (top != self) top.location.hre = “http://www.facebook.com/OnlineOverwhelm?sk=app_190322544333196″;

      cause I tried to put inside of it but still its not working. can someone show me? how to solve this..

      Here’s the code I’ve been using..

      window.fbAsyncInit = function() {
      FB.init({appId: ’190322544333196′, status: true, cookie: true, xfbml: true});

      FB.Event.subscribe(‘auth.login’, function(response) {

      login();

      });

      FB.Event.subscribe(‘auth.logout’, function(response) {

      logout();
      });

      FB.getLoginStatus(function(response) {
      if (response.session) {

      login();

      }
      });
      };
      (function() {
      var e = document.createElement(‘script’);
      e.type = ‘text/javascript’;
      e.src = document.location.protocol +
      ‘//connect.facebook.net/en_US/all.js’;
      e.async = true;
      document.getElementById(‘fb-root’).appendChild((e));
      }());

      function login(){
      FB.api(‘/me’, function(response) {

      });
      }
      function logout(){

      }

    52. Commodoregirl says:

      I absolutely love your app! I do have one question though… Can a user have more than the one tab?

    53. Hi there, can sombody help , i  am looking for an PRE-LIKE button on my page , (Facebook) , is this a facebook app and free? or must i pay for it ? 

      this is the EXAMPLE  that  i want   , pleaSe HELP 
      http://www.facebook.com/OnlineOverwhelm?sk=app_190322544333196

    54. Thanks for handy tip. I personally found ‘window.top.location.href’ less problematic for IE if helps anybody.

    55. I created an app here: http://www.facebook.com/horizonspeakers?sk=app_114626255309335  it is on a facebook place page.  But now when I click LIKE… instead of Redirecting to my FAN ONLY content, it asks me if I want to recommend to my friends…. then it redirects to the wall.

      How can I correct this ?

    56. I am keen to find out if it is possible to configure Facebook to always default to an app as the page’s landing page. So even once an app has been ‘Liked’, is it possible to still redirect to the app landing page instead of the Facebook wall for example?
      (to clarify, this is not on the same visit to a page. This is once a page has been Liked – they have left the page – and then returned to the page)

      Thanks!
      N

    57. Bilal Khartabil says:

      Hey great tutorial…

      I have a problem getting it working exactly like I want..I’m trying to build a custom Fan Page Tab that includes a landing page for non-fans with a custom Facebook like button for the page (not the app). What I want is that when the user clicks on like they will be given access to the fan content (still on the same tab). What I’m doing is in the index.php file I’m using the:if ($like_status) {  include(‘fan_content.php’);} else {  include(‘nonfan_content.php’);User is able to see the landing page but is not redirected to fan_content when he clicks like.

      Any help would be much appreciated.

    58. The problem with embedding the Facebook Like button in an iFramed tab is that even though the Like is received by Facebook, the user has to refresh the tab to activate the have the fan-gating take effect, because the PHP has to reload and detect that the user is a fan and display the fan-only content.

    59. HELP!!! is there a way to change your fan page settings so that people have to like your page before liking a picture?

    60. Tomas Danhel says:

      Does it work for every browser? Especially IE, and Safari?

    61. I have a problem, I cant make it work in IE 8.

      Have you test it in IE?

    62. Andrew Smith says:

      What I don’t understand is how to get around facebook defaulting to the wall when somebody clicks the “like” button. (I’m talking immediately after clicking on it, not when returning)

      I read comments below and from elsewhere on the web that you can’t get around this but I’ve seen some apps (Static HTML: iframe tabs, Pepsi’s custom one, for example) seem to get around this?

      Any idea how? Cheers.

      • Hi there, I guess I’m a little late to the party, but I just came across this blog post/comment and might have some helpful feedback…  If you hadn’t figured it out yet, this issue was (is?) being caused by a Facebook bug (http://blog.woobox.com/2011/09/fangate-bug-is-back/).

        I don’t know about other custom tab type apps, but the Woobox Static IFRAME Tab App (http://www.facebook.com/Woobox?sk=app_208195102528120) automatically fixes the default redirect issue for pages that have a custom tab set as their default landing page.  It also allows you to create a “FanGate” for the tab, which requires non-fan visitors to Like the page before they can see the tab content.  Also, the Woobox app is free, and allows you to install as many custom tabs on your page(s) as you want.

    63. Andrew, You’d have to provide a link where a page is able to default to anything other than the Wall for fans. Because Facebook prevents this.
      Here is Facebook’s reasoning, provided by Matt Trainer of Facebook:

      “The reasoning is that Facebook believes the best social engagement happens on the Wall tab, and those are better pages for the user re-engagement experience than other tabs.

      “Also, by having these experiences be similar across Pages, users also learn what to expect and where links to Pages will take them.

      “Naturally, I’m sure there are reasons developers and companies would like a different default experience regardless of the above. I’ve already passed that feedback along, but feel free to leave more in this enhancement request.”
      It’s the same reason Facebook is getting rid of the Discussions tab. They want it all to happen on the Wall. I think it’s the right choice, in terms of keeping Fb primarily social.

      • Andrew Smith says:

        Well they aren’t doing a very good job at preventing plenty of big companies from doing it(immediately after liking that is), try Pepsi for example: http://www.facebook.com/pepsi

        Or is it just me that’s magically kept on their X Factor tab?

        • Nope. I just tested, and the Pepsi site defaults to the Wall if you’re a fan. If a non-fan you do get the X FACTOR tab is you’re not a fan.
          However, I did see, with Firefox (I also tested with Chrome & Safari — and not IE, as I’m on a Mac), a couple times when I liked the page that when visiting http://www.facebook.com/pepsi that it went to the X FACTOR tab, but it inconsistently did that.
          I’m fairly certain that “big companies” aren’t getting preferential treatment in that area. With the other browsers, if I Liked and then went to that main URL (with no ?sk= after “pepsi”) that I default to the Wall.

    64. Thanks for this –> 

      if (top != self) top.window.location = ‘http://URL-OF-DESTINATION-TAB’;
      really helped me out there!!

    65. Bodzsár Tamás says:

      Thanks for the article! This webpage is very useful. My problem: I put this code before the fan-only ontent like you said. But this makes a redirect AWAY from Facebook! to the destination URL… What do I do wrong?

    66. Hi Andrew, I watched your video. If you come to the Pepsi page: facebook.com/pepsi and you’re a fan, you’ll land on the Wall, not the custom tab.

      In your video, you were toggling between Liking and Unliking the page and, as expected, you stay on that custom Welcome tab.

      This is normal because you *should* notice that in your browser address bar you see “pepsi?sk=app_154429284601166″ in the URL, which is the URL of the custom tab.

      If you go to the facebook.com/pepsi URL as a fan, you’ll land on the Wall.

      If you’re saying that accessing the /pepsi URL w/o any “?sk=app_” stuff after it, you still land on that tab, then I have no idea why it’s happening that way for you, because I can’t replicate that behavior.

    67. I did additional research and it indicates that, at least for me, the Pepsi fan page is working as I would expect. The other commenter demonstrated his issue in a video he provided, but it indicated he was just toggling between Like and Unliking and ending up on the Welcome tab anyway. I’m pretty sure this is because, when you Like a page you do stay on the same tab.

      • Hi Tim, I actually just “discovered” HyperArts (love it — wonderful information!), and when I visited your Facebook page, it seems like this redirect issue is affecting it as well (non-fans see the default landing page tab, they click the “Like” button, then the page automatically refreshes & redirects the [new] fan to the Wall)…  

        After looking over some of your [great] blog posts & tutorials, however, I realized that most likely you have it set so that the tab redirects to the Wall.  Long story short: I wasn’t going to mention it, but ultimately I figured I might as well take a minute to give you a heads up (just in case).

    68. The bug report is now here.
      I’d prefer not to test your “fix” just yet. Can you explain, at a high level, how you “get around” this bug?
      I’m actually thinking that it’s not a bug, that it’s Facebook saying, “OK, now your a Fan so let’s take you to the Wall where the conversation is.”

    69. Yes, I see that on our fan page, after Liking one is redirected to the Wall.
      I have a suspicion that Facebook may be phasing out holding people to the default landing tab after they Like a page.
      When you say “I realized that most likely you have it set so that the tab redirects to the Wall.” …. Where would one make that setting? I don’t see it anywhere in the Page settings nor in the App settings.
      Feel free to share, Aanjulena. Thanks!

      • Oh, sorry about that, the redirect option that I’m familiar with is a setting in this custom tab app:  http://www.facebook.com/Woobox?sk=app_208195102528120

        One of the Page Source options is “Redirect” so you can enter the URL that you want users to be taken to when they visit that tab…  For pages that use different content for Fans vs. Non-Fans, after setting the custom tab as the default landing page, with the Page Source > Redirect option, they could enter the URL for their page’s Wall, making the custom tab the default landing for non-fan visitors, but then automatically going to the Wall when they click “Like” from the custom tab.

        I hope that made sense…  It’s been a long week.  :)

    70. I have been wondering the same thing and I feel like a complete idiot! I must have misunderstood something badly…?

      This is the thing that I don’t understand: I have seen plenty of page tabs that show you completetly different, fan-only content after you have pressed ‘like’. Well, almost every single fan page tab works like this… But when you are redirected to this fan-only content from the non-fans content, the url stays the same, all the time. Doesn’t this mean that you still inside the same application? Are they using some different method than the one described in this article or I am just too stupid to understand?  How can you accomplish this?

    71. I an able to create a tab and put these javascript codes in it.  But the page gets redirected to to tab page right after landing on the welcome page, I wanted it to perform that action after people Like the page.

    72. It sounds like there’s an error in your PHP, so the Welcome tab is redirecting non-fans rather than fans.

    73. Is it possible to create a custom landing page and have people always see that instead of the wall?

    74. You can only set a default landing tab other than the Wall for non-fans. Fans of your Page, and Admins of the Page, will default to the Wall and you can’t change that.

    75. How do I set it up to have all vistors see the Fan Page Tab every time

      they visit and liking the page?

      Everytime they click ‘like’ and visit it again, it went back to fan page wall not the FAN PAGE TAB. I want it this my FAN will go directly to fan page tab.

    76. If a non-fan clicks on a link they see on someones page, say to a photo album, will they first go the default non fan page, or will it go directly to that link? Trying to figure out if this only works when you click on our page, or if it also works when you click on our other postings… thanks!

      • They go to the default tab IF the URL they click on is just facebook.com/some-fan-page.
        But if the URL to the tab includes “?sk=wall” or “?sk=app_xxxxxx” — that is, a specific tab’s URL, then that’s where they’ll go.

    77. Do I need to check the signed_reuest in order to do this

    78. andy rogers says:

      Do can do similar things on your WordPress blog using WP-LikeReirect

      Its an Awesome plugin can be used for redirecting users once they click the like button and Much Much more

    Trackbacks

    1. [...] Now for the Fan Content.  In this box, you will need to specify where to direct fans once they’ve liked your page.  Most folks I know what their fans to go directly to their wall, so in order to do that, we need to take a bit of code from another HyperArts tutorial page: [...]

    2. California Website Design…

      Facebook Fan Page Tabs: Redirect Users to Different Tab after Liking | HyperArts…

    Speak Your Mind

    *