If you’ve ever tried to use the native Facebook share functionality to share a specific tab on a Facebook fan page, you’ve realized that Facebook handles page tabs differently than external content, overriding the IFRAME tab’s Open Graph meta data with content from the fan page itself. If you’re building a promotional tab and you want to use a standard share, this can be very frustrating.
For example, if I stuck a normal “share” button on my own Facebook fan page tab, it might look something like this:
In the screenshot above, you can see that Facebook has overridden the Open Graph tags I have set up on the page tab’s iframe source url. It’s also added a special section underneath that shows a real-time count of the number of people that like the page (not the tab – the page).
Whether you’re just trying to link the share to the main fanpage or to a specific tab from a page tab, this can still be pretty frustrating, since you can’t specify what copy or images you want there.
What happens is that when you create your share button using the standard share code below, Facebook realizes it’s an internal Facebook url when it crawls the age to pre-fetch content for that preview – and then it overrides your OG tags.
Standard Facebook Share
[javascript] [/javascript]If you’ve ever struggled with this, you know that even trying to mask the internal url by using tinyurl.com or bit.ly doesn’t work, since Facebook follows the redirect and figures out that it’s an internal url.
Hacking the Standard Facebook Share
There is a hack that works (for now) at overriding this behavior, by detecting the Facebook pre-fetch crawler’s user agent string. That user agent string looks like this, according to my logs:
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
So the trick is to set up a routing script that detects whether the user agent is Facebook’s crawler. If it is, display the OG tags, if it isn’t, redirect to the fan page tab. This will allow you to use an external (non-facebook) url as your share url. Since it’s an external url, it will respect your OG tags – and if a user accidentally ends up on that routing script page, it gracefully redirects them to where they were going.
Since we don’t want to have to update this router every time Facebook releases a new version of their crawler, we want to just check whether or not facebookexternalhit is present in the user agent.
What you end up with is something that looks like this:
To accomplish this, we’ll create a routing script, named fb.php, that we use to sniff the user agent and display OG tags if the crawler is Facebook.
[php]
[/php]
On the tab IFRAME url that should contain the share button, you would modify the shared url to point to your router script:
[javascript] [/javascript]Using this method, you can even embed a video file in the share, just by specifying the appropriate OG tags.
When the user posts to their feed, to their friends wall, etc, they’ll see this in their newsfeed:
Note that thumbnail image is slightly larger in the newsfeed post because there was a video attachment. It would be the standard size shown in the preview on the share dialog if there was no video attachment.
Using jQuery/the FB JavaScript SDK
In a previous post, we discussed how to use the JavaScript SDK and jQuery to override this funky Facebook page tab sharing problem. That method still works great – but you’ll notice that there is a slight difference in the share dialogs between the one we create using jQuery and the one using this native Facebook method.
This is the share dialog that pops up when we use jQuery:
And this is the share dialog that pops up when we use Facebook’s native share:
Notice how on the jQuery version, we lose the “share on your wall / share on a friend’s wall / share in a group / send as private message/ etc” options? That’s because the feeds we’re asking Facebook to publish using the jQuery method is slightly different than a standard share.
Losing those additional sharing options may not matter to you, and you may be happy just using the jQuery/FB.ui method. But if you want those extra sharing features, this routing option seems to work. For now.
If you wanted to extend it, you could pass a query string to that fb.php router url, and modify the router to display specific OG tags based on what’s being passed in the query string – for example, fb.php?link=1, fb.php?link=2, etc.
If you’re making changes to an existing router or share, be sure to hit the URL Linter with your router url on Facebook to test and clear the share cache.
Testing Without the Linter
You can test to see what Facebook’s crawler will see by downloading the User Agent Switcher plugin for Firefox. Once you have it installed, edit the user agent list to add the Facebook crawler (you’ll find the menu in TOOLS > DEFAULT USER AGENT > EDIT USER AGENTS):
Then to test what Facebook’s crawler sees when it gets to your page, open a new browser window and set your user agent to your newly created Facebook user agent (TOOLS > DEFAULT USER AGENT > FACEBOOK). Hit your router url with Facebook set as your user agent, and you should see the page displaying your open graph tags. Switch your user agent back to the default and it should kick you back over to your fan page tab, as you specified in the header location part of the php script in the router.
