Panotour Documentation - Web Publishing

Jump to: navigation, search

Panotour - Style - Plugins library - Video > Panotour - Style - Plugins library - Viewers > Panotour - Advanced - HTML Templates > Panotour - Notions - Understanding a built Virtual Tour > Panotour Documentation - Web Publishing

1 Introduction
2 Standard code for Web Publishing (iFrame)
3 Publishing a tour on a Wordpress Blog
4 Sharing a tour on Facebook
5 HTML and XML+tiles on different domains without iFrame - Crossdomain

Please note that web development and publishing is not a service that we provide, and as such we can not offer technical support on this matter beyond this documentation page; nevertheless, you can use the Panotour Forum if you have questions on this subject.

Introduction

A virtual tour is not a simple image or file, it is a group of files that have to be hosted on a server.
Although Panotour includes a FTP Client to load your virtual tour directly on to your server, a minimum of knowledge in web publishing is required. However, launching a virtual from your website is quite simple when all the files have been uploaded, just launch the .html file from your browser.

Notes:

If you don't have a server, have a look at setting up an Amazon Simple Storage Servers. You can also find many other paid or free web hosting solutions with a quick web search.
If you want to know more about the role of the different files in your built tour, see our page understanding a built Virtual Tour.

Standard code for Web Publishing (iFrame)

To display your virtual tour on your website, you can use this standard code :

<iframe src="http://WWW.MY-DOMAIN.COM/VIRTUAL_TOUR/MY-TOUR.html" width="800" height="600" allowFullScreen></iframe>

You need to replace the URL (or the words written in capital letters) by your own parameters.
You can also change the display dimensions (in pixels or percentage), by modifying the width and height at both places in the code.
The "allowfullscreen" attribute is mandatory if you want to allow your tour to be fullscreened
When integrating an iFrame on a website with a responsive design, follow the steps on this page to make the iFrame responsive too.

Publishing a tour on a Wordpress Blog

For a successful integration of your tours on a Wordpress blog, you can:

Use the wordpress plugin called "PanoPress" developed by Sam Rohn and Omer Calev. You will find this plugin and more information on it's use here: http://www.panopress.org/ Note: Support for the use of this plugin is on the PanoPress forums.
- Kolor does not provide support for Panopress.
Use an iFrame, if you are looking for a simpler solution, but PanoPress offers more advanced possibilities for the integration.

Sharing a tour on Facebook

About sharing on Facebook

Facebook is a very "alive" social network, integration methods of a page in a ticket are subject to change at any time.
Unlike a video, a virtual tour can not be loaded/installed on Facebook.
After sharing your page, Facebook caches it. If you have noticed an error (no preview, bad title... etc...) from your first sharing, any next change of your page will be useless, the page displayed will still be the same (which appear in the post). To make your second post reflecting your changes, delete your page from the Facebook cache by filling in the URL of the page you want to share in the Facebook debugger
Read Facebook Content Sharing - Best Practices for Websites & Mobile Apps
The information below is valid at the time they were written. We do not guarantee that this method properly work when you read this document.

Only the thumbnail and information with an external link to the virtual tour

Add these tags into the main HTML page of the virtual tour and replace data by your own:

<meta charset="utf-8" />
<meta name="medium" content="mult"></meta>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
<meta name="apple-mobile-web-app-capable" content="yes"></meta>
<meta name="apple-mobile-web-app-status-bar-style" content="default"></meta>

<title>VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano</title>
<meta content="VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano" property="og:title"></meta>
<meta name="description" content="VIRTUAL_TOUR_DESCRIPTION"></meta>
<meta content="VIRTUAL_TOUR_DESCRIPTION" property="og:description"></meta>
<meta name="keywords" content="VIRTUAL_TOUR_TITLE,Virtual tour generated by Panotour and Livepano"></meta>
<meta name="generator" content="Panotour Pro V2.2.0 + Livepano"></meta>
<meta content="AUTHOR_NAME" name="Author"></meta>
<meta content="COPYRIGHTS" name="copyright"></meta>

<meta content="http://URL/PATH/VIRTUAL_TOUR_NAME.html" name="url"></meta>
<meta content="http://URL/" property="og:site_name"></meta>
<meta content="PATH/" name="directory"></meta>
<meta content="http://URL/PATH/VIRTUAL_TOUR_NAME.html" property="og:url"></meta>
<meta content="article" property="og:type"></meta>

<link href="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" rel="image_src"></link>
<meta content="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" property="og:image"></meta>

Notes:
Facebook use these limits for thumbnails :

On desktop, a large link preview will appear at 484 x 252 pixels.
On mobile, the link preview will appear at 560×292 pixels.
If your image isn’t big enough, then it will render as 154 x 154 pixels or 90 × 90 pixels, so prefer a thumbnail.jpg file dimensions of at least 600 x 315 pixels (or better 1200 x 630 pixels).

Flash version of the tour included into the Facebook post with a play button

Add these tags into the main HTML page of your virtual tour with the other metatags, and replace data in capitals with your tour's information.

      <meta content="VIRTUAL_TOUR_TITLE | Virtual tour generated by Panotour and Livepano" property="og:title"></meta>
      <meta content="VIRTUAL_TOUR_DESCRIPTION" property="og:description" /></meta>
      <meta content="AUTHOR_NAME" name="Author"></meta>
      <meta content="COPYRIGHTS" name="copyright"></meta>
 
      <meta content="http://URL/PATH/VIRTUAL_TOUR_NAME.html" name="url"></meta>
      <meta content="http://URL/" property="og:site_name"></meta>
      <meta content="PATH/" name="directory"></meta>
      <meta content="http://URL/PATH/VIRTUAL_TOUR_NAME.html" property="og:url"></meta>
      <meta content="article" property="og:type"></meta>
 
      <link href="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" rel="image_src"></link>
      <meta content="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" property="og:image"></meta>
      <meta content="https://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/thumbnail.jpg" property="og:image:secure_url"></meta>
 
      <meta content="http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/VIRTUAL_TOUR_NAME.swf?xml=http://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/VIRTUAL_TOUR_NAME.xml" property="og:video"></meta>
      <meta content="https://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/VIRTUAL_TOUR_NAME.swf?xml=https://URL/PATH/VIRTUAL_TOUR_DATA_DIRECTORY/VIRTUAL_TOUR_NAME.xml" property="og:video:secure_url"></meta>
      <meta content="application/x-shockwave-flash" property="og:video:type"></meta>      
      <meta content="480" property="og:video:height"></meta>
      <meta content="640" property="og:video:width"></meta>

Limitations

You must have a webhosting with a SSL certificate (your own or a shared SSL) to authorize https:// connections.
You must not have any HTML5 plugins in this tour.
Facebook displays only full flash applications so these Panotour plugins which are HTML5 plugins can't be displayed in the Facebook post:
- Controls > Social Button
- Gallery > Gallery
- Menu > Panorama Menu
- Menu > Projection Menu
- Maps > Floor plan
- Maps > PanotourMaps
- Text > Description
- Viewers > PDF Box
- Viewers > Social Share
- Viewers > Website Box
- Viewers > Web video Box
- User input > Analytics
The Target option Enable Flash Fallback must be selected into the Build Tab of Panotour.

HTML and XML+tiles on different domains without iFrame - Crossdomain

1. Add a .htaccess file into your tour data directory next to XML files with this code :

Header set Access-Control-Allow-Origin *

2. Into KolorBootstrap.js file change all paths with "yourProjectdata/..." into absolute urls. For instance :

http://192.168.1.201/test/yourProjectdata/...

3. Into the yourProject.xml file add these lines where YOURDOMAIN is the domain where is the tour :

<security cors="">
<crossdomainxml url="http://YOURDOMAIN/crossdomain.xml" />
<allowdomain domain="*" />
</security>

4. Add a crossdomain.xml file into the root directory of the webserver where is the tour (htdocs/www/... directory) which contains :

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

5. Into the HTML file located on an other server change all URLs to call the distant server which host the tour data :

For instance : http://192.168.1.201/test/yourProjectdata/...
Info: Urls are into <script>, <link>, <object>, <param> tags and embedpano() javascript method.

This should work.

Note:

only 2 plugins have issues, and so, the url(s) must be changed into the yourProject.xml and/or yourProject_skin.xml file. It's Gallery for it's internal data images and PDF Viewer for it's openPDF method.

BACK TO: Documentation / Panotour Documentation

Retrieved from "http://www.kolor.com/wiki-en/index.php?title=Panotour_Documentation_-_Web_Publishing&oldid=28222"