Facebook’s Timeline “Like Gate” Bug Solution (For Now)
R.J. LaCount Mar 2 2012
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.
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.
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”.
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!
R.J. brings several years of web design and front-end development experience to Portent. His attention to detail borders on neurosis and he always takes care to create pixel-perfect websites for clients. Read More
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques
- Portent.com: They’ve gone to plaid