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

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

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

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

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

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

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!