Embedding Virtual Tours on Facebook


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.

embed facebook 1 Embedding Virtual Tours on Facebook

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.

Be Sociable, Share!
This entry was posted in Tutorials and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

18 Comments

  1. Posted March 15, 2010 at 11:29 pm | Permalink

    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

  2. Posted March 18, 2010 at 10:27 am | Permalink

    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

  3. Posted August 11, 2010 at 8:25 pm | Permalink

    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

  4. Posted August 11, 2010 at 8:31 pm | Permalink

    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

  5. Posted October 27, 2010 at 5:20 pm | Permalink

    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

  6. Posted October 28, 2010 at 1:29 am | Permalink

    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

  7. Posted October 28, 2010 at 3:13 pm | Permalink

    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

  8. Posted October 28, 2010 at 11:29 pm | Permalink

    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

  9. Posted October 29, 2010 at 3:45 pm | Permalink

    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

  10. Posted November 14, 2010 at 9:58 am | Permalink

    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

  11. Posted November 15, 2010 at 6:57 pm | Permalink

    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?

  12. Posted November 17, 2010 at 2:09 pm | Permalink

    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

  13. Posted November 17, 2010 at 2:20 pm | Permalink

    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

  14. Posted November 23, 2010 at 1:21 am | Permalink

    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)

  15. Posted November 23, 2010 at 8:52 pm | Permalink

    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

  16. Posted November 28, 2010 at 10:00 pm | Permalink

    Hello Tom
    I already solved the problem.
    The White Pages Facebook had not yet been discharged.
    Muchas Gracias!
    Greetings
    Eduardo

  17. Posted February 20, 2011 at 7:26 pm | Permalink

    Hello Tom,
    this tutorial actually works !
    I had a problem with emding external .xml files but now it works like a charm.

    Thanks,
    Sasha.

  18. Abel
    Posted June 25, 2011 at 6:27 pm | Permalink

    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 …

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>