Facebook’s Timeline “Like Gate” Bug Solution (For Now)

Design & Development

R.J. LaCount Mar 2 2012

UPDATE: Facebook has fixed the bug! Here’s the deal – Facebook released their new Timeline for business pages along with a bug that broke our ability to redirect users to a hidden page after clicking “like.” They’ve fixed the bug now, but in the meantime we put together a template that uses an in-frame like button to accomplish this redirect. You can still use the template below if you want to include your own button in the middle of the page with your like gate. From a design standpoint, you’ll have greater control of the user experience, leading to greater potential for a new visitor to like your page.

Ever land on a business Facebook page and a custom tab asks you for a “like” in exchange for free swag? In the social biz, we call this a “like gate.” For clients, “like gates” are the most requested type of custom Facebook application because they’re great at attracting fans through incentives.

Yesterday, Facebook notified business page administrators all Facebook pages will switch to the new Timeline view on March 31st. This sounded great until we realized traditional “like gates” wouldn’t work anymore. After previewing client pages in Timeline, we noticed that Facebook removed the automatic page refresh function when a user clicks the “like” button. Facebook basically took away the pixie dust that allows us the ability to display custom content to people who like the Facebook page.

We finally heard back from Facebook this morning in the bug report thread, and they have thankfully confirmed that it is just a bug that will be fixed “soon.”

Given that it took Facebook two days to even respond, I’m not holding my breath for their fix.

While we wait, there is simply nothing we can do about the functionality of the like button on the top of the page. We can, however, use the Facebook Like Button plugin to include a second like button inside an iframe that provides the correct functionality.

If you want to get your pixie dust back, I’ve put together a template that includes all the necessary code for this, along with an ‘instructions.txt’ file with all the details you’ll need to build your own like gate with these files.

Code Breakdown

index.php

index.php

This file only serves to detect whether the user has liked the page or not, and direct them to either ‘before.php’ or ‘after.php’ respectively.

Before Timeline, this was all we needed. And after Facebook fixes the refresh bug, this method will once again redirect users to the proper landing page after they click “like.”

Note: We are required to include ‘facebook.php’ for this to work. This file is included with the template, and publicly available here.

header.php

header.php

We need to use the JavaScript hack to allow iframes taller than 800px to display without scrollbars. Since the contents of this file will be included in both before.php and after.php, we’re going to define the canvas height for each state inside an if statement referencing a variable we’ll set on each respective page.

Set the height of each frame in both JavaScript functions following the appropriate “$thisPage” variable declaration.

before.php & after.php

before.php

Pretty self-explanatory here. We’re using PHP to define the “$thisPage” variable and include the header and footer, then including the HTML5 version of the official Facebook Like Button. Just turn off the send button and faces, and include the URL to your business page as the URL to like when you grab the Like Button code from Facebook.

For after.php, just duplicate this template but change “$thisPage” to “After”.

footer.php

footer.png

In the footer we’re including the Facebook JavaScript SDK and necessary parameters for our iframe to function correctly. At the end of our JavaScript you’ll find where the magic happens that allows our in-frame like button to point the user in the right direction. Clicking on the like button triggers the event ‘edge.create’, so we’re subscribing to it and passing a callback function instructing the page to redirect to after.php.

style.css

style.css

The final piece to this puzzle is to hide the comments popup that appears by default when someone clicks the in-frame like button.

A CSS solution like above is a little hacky, but it works and it’s all we can work with at the moment. I just include the above rule after my CSS reset, as you’ll see in the template files.

Let us know in the comments if you have any trouble!

tags : DevelopmentFacebookSocial Mediasocial media marketing

related articles

3 Comments

  1. hajen

    Hey!

    I took your code, cause this Like Gate bugs are pissing me off. It’s exactly your code with my app id and app secret plus url to like. It works only when i visit the page, like it. Then it refreshes and I can see fan content. But when visiting same page again I see nonfan content and inactive like button. If I dislike and then like again it start working again.

    What’s the problem?

    My canvas: http://severe-warrior-5998.herokuapp.com/
    My page tab: http://severe-warrior-5998.herokuapp.com/index.php
    (same with secure URLs).

    I’m starting going mad ;/ It’s 2 days since I started and I can’t even develop “like gate”.

    Please save me.

    • Hey Hajen,

      I can’t see those pages because the code relies on Facebook data to function properly, so they need to be embedded into a Facebook page in order to view.

      Here’s a good tutorial on setting up a Facebook page for your frame, if you haven’t done that already: http://portent.co/IaRTVS (when you get to step 6, go ahead and use my Custom Tab Generator tool instead at http://portent.co/IFy0tQ)

      If you’ve already set it up as a Facebook tab, what happens when you click the official like button at the top of the page (assuming the trouble you’re having is with the custom button in this template)? The like gate bugs have been fixed now and we haven’t been having any issues with our clients’ Pages lately so I’d need some more information to narrow your problem down.

      Thanks,
      R.J.

  2. Matt

    Is it possible to get the page->liked from the javascript SDK?

    The response.authResponse from FB.login doesn’t seem to include this signed_request data. Even parsing the signed_request just includes code, algorithm but no useful data on the user or page id, admin liked.

Comments are closed.