Embedding panoramas in Facebook and Twitter timelines
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. -->
<!-- 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:
Panotour Pro requires some special steps, see this link for instructions:
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: