Posting 360 degree interactive panoramas to Facebook

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 or visit 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:

  • Get your domain/site whitelisted by Facebook
    • whitelisting is currently not required by Facebook!
  • Prepare your 360° panoramic content for the Web & get it uploaded to your site
    • Use your panorama engine of choice (PanoSalado, SaladoPlayer, Pano2VR, krpano, etc)
    • Any Web page will do, hand-done or via WordPress or other CMS & blog packages
    • Also prepare & upload a small thumbnail image, which is what will initially be displayed on Facebook
  • Add some specific Facebook-friendly metadata tags to your 360° panorama’s Web page HTML
  • Optionally add a crossdomain.xml file to your site’s root; this may or may not be necessary, but if you are getting security errors, this is probably the solution
  • Test your link
  • Post your link to (or get someone to share) your 360° panorama on Facebook!

Example of a 360° post to Facebook

Full instructions are below!

 

Whitelist your domain with Facebook

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.

Facebook Whitelist Screen

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!

Prepare your 360° panoramic content for the Web

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”.

Add Facebook-friendly Open Graph information to your Web page

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:

  • og:title

    How you want the title of your page/panorama to appear on Facebook.

  • og:type

    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.

  • og:image

    This is the thumbnail image which you’ve designated to go inline with your link/post on Facebook.

  • og:url

    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:

  • og:video

    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. :-)

  • og:video:type

    This is where you give the MIME-TYPE for your content — that is, tell Facebook that you’re displaying Flash content.

  • og:video:width, og:video:height

    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" />

Lint: not just for bellybuttons or laundry

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.

Facebook Lint

Share your link on Facebook

Now that you’ve prepared, uploaded, metatagged, linted and tested — you’re ready to share!

Adding a panorama page link to Facebook

Caveats

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. :-)

Notes

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!

35 Responses to “Posting 360 degree interactive panoramas to Facebook”

  1. patrick says:

    Ah, comments are working! :-)

  2. Ingemar says:

    Nice post :-)
    I was in Shanghai May 1st, but no panos… just regular pics. I was travelling light :-)

  3. Omer says:

    Great work Patrick, Thanks!

  4. patrick says:

    Thanks folks!
    Ingemar: Well, you’re lucky you can make a weekend of it! ;-) Next trip, I expect to see a panorama from the Oriental Pearl!

  5. Cedric says:

    Hi,

    first of all, great tuto :)
    I’ve sent my request to FB few days ago (so, I’m waiting the answer) but my problem is regarding the domain req to FB.
    I plan to publish my panos to my WP using panopress but the standard version, not the “just swf version” needed by FB.
    I’ve planned to put those versions on a domain http://facebook.domain.com
    My question is : which domain should be whitelisted on FB ? is http://www.domain.com or facebook.domain.com ?
    I thought logical to as the domain facebook.domain.com but now I’m not sure anymore regarding my choice…

    By the way, I think it will be a good idea for the future to have a https://facebook.domain.com to be able to see this on the secured version of FB, won’t it ?

  6. patrick says:

    Cedric:

    Thanks!

    I publish the exact same content to my WP pages here that I do to Facebook; only difference in the Facebook Page links is the XML file which scales down the buttons in the panorama. So, on my site here you’ll see either Flash content (.swf) if you’re viewing in a desktop browser, or the HTML5 (iOS) alternative if viewing on, say, an iPad.

    As to a subdomain just for Facebook? I’d like to be able to use one copy of my content in multiple places, without having to upload it to more than place. …It seems like more work, at any rate. ;-)

    I don’t know if Facebook considers subdomains as separate domains. Might hit their forums to find that out!

    Cheers,

    Patrick

    • Cedric says:

      Thanks Patrick for your answer.
      I thought the only working version for FB was the swf with everything included (the one made by MAKE PANO (SINGLE-SWF-MULTIRES) droplet)
      But of course if I can have just one upload, it will be a great idea.

      What do you think about having an https version of the page to be able to display the video on secured FB ?

      Regards

    • Cedric says:

      And as we are using panopress. Do you think it’s possible to fill the data for the opengraph tags from the plugin ?

      Using this in header.php of my template

      http://pastebin.com/1i0kkeiA

      I could hardcode the fb:admin value.
      I’d like to get the og:image from the panopress preview value
      I’d like to add the og:video value created from panopress file value.

      Just to brainstorm with myself to have the description value extracted from somewhere and be able to top using Custom Fields…

      • patrick says:

        @Cedric:

        RE krpano single-swf vs. virtual tour:
        Facebook will show the Flash content, whether it’s a full tour or single panorama. Facebook -won’t- display an HTML5 alternative, so iPad users will see a “get flash” warning. (See krpano’s site for tutorials on creating virtual tours, if you’re new to it; a bit out of scope of this tutorial :) …You can also view source at my site to see how I set up the XMLs)

        RE https:
        I don’t know. :-) If that’s the answer, then great! How does one do that?

        RE dynamically updating your OG tags via PHP/PanoPress:
        Check in at panopress.org forums… Maybe they can help you with modding PanoPress to do that. On this site I totally use custom PHP in my WordPress theme to write out the OG tags on each page. I’m certain PanoPRess could be modded to work with it, but that would limit you a bit to just what PanoPress handles (panoramas). If you sometimes post video or other Flash content, then handling it outside of PanoPress might make more sense. … Maybe another tutorial is needed for WordPress and customizing the tags? :-P

        Cheers,

        Patrick

  7. patrick says:

    Hey folks:

    It seems that Facebook have made Whitelisting not necessary; I’ve noted this in the tutorial above. I bet 360° panographers made too much noise for them to handle. ;-)

    Cheers,

    Patrick

  8. Andrew says:

    Hi,

    I’m quite a novice at being a Panographer… I am having no luck with embedding on to Facebook. I’ve created this:

    http://atxcloud.imgur.com/crossdomain_xml_ticket

    in attempts to allow someone more knowledgeable to help tweak what I fail to see as wrong. Please help! I leave for Hawaii in 11 days and would like to share with my friends/fam/world my pano’s.

    Thank you in advance!

    Andrew

    • patrick says:

      Hi Andrew:

      You might try setting the allowed domains in your crossdamain file to be, say, “*.facebook.com” or just simply (for testing) “*”.

      Also, make sure you’re not browsing facebook in secure mode (https://).

  9. Walter says:

    I have successfully posted a pano to facebook that works brilliantly. But when i alter the code and try and post a different video it does not want to work.

    Do i have to change the following

    For each panorama or something? How does it work? Can i use the same page id for all my panos? And what comes in page id?

  10. patrick says:

    Hi Walter:

    The page_id should remain the same across your panorama pages; this IDs your facebook profile/page.

    The only thing you must change would be the og:video content.

  11. lucio righetti says:

    Hi,
    thought I followed all instructions properly but, seemingly, did not…

    “Loading:Failed” is as far as I got it to work.

    http://www.facebook.com/IbizaPanoramas

    If you have any suggestion why it wont load, please let me know.

    BTW, thanks for all your work in the pano-sphere… (I am still using your Cache.swf plugin)

    best regards

  12. Paul says:

    Howdy. Awesome tutorial. I have it 9/10 of the way there. I have a lot of juicy 360′s I want to share vis-a-vie facebook and your tutorial is pretty much only one I can find and make sense of. I THINK my issue is something to do with code _common/_common_xml_facebook.xml which I am just not sure what is supposed to be there.

    I pretty much copied a lot of your code and if you have a momemt any insight is most helpful. The 360 is here: http://stepinsidechicago.com/shoots/hostels/getaway/lobby/lobby.html

    And the facebook wall post with IO error on our page is here: http://www.facebook.com/pages/StepInsideChicagocom/248912015154734?sk=wall

    When I run it through the linter I get this for many of the gs:

    The og:url property should be explicitly provided, even if a value can be inferred from other tags.

    ANY help is greatly appreciated. Been at it for about a month off and on.

    THANKS in advance, PEC

    • patrick says:

      Hi Paul:

      You’re using PanoTour to generate all your XML, so you should make sure to point Facebook/KRPano to what it outputs. Right now you have:

      property="og:video" content="http://stepinsidechicago.com/shoots/hostels/getaway/lobby/lobby.swf?pano=http://stepinsidechicago.com/shoots/hostels/getaway/lobby/tour_facebook.xml"

      When what you probably want is:

      property="og:video" content="http://stepinsidechicago.com/shoots/hostels/getaway/lobby/lobby.swf?pano=http://www.stepinsidechicago.com/shoots/hostels/getaway/lobby/lobby.xml"

      I use a special setup for my site, delivering different elements to Facebook, iPad, etc. For simple sharing-to-Facebook, I don’t think you need to use any of my XML underpinnings — what Kolor’s program outputs should suffice for you. I’m happy to consult on the clock with you if you’d like to explore further customizations for your WordPress based sites.

      Cheers,

      Patrick

  13. Per Hansson says:

    Hi,
    Great guide and awesome work Patrick!
    However I felt there should be an easier way for people to streamline this method so I hacked the template files for krpano users.
    I use the single swf-option (tiled) right now because I don’t know how to make global skins and xml/behaviour. I changed the extension name of swfkrpano_inline-js-singleswf.html to .php, then added [moderator edit] this code: http://pastebin.com/GX0S6Ftt

    Now when you drag your panorama picture to any of the single-swf droplets and upload the files to your server. You can post the link to your swf-file and everything will be all sett. Just remember to create a preview image with the same name as your swf but add the suffix “_fb.jpg”.

    Best Regards, Per

    • patrick says:

      Thanks Per, and looks good to me!

      I should note though that this is KRPano specific; folks using other engines will need to make their own hacks. ;-)

      P

  14. Per Hansson says:

    Forgot to say that if you don’t want to make a preview image you can just rename the original panorama image to filename_fb.jpg and facebook makes resizes it automatically. One can edit the above php code and remove the ‘_fb” and you wont even have to rename it to use it as preview image.

  15. toni says:

    Hi,

    just one question..

    is it possible to publish panorama on facebook when panorama content is on amazon s3 storage console ?

    i have problem with that.. any idea or just “no, it/s not possible!” ? :)

    thanks,
    t

  16. Tom Lassiter says:

    Patrick,

    Without your tips, I never would have figured out how to make Facebook pano friendly.

    Thanks!

    Tom

  17. markod says:

    Hello! And thanks for tutorial !

    I did everything! But when I’m posting panorama on facebook and press play panorama button it shows me error message:

    FATAL: tour.xml – loading error (Security error)

    Please help me.. how to fix it???

    • markod says:

      Message from facebook debug:

      Parser Mismatched Metadata:The parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input property =>content pairs that were not seen in the parsed result: ‘og:video:url => http://panoworld.co.uk/360/oxburgh/tour.swf?pano=http://panoworld.co.uk/360/oxburgh/tour.xml

      • admin says:

        Hmm…. Sounds like there’s an issue somewhere inside your code/HTML?

        • markod says:

          I don’t think so.. Can be something wrong:
          perty=”og:video” content=”http://www.panoworld.co.uk/360/oxburgh/tour.swf?pano=http://www.panoworld.co.uk/360/oxburgh/tour.xml” /> ??

          Or maybe I need put some coding in tour.xml??!! Or maybe crossdomain ?? I did some crossdomain but I’m not sure that it is right…

          • admin says:

            Also try:

            allow-access-from domain=”*”

            …in your crossdomain.xml file. Then run the link through FB Lint again. Then try posting again. It’s possible, I suppose.

      • admin says:

        Hey there:

        Have you tried just removing or commenting out the “og:locale” metadata line? That seems to be what FB Lint is talking about specifically.

  18. [...] Posting 360° interactive panoramas to Facebook | Patrick Cheatham. This entry was posted in 360. Bookmark the permalink. ← In a hurry? Here’s the ultimate one page guide to composting. [...]

  19. raymo says:

    Can we post panos directly to FB personal profile pages, or does this work only for business ones etc?
    I read somewhere that it can’t be done, but that’s unconfirmed and things might be different now.

    We can post links to videos directly to personal pages, and they play within the FB personal profile just fine, so I would expect to be able to do it with panos because they seem to be treated exactly the same as flash videos.

    Has anybody achieved this?

    I am aware you can just share a pano from a business/group page and post to your personal wall – that is not what I’m after.

    PS thanks for the excellent article Patrick! Very helpful.

    • admin says:

      Hey there!

      You’re welcome, glad it helped out…

      I’ve posted panoramas before to my personal FB profile without problem, but can’t seem to tonight. No matter what I do, I get forced into an https connection — and that’s always been an issue with displaying interactive content on FB.

  20. Antonio says:

    Hi, only for say thank you, I succeeded with the post on facebook (the 2 versions, one for little windown and one for web page).
    here the example:
    http://www.facebook.com/trayectovirtual