Virtual tours are more accessible now and can easily be shared and embedded into facebook. So not just will a virtual tour enhance your own website but you can also use to share across a variety of web 2 social networks. This makes a powerful promotion tool, for example when we covered an art exhibition recently, we were instantly able to share the panoramas with their fan group page on facebook. Look at this example of the London aerial tour on my Facebook page.
Virtual tour embedded in facebook
Click here if you would like to try embedding this tour on Facebook.
If you are a developer, the first thing you will need to do is get Facebook to whitelist your website, on approval you will then be able to to use the meta tags to correctly embed your flash content into Facebook.
<meta name="title" content="video_title" />
<meta name="description" content="video_description" />
<link rel="image_src" href="video_screenshot_image_src url" />
<link rel="video_src" href="video_src url"/>
<meta name="video_height" content="video_height" />
<meta name="video_width" content="video_width" />
<meta name="video_type" content="application/x-shockwave-flash" />
Note
Image_src – URL to the thumbnail image. Max size is 130×110 pixels. Images will be resized proportionally
Video_src – URL to the embedded video file
Video_height – max height is 280px
Video_width – max width is 420px
Video_type – For Flash content, use “application/x-shockwave-flash”
So here is a working example
<meta name="title" content="Aerial virtual tour of London">
<meta name="description" content="Amazing view of London from above.">
<link rel="image_src" href="http://www.mysite.co.uk/myfolder/images/myimage.jpg">
<link rel="video_src" href="http://www.mysite.co.uk/myfolder/myflashfile.swf">
<meta name="video_height" content="315">
<meta name="video_width" content="425">
<meta name="video_type" content="application/x-shockwave-flash">
Sometimes you might want to show a different tour in Facebook than the one used on your webpage. This is no problem as you can just reference the tour you want Facebook to show.
More info on meta tags and preparing your flash content for Facebook, can be found here.
Site RSS Feed
Twitter
Google Earth
360 Cities
18 Comments
Hi Tom,
I have been wondering how to embed a VR panorama (krpano) onto facebook, and today by googling, I found your information listed here. Thank you for being generous and courteous in spending time to write such beginning steps of how-to-do.
Following your instruction, I requested Facebook for whitelisting my website, and I wonder how long it will take Facebook to approve it, and upon approval will I receive any notice at all.
Lastly, I want to sent you a little note with a big thank-you to you. I really appreciate your time.
Regards,
–
Val Hoang
panographer@360california.com
Hi Val,
Thank you so much for your kind words, I also appreciate you taking the time to leave a comment. I’m glad you found this information useful. It took about 3 days to whitelist this site, and you should receive an email confirmation when its been done from Facebook.
Best wishes,
Tom
Heyyyyyyyyyyyyy
This is a great article !
I’ve been looking for this kind of info a long time.
BTW: How do I get Facebook to whitelist my website ? is ther a specific place to ask for that ?
I did not find anything like this in my FB profile
Thanks a lot for sharing
Best
AYRTON
Hey Ayrton,
Thanks ! Its great to have you visit my blog, I am a fan of your work !!!! Here is the link to ask FB to white list your site.
Let me know if you need any further info,
best wishes,
tom
Hi,
i’ve done all according to your instructions and we are already whitelisted …. thanks for this info …. but … now …. where do i have to put the code-example you have written …. i’ve changed you example to my needs , but where to i have to put it now ? …
thanks for your help
Hans | mthrills
Hi Hans, you have to place it between the
tags at the top of your html file – let me know if you need any further help.Best wishes,
tom
Hi Tom,
thanks for your quick response. but i still do not understand completely. With you code-example in the head of my html-file, i link to this site from fb and fb recognized the metatags and shows the preview pic ?
but if i don’t have an pano-picture.swf, but only the player.swf and an xml-file, which references the real pano, it won’t work ?
Hans | mthrills
Hi Hans,
Sure…. if you link to a thumbnail (must be Max size is 130×110 pixels) then facebook will show it, you can always enter the thumb url straight into the web address bar just to check it is uploaded properly.
Regarding the swf panorama, you cant use a pano.swf with an xml in the meta, but you can package the xml with pano.swf with your panorama player software. I use KRPano, and use krprotect to package my tour into single swf file. You can also do this with pano2vr, and I am not sure but probably with FPP and most other players too. So it sounds like you just need to package up your tour. Let me know what software you are using and I can help you further.
Hope this helps ?
Best wishes,
tom
Tom,
now i got it …. finally it means, that i have dto do one further step to create a single ‘my-picture.swf’ to let it appear directl in fb …. i thought i could save this step and use already exsisting files and xml etc. …..
so to place a single.’my-picture’.swf’ is almost useful with one of the best panaoramas i have …. well, okay, it saves fb from getting overrun by panos ..
i do use the krpano player and it’s tools …. although i do not package the pictures….
best regards
hans
you can actually include your xml like this
http://mysite.com/pano.swf?http://mysite.com/pano.xml(using absolute paths helps wordpress & other dynamic cms find the xml file properly)
its working this way on my site now – http://www.samrohn.com
im actually using the url vars to load a mov file in fb embeds at this point, cooking up a custom xml for fb is next up…
one other thing, seems that facebook sometimes (?) caches old links in some way though, so links from my site i’ve previously posted do not show always the embedded panos…
sam
Hi, I seem to be completely clueless when it comes to this stuff!, do I paste this code directly into my fmbl box, or is there something else I need to include with it?
Hi cbkphoto,
The code above needs to be within the head tags (top of your page) of the page you are linking to. So if i wanted to share and embed a panorama from this page, I would post the above code in the html or php head section of this page.
Let me know if this makes sense ?
best wishes,
tom
Hi Sam,
Ha ha yeah you have taken things a bit further
I did something similar on toursfromabove.com where we got custom fields for facebook tours. I’m sorry I can only paste in as an image file, as the code markup plugin is on the blink 
Thanks for posting here Sam we love your panoramas, and this afternoon have planned to look at your WP/KRpano tutorial
Best wishes,
tom
Hi Tom
thanks for this article is great!
Pano2VR user, is a swf file.
I did everything according to your instructions but I get the expected results.
Clicking on my facebook opens a popup window
Why?
please helpme
Greetings
(from Argentine)
Hi Eduardo,
Thanks – regarding your problem – I am not sure – is your site white listed by Facebook ? Is it possible for you to share a link to your tour, then I am happy to look into it further.
Best wishes,
tom
Hello Tom
I already solved the problem.
The White Pages Facebook had not yet been discharged.
Muchas Gracias!
Greetings
Eduardo
Hello Tom,
this tutorial actually works !
I had a problem with emding external .xml files but now it works like a charm.
Thanks,
Sasha.
TOM Hey, I’m from Peru and I congratulate you for your excellent post, very interesting …
But actually I have some doubts, let me explain:
For scenarios I use PanoramaPlayer, I agree with instructions to view xml, but I want to upload to my facebook profile, I realized that first you must request permission from facebook, ok then I put the address of the hosting service you used to store images of the scenarios ..? or I can put just the URL of the page views of any company as “PanoramasPerú” or “PixelCase “..??
Sorry if my question sounds very simple but still do not quite understand, thank you …