Facebook feed panorama Tutorial

How to show immersive Panoramas as shown in the PhotoSurveyor page at Facebook - if you haven't already, please become a fan at Facebook:

PhotoSurveyor on Facebook

Recently, I was able to get my immersive images showing directly in the Facebook feed. After months of trying to share panos by putting static image links in the feed, it became obvious people were just not clicking the links-or even more important-seeing the images for what they are worth. So, after seeing several other panographers work showing directly in the feed, I decided it was time to figure this out. Here's my best attempt at sharing how I did it. Some have suggested going through Steps 2 and 3 first to make getting Step 1 accomplished a bit smoother with Facebook. Well, if you don't get Step 1 done, the other 2 are a waste of time in my opinion.

Step 1 Getting Permission to show live content in the feed

Facebook "White Listing" is a process whereby someone at Facebook reviews your web site-the place where your pano is going to come from.

This is a simple request to Facebook where you introduce yourself and your web site via a message through the 'Developer Help Contact Form' found here:

http://www.facebook.com/developers/developer_help.php

The category I used was 'Embedding Videos on Facebook'

In the 'Question/Issue' section, is where you would say something like this:

--------------
Hello Facebook development team.

May I have my site 'whitelisted' so I can add .swf file panoramas directly into my feed?

My domain is http://www.what ever your domain is.com.
I would like to add my immersive panorama images to my feed so they can be shared with others. Several other Facebook page profiles are doing this already.
Facebook examples of what I would like to do are found on the 360Cities and PhotoSurveyor pages as well as the personal profiles of 'Shawn Steigner' and 'Jürgen Schrader'. Thank you-
--------------

You should receive an email letting you know your site has been 'Whitelisted'. Unless Facebook has a hangup with your stuff of course.


Step 2 Preparing the .SWF file and feed thumbnail for compliance with the Facebook feed

You'll need to produce a stand-alone .swf version of your panorama that fits the Facebook template for the feed. I use Pano2VR from GardenGnomeSoftware

The size I found that seems to work pretty well and fill the width of the Facebook feed nicely is 470x350 pixels. I used the skin editor in the Pano2VR feed to make a logo-link that sends the viewer to my web site as well as another that opens to a full screen version of the same pano-also hosted on my site. Unfortunately, you cannot have 'instant-full screen' from the pano directly in the Facebook feed.

Here is one of the first posted .swf panos to the feed:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

You'll also want a nice thumbnail to show in the feed before people actually start the pano. That also must fit the Facebook template. I played around with sizing and came up with a 100x50 pixel initial view of this pano:

Facebook re-sized it to 90x45 pixels in the feed which I find showed up ok- not perfect, as their 'play' arrow covers part of the image but a decent compromise.

Once you get these two built and uploaded to your domain, your ready for step 3-

 

Step 3 Preparing the html page(with proper meta tags) for compliance with the Facebook feed.

So you got 'Whitelisted' by Facebook and you've built a compliant pano and thumbnail that have been uploaded to the whitelisted domain. Now you need a page that actually tells Facebook what and where your .swf and thumbnail files are. When you are adding a link to your Facebook profile, Facebook retrieves certain metadata from the page so the link will show some info in the feed entry. Your page will do exactly that with some html code. Facebook wants 7 things that define what video they are allowing to show in their feed-

  • Title
  • Description
  • Location of the Thumbnail
  • Location of the .swf pano file
  • Video Height
  • Video Width
  • Video Type

Here is the structure of this info and how it should show in your page you'll be posting(as a link) to your Facebook feed:


<meta name="description" content="South Miami Beach - Atlantic Sunrise 12-17-2008" />


<link rel="video_src" href="http://www.photosurveyor.com/panos/343/002.swf"/>


<meta name="title" content="South Miami Beach" />


<link rel="image_src" href="http://www.photosurveyor.com/panos/343/002.png" />


<meta name="video_height" content="350" />


<meta name="video_width" content="470" />


<meta name="video_type" content="application/x-shockwave-flash" />


This code is directly from the page used to show this pano at my own domain - here -

You would replace the text in red with the info appropriate for your info and locations.

Once you have this page built and uploaded, you can add the link to it in your Facebook feed and this information(along with the thumbnail and link to the pano) will be harvested by Facebook and you should be seeing your work showing directly in your feed!

NOTES

I used my main intro page for this particular pano when being shown at my domain as this is as good as anyplace to start incorporating Facebook functionality and share-ability for my panos. Now, to go through my gallery and build all the Facebook versions of what is worth sharing over at Facebook..... And to add a 'share this pano' button on them was well....It never ends....ah the internets, providing a constant feeling of never-finishedness

THANKS

Special thanks to those who got me here on this project:

Jürgen Schrader

Pat Swovelin

Pano2VR

Some discussion I was able to gain some info from is found here on the KRPano forum