Getting your interactive Flash-based panoramas to display on Facebook is a bit laborious the first time around — but once you get it, you’ve got it.
Unlike uploading photos/videos directly to your Facebook page or profile, you’ll want to add your 360° interactive panoramas as a link — or you’ll want other people to share your page, and have this 360° interactive panorama content show up in their Facebook feed. Take a peek at my Facebook Page to see some examples of 360° panoramas which I’ve shared.
Note that this tutorial should apply to any Flash-based video or other content which you want to share (or which you want other people to share) on Facebook.
NOTE: This page is no longer maintained. It is possible that some information is out of date. If you find this to be the case, please
comment below orvisit this amazingly helpful group of folks. Please do not email me, as I will either not respond or when I respond I will suggest you go to visit this amazingly helpful group of folks. As of Summer 2012, this tutorial still seems to work A-OK.
NOTE 2: I’ve moved on from 360° photography professionally — and am embarking on a new venture (bricks-and-mortar!) with (drum roll): Panorama Framing, Inc. …Check me out on Facebook, say hello. OK, back to your regular programming below.
Here are the main steps, in roughly chronological order:
Full instructions are below!
Facebook is going to have to make sure you’re trustworthy before they’ll let you post interactive content from your site to your profile updates or on your Facebook Page. You should only need to do this once for each domain/Web site. Go to Facebook’s Video Embed Whitelist Request, and you’ll see a form similar to the one below. Do this first, using your own information. While you’re waiting for a response come back and read the rest of this tutorial. Note that a response from Facebook could take a day, 2 days, or 2 weeks or more. I was whitelisted in a day or so. I have heard some folks say it took a couple weeks. YMMV. If you don’t get your site on Facebook’s whitelist, then none of the rest of the tutorial will work for you!
Use whatever panorama engine you want, and design and upload/update your Web pages as normal. After you’ve got your first successful interactive posting to Facebook, revisit your setup and see how you can streamline it (if you plan to do a lot of posting/blogging of interactive 360° images).
Adding a thumbnail image is very useful: this is the image which will appear on Facebook inline with your link/post, and what visitors will click on to view the interactive panorama and/or its page on your site. Currently the minimum size for a thumbnail image is 50×50 pixels; maximum size is the same as for video/Flash embeds: 398×460 pixels, with a maximum aspect ratio of 3:1. This thumbnail doesn’t actually have to appear on your Web page or in your 360° panorama — you’ll just be telling Facebook where the thumbnail lives.
Facebook automatically applies an arrow indicator on top of your thumbnail, to show a visitor it’s “playable”.
The Open Graph protocol (“OG”) is basically a set of metadata tags, placed in the head section of your HTML, which are specifically for identifying a Web page’s contents to the “social graph”. Using very similar syntax to what you already use in your Web pages, you can specify a subset of your Web page’s content and how it should be displayed on Facebook (or elsewhere: AddThis and others will sniff these tags).
But, what does all that mean to you? You’ll need to let Facebook know a few things about your 360° panorama and how it should be displayed; here are the currently required options for displaying things in the social graph:
How you want the title of your page/panorama to appear on Facebook.
Are you a restaurant, band or personality? Then, say so here (see list of choices at the Open Graph links). I use “article”, and I bet this is what most of us will use. In any case, read the information at Facebook’s OG links above, and decide for yourself.
This is the thumbnail image which you’ve designated to go inline with your link/post on Facebook.
This is the canonical URL to the Web page on which your 360° interactive panorama lives, or to the main top-level portion of your site from which everything flows (including your 360° image). Ask your SEO Guru about canonical URLs.
The OG tags below are technically not required, but they’re very important to us, for displaying our specific interactive content on Facebook or elsewhere within the social graph. So, consider them as required:
This is the URL to your 360° panorama display. Typically you’ll link to the engine’s SWF and optionally add info to tell the SWF where its XML file is. This will vary, depending on which engine you use. My examples currently use krpano, and I include a special XML for Facebook display. More on that later.
This is where you give the MIME-TYPE for your content — that is, tell Facebook that you’re displaying Flash content.
This is where you tell Facebook how tall and wide to display your content. Since our 360° panoramas generally display well at most any aspect ratio, the maximum height and width is what I put here. Again, the current maximum heights/widths are 398×460 pixels.
There are other optional tags (description is one), which you can read about at Facebook’s site. A good one, which I use, is fb:page_id which will let you “connect” your site to Facebook’s insights. Insights lets you analyze & track page visits, “likes”, links and other activity… Use this if you are a Facebook Page owner and link to things from your site there.
The above looks like a lot, but it’s not really, once you’ve done it one time. After that, it’s copy-and-paste (or PHP and walk away ). See below for an example of the complete set of tags, which I use at my site (and are specific to this very page):
<meta property="fb:page_id" content="your_page_id_here" />
<meta property="og:title" content="Posting 360° interactive panoramas to Facebook – Patrick Cheatham" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://patrickcheatham.com/wp-content/uploads/2011/03/shanghai_thumbnail.jpg" />
<meta property="og:url" content="http://patrickcheatham.com/" />
<meta property="og:video" content="http://patrickcheatham.com/wp-content/interactives/panoramas/_common/krpano.swf?pano=http://patrickcheatham.com/wp-content/interactives/panoramas/201012_shanghai_bund/tour_facebook.xml" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="460" />
OK, so you’ve got your 360° panorama uploaded and ready to go… Before you link to it on Facebook, you need to test it, test it, test it. There are many reasons to test before you go live, but one good one is this: Facebook, at some arbitrary point, caches some of the information on your 360° panorama’s page.
That means, if you share your page one week, then make a change to it some other week, it may not (read: probably won’t) reflect this on Facebook. Linting your link lets you test it, see what Facebook sees (for the most part), and make changes before you share it.
Basically what you do is go to Facebook’s URL Linter, input the URL to your 360° panorama’s Web page, and then review what Facebook tells you about it. The URL Linter give you some good info, and will give you informative errors; the main thing is you can catch things before they’re “live” and indelibly marked on the Internet. The URL Linter should read your OG metatags, display the thumbnail image you’ve uploaded, and give you warnings or errors too.
Now that you’ve prepared, uploaded, metatagged, linted and tested — you’re ready to share!
If you browse Facebook securely (if the URL in your browser’s address bar begins with https:), then your thumbnails will only link to your page or site; you won’t see interactive content on Facebook.
Currently Facebook is only displaying the Flash embed content; even if your panorama engine will display HTML5-based content when viewed on, say, an iPad, Facebook doesn’t cache or honor that — so your visitors will get a “please install Flash” message, and things aren’t pretty. I suggest you file a feature request at Facebook‘s developer portal! The more of us who make a hue and cry, the better.
I figured all this out by starting with the doc at Panoramic Photographers on Facebook, hitting the Facebook developer forums, and peeking at people’s code. None of the other information seemed as comprehensive, and none deal with Facebook’s preferred Open Graph protocol, etc.
As of right now this information is as up-to-date as I think it is.
If you have a question or kudos, or if I’ve made an error or omitted something: please visit this amazingly helpful group of folks. I can’t guarantee I’ll be able to respond personally to an ingquiry there, but maybe someone else can chime in.
I’ll try to keep this post updated.
Feel free to Like this tutorial on Facebook or link this on blogs!
Sam Rohn & Omer Calev are a couple of smart, helpful guys who have created PanoPress. If you use WordPress for your Web site or blog and want to display 360° interactive panoramas, then you’ll find PanoPress to be a really useful plugin!