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


Follow her/him on Twitter, Facebook or Google+!


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Facebook Twitter

Send this to a friend