Embedding panoramas in Facebook and Twitter timelines

Facebook-and-Twitter-pano-embed-tutorial-featured-image
Embedding an interactive panorama in your Facebook and Twitter social media timeline is possible, although there are a few ‘gotchas’ and caveats to deal with.

  • First, you have to make your panoramas available online yourself; you can’t just add them from your computer to Facebook the way you do with regular images.
  • Second, for the forseeable future your panoramas must be set up with some kind of Flash-based player. You don’t need to force this to be the primary option in your own site, but at this time Facebook will only embed panoramas that can present a Flash-based view.
  • Third, you must serve your panoramas from a secure server, one that uses https rather than http. You’ll need to see your existing site’s hosting options for this. With Dreamhost, for example, this is a $10-a-year-per-domain addition to your hosting fee. Costs from other host companies will vary, but it shouldn’t be much more than this; you only need basic https support.
  • Finally, you must add a set of meta tags in the head portion of the HTML page that shows your panorama. Use a page that shows the panorama on its own rather than one that presents it within a layout along with other content.
  • Okay, for Twitter, technically it isn't currently possible to actually embed an actual interactive panorama in tweets so they show up in anyone's timeline. The technique used here will use the 'Summary Card with Large Image' Twitter Card format for your content, displaying your preview image and summary text full-size in the Twitter stream and making that a link to your content. (One more caveat: Twitter still doesn't auto-expand tweets with 'card' content except for simple Twitter-hosted images and a few white-listed organizations. Yes, we're frustrated by this too.)

Below is an example of a fully-functional set of meta tags for embedding a panorama in both Twitter and Facebook timelines. Feel free to use this in your own pages, but remember to edit the values as appropriate to refer to your own page, preview image, title, panorama SWF engine, Twitter name, and so on. The 'ALL-CAPS' text is what must be changed for your own use. If you're not interested in the Twitter part of this just ignore it or, if you prefer, remove the Twitter-specific meta tags from the the example code.

If you are only interested in Twitter use, the og:title, og:description and og:image tags are functional OpenGraph fallback equivalents to twitter:title, twitter:description and twitter:image. More details are here: https://dev.twitter.com/cards/markup

We hope that Facebook will eventually accommodate HTML5 players in this embedding process. At the moment Flash is the only option, but keep an eye on this page; when anything changes we will let you know. The same goes for true interactive embedding of panoramas in Twitter feeds.


<!-- SOCIAL TAGS -->

<!-- for Twitter card use (your site must be validated with Twitter first or it does nothing) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@TWITTERNAME" />
<meta name="twitter:creator" content="@TWITTERNAME" />
 

<!-- For Facebook post and Twitter card use -->
<meta property="og:site_name" content="YOUR SITE NAME" />
<!-- This is meant to be your whole site name (and nothing but the name). -->
 

<meta property="og:url" content="http://YOURSITE.COM/PATH/PAGE.HTML" />
<!-- Yes, we know Facebook should know where this page is as it's reading it, but it still needs this. -->
<!-- By the way, this DOESN'T use the https prefix -->
 

<meta property="og:title" content="TITLE OF THE PAGE" />
<!-- Duplication of the standard 'title' tag. Needed to get a title in your post display. -->
<!-- Don't include your site name or similar branding, keep it about this pano. -->
 

<meta name="Description" content="LENGTHY DESCRIPTION HERE"/>
<!-- Describe the pano. Facebook recommends at least two sentences and gives a 100-word example. -->
 

<meta property="og:description" content="LENGTHY DESCRIPTION HERE"/>
<!-- EXACTLY as above, but the 'og:description' rather than the 'description' form. Describe the pano. Facebook recommends at least two sentences and gives a 100-word example. -->
 

<meta property="og:image" content="http://YOURSITE.COM/PATH/PREVIEWIMAGE.JPG" />
<meta property="og:video:width" content="1200" />
<meta property="og:video:height" content="630" />
<!-- The width and height of the space the preview image will be in - or at least the width/height ratio of the inline preview area. -->
<!-- This DOESN'T have to be your preview image's actual pixel size OR dimensions. You can use one of your cubeface images rather than a specific 'preview' image if you like. -->
<!-- The recommended size is 1200x630 pixels, and the preferred minimum is 600x315. The absolute minimum is 200x200, but don't go that small. -->
 

<meta property="og:video" content="https://YOURSITE.COM/PATH/PANO.SWF?xml=https://YOURSITE.COM/PATH/PANO.XML" />
<!-- NOTE: This is the only tag that uses the https secure site URL reference. -->
 

<meta property="og:type" content="article" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<!-- DON'T CHANGE THIS. See http://ogp.me/index.php#types for more info. -->
 

<!-- TEST URL for Facebook: https://developers.facebook.com/tools/debug/ -->
<!-- TEST URL for Twitter: https://cards-dev.twitter.com/validator -->

<!-- END SOCIAL TAGS -->


Based on instructions by Sam Rohn, who also wrote the following:

IMPORTANT - FB caches links for 7-10 days, meaning it will not show any changes in your code after it sees a link for the 1st time - to reset this cache , use the FB url debugger, which is helpful for fixing first-time setups:

http://developers.facebook.com/tools/debug

Panotour Pro requires some special steps, see this link for instructions:
http://www.autopano.net/wiki-en/action/view/Panotour_-_Web_publishing#PUBLISH_A_TOUR_ON_FACEBOOK

WordPress:
embedding panoramas from a WordPress site is a bit more complex, and requires either knowledge of coding wp templates, or you can use a plugin which allows custom header code per post, for example http://wordpress.org/extend/plugins/enhanced-header-footer-injections/


< meta property="og:site_name" content="SITE TITLE" />
< meta property="og:url" content="PAGE URL" />
< meta property="og:title" content="PAGE TITLE" />
< meta property="og:type" content="article" />
< meta property="og:image" content="PREVIEW IMAGE URL" />
< meta property="og:video" content="PANO SWF URL" />
< meta property="og:video:secure_url" content="https://secure.example.com/my-pano.swf"/>
< meta property="og:video:height" content="300" />
< meta property="og:video:width" content="400" /&>
< meta property="og:video:type" content="application/x-shockwave-flash" />

For a complete list & descriptions of open graph og:metatags see http://ogp.me/


Older tutorial links:

https://www.facebook.com/notes/panoramic-photographers-on-facebook/facebook-panorama-embed-tutorial/172042586173194

http://patrickcheatham.com/posting-360-degree-interactive-panoramas-to-facebook

http://www.photosurveyor.com/tutorials/facebook/

http://www.vrwebdesign.co.uk/tutorials/embedding-virtual-tours-facebook/

http://krpano.com/forum/wbb/index.php?page=Thread&threadID=1837

6 thoughts on “Tutorial – Embedding VR Panoramas in Social Media

  1. Just to want you to give you an idea how it works in perfect world when computers do the work and you enjoy the result.

    You upload a 360 panorama to the service.
    Publish it
    Click the share button
    Put some text
    Click ‘Do It’
    Enjoy the result on Facebook (in 360)
    Or in Medium (again in 360)
    Or in Twitter (unfortunately twitter can show only old plain 2d, but it will come with the accompanying link to 360)

    I use Virgo 360 for that

    • Keith Martin

      Hi Stan,
      Absolutely, there are quite a few 360 pano hosting services that deal with this for you. If someone is happy to publish that way it’s MUCH simpler. But if they want to have full fine-grained control over this and other things, the above tutorial and code example will help. It’s the kind of thing that the phrase “horses for courses” was made for. ;)

      • Keith, can’t disagree, when you are doing anything manually, you have the full control over it.

        However, I can tell you that you have pretty much the same control in virgo360 case too.
        Let’s see:


        That tile will be the name of your tour. So you name it, and it comes here;
        description – exactly the description of your tour;
        image – the icon of the tour. And the icon again controlled by you, not by the service. You can make a screenshot from 360 or you can upload your own.
        Or if you share to FB, then it is the whole 360 image, not just the icon.
        And so on. We really went the extra mile to make it working.

      • I see, it doesn’t like my code tag
        What was eaten by hungry html preprocessor is just simple og:title record

  2. Keith Martin

    Hi Margaryta,

    First, I apologise for not responding sooner!
    Okay, the most effective way to get this working is to make your own HTML page that shows nothing but the panorama. The kind of output that KRPano, Pano2VR, PanoTour Pro and other similar tools create is generally perfect. When you have an HTML file that shows your panorama 100% width & height in the browser window, edit that file and add the above set of meta tags. Customise them to fit your own setup (domain name, path to the files, etc.) and then try it in the Facebook Debugger page.
    I have a customised KRPano setup so the meta tag set is added automatically and even partially filled out for me, but I still have to go in and tweak the paths and details.
    Don’t try to go any further than this until you have it working. At that point you could, if you want to, look at customising your WordPress post templates or using header code injection techniques, as outlined by Sam above. But that’s running – make sure you can walk first! :)

    Any help?

    Keith

  3. Hello.
    I tried to read your article for about 15 times, but haven’t got anything (my fault :()
    Can you please explain exactly what should I do? I mean, I have my website (wordpress, ecommerce linux hosting, but I can use some hidden pages for this kind of uploads because it would be really useful for my other jobs), where I just requested for an https connection with the ssl certificate, but… Then what? I have to create an html page with these tags? Thank you in advance for your help – you’re my only possibility to understand as there’re no other tutorials online :’)

Leave a reply