I recently launched a side project with some friends and wanted to use Facebook “Likes” as a simple voting mechanism (and viral marketing tool of course). The page (plug: http://threelikes.com) gives you a link every day in one of three categories. Basically a simplistic cure for information overload from all those social aggregator/news sites. I wanted to include a Facebook Like button beneath each link in each category so people could vote on it. Simple enough you would think. Facebook provides a little wizard for creating the buttons and it didn’t take long to figure out how to customize the url that was being liked.
Each link has the format threelikes.com/date/category so people go to the sites via us (for statistics purposes and so people can share the link - we bought 3lik.es for that purpose). Being a good internet citizen (and in order not to comply with Google “law”) I decided to implement a permanent redirect (HTTP 301) for redirecting to the actual destination site.
Next up I started testing the “liking”. At first everything looked great, the site was appearing on my wall. But wait, no reference to our site. Turns out Facebook respects 301 redirects. This makes sense (why would you store or show the “old” link that is redirecting) but is not optimal for us. Apart from not contributing to our viral marketing it actually defies the purpose of including it: the voting. My first test suddenly displayed “400 people like this” which was great but only on the surface. Because my short link was redirecting to the much bigger destination site it was displaying the likes from the destination site on my page. This distorts the voting results.
So my solution was to return a client site (META refresh) redirect from an intermediate page. This is not perfect (and if anyone has a different idea please ping me) but it achieves what I wanted. People click like and the information (title and a short description) we provide appears alongside our own url. When people click they briefly see the intermediate page (unstyled in order to reduce page load) and are then redirected to the main page. Worked great, except for the times when it didn’t.
I’ll spare you all the dirty details of debugging the like button, but the most important parts are:
- Check you have all the required open graph meta tags in your page and choose the right og:type (in my case the redirect page is article not website - read about the difference here).
- Check the url you are liking in Facebooks lint: https://developers.facebook.com/tools/lint/
- If and only if there are no errors, click once with your real account (do it too often and your urls start to get blocked and the error message is hard to find!)
- You can test a bit more by using Facebook test users (available via developers.facebook.com).
Some things I will think about in the future is: (1) using a iframe or standard frame (2) finding a way to use server side redirect but customize the Facebook Like url to point to us