Facebook: How to build a Like-button linking to a particular tab on a page

Florian has just mailed in, asking:

“How can I build a Like-button, that links to a particular tab on my Facebook-page, not the whole page itself?”

Since we get asked this is regularly, here’s a quick how-to:

1st Attempt: First thing you might want to try – put the the URL to your tab into Facebooks Plugin-builder like you would do with any other URL. Let’s try this with our “We are hiring”-tab (full URL: http://www.facebook.com/diesocialisten?sk=app_173159669408314):

Unfortunately, Facebook ignores the ?sk=… parameter, so the resulting like-button references the page itself (http://facebook.com/diesocialisten), and not the tab. You can easily verify this using the Facebook URL-Linter (Michael I. has introduced the Linter a while ago). The same behavior is expected when sharing the tab-URL directly on your Facebook-wall, so that won’t work.

2nd Attempt: the solution to this problem is quite simple! We just have to create an html-stump that only includes the Open-Graph-Tags (title & description of tab, image etc.) we want to be used (title & description of the tab, image etc.) when someone is sharing or liking our tab:


We drop this file somewhere on our webserver (f.e. http://apps.diesocialisten.at/tab/index.php) and test it with the Linter until we are happy with how Facebook displays the Open-Graph-tags:

But there’s still a big problem: when clicking on a share or like, users are now redirected to http://apps.diesocialisten.at/tab/index.php – which results in a blank page (containing just the “invisible” OG-tags). So what we basically need to do, is redirect everybody back to the tab, except of course the Facebook crawler, which we still want to feed the OG-tags. We do this by checking the user-agent-string, which identifies the crawler:

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

So here’s complete stub, which includes a tiny php-snippet to examine the user-agent and do the redirect accordingly:


And this is how the wall-posts, likes etc. referencing http://apps.diesocialisten.at/tab look like:

About Author

Michael Kamleitner

Michael Kamleitner is CEO & Product Manager at Swat.io, a Social Media Management solution that’s helping companies to improve their customer support & content management on Facebook, Twitter, Instagram and others. Swat.io is currently used by companies such as 3Österreich, Hitradio Ö3, ÖBB, Focus Online and Burda Intermedia. Follow Michael on Twitter, Facebook or Google+!

Comments

Leave a Reply

Facebook Twitter Google+ Foursquare SlideShare

Send this to friend