close panorama

PanoTag 2: Social tagging across all devices

www.panotag.net

This plugin allows users to tag themselves on your krpano images (including Gigapixels).

Digisfera's PanoTag is offered as a service and hosted on our servers, so there is no need to set up or host the tagging system. A free version allows a limited number of tags to be placed on an image. You can download it here. For more details on licenses, see the pricing section.

The plugin is developed in both javascript and krpano XML. We kept as much as possible in XML, so that you may adapt its look and feel as needed. If you have any questions about adapting the plugin or any other topic, you can post them in the krpano forum. We also provide design and development services for PanoTag projects. Contact us if you would like more information about that.

NOTE: PanoTag works better with krpano 1.17 or higher

Example

PanoTag in IVRPA Meeting 2013 - click here to see the live example.

Features

  • Mobile Compatible: Gigapixel tagging across all devices
  • Social Tagging: Add and share tags through Facebook, Twitter and Email
  • Support Team: Users can support their team when tagging
  • Guest Wall: Engage those who were not at the event
  • Services: We provide design and development services to customize your application for you

Click here to see a detailed view of PanoTag features.

Download

Click here to download the latest version of PanoTag
New versions will automatically be available at this address and will be announced in the forum.

Usage

Setting up PanoTag requires 5 simple steps:
  • Download the zip file and extract the panotag folder
  • Create a Facebook App
  • Include PanoTag on your krpano XML
  • Include PanoTag and Facebook on your HTML
  • Configure PanoTag
NOTE: A minimal example is included in the PanoTag zip file

Step 1. Download and extract PanoTag

After downloading the zip archive which contains panotag and an example project folder, copy the panotag folder to your krpano application folder.

Step 2. Creating a Facebook application

  • Go to https://developers.facebook.com/apps
  • Click on Apps on the top of the page and select Create a New App
  • This will open a popup box where you need to enter your desired application display name and category
  • Once your application is created, you are redirected to the app dashboard. Take note of the App ID, as it will be needed to configure PanoTag
  • Click on Settings located on the left menu and add your website url in the Site URL field (e.g. "http://panotag.net/tour.html")
  • Go to Status & Review, also located on the left menu, and click on the toggle next to "Do you want to make this app and all its live features available to the general public?"

If you need further assistence creating a Facebook App, you can also check the Getting Started with Open Graph Facebook guide.

Step 3. Include PanoTag on your krpano XML

Open your krpano XML file, usually tour.xml, and add the following code below <krpano>:

<include url="panotag/panotag.xml"/>

Step 4. Include PanoTag and Facebook on your HTML

Add the following code to your HTML page, below <script src="krpano/embedpano.js"></script>:
<div id="fb-root"></div>
<script type="text/javascript" src="panotag/configuration.js"></script>
<script type="text/javascript" src="panotag/panotag.js" lazyload></script>

Substitute the following line:
embedpano({swf:"krpano/krpano.swf", xml:"tour.xml", target:"pano", html5:"prefer", passQueryParameters:true});

for:

var krvars = panotag_namespace.initialViewKrpano.vars();
embedpano({swf:"krpano/krpano.swf", xml:"tour.xml", target:"pano", html5:"auto", vars: krvars});

Step 5. Configure PanoTag

  • Fill the customerID provided by Digisfera for the purchased license.
  • Fill the facebookAppID with the Facebook App ID you have created.
  • Fill the baseURL with your website URL. The URL must point directly to your website HTML as it is used to redirect shares and tags back to your website.
  • Open a testing server on your website folder (you can use krpano testing server and navigate to your website. You should see your panorama with PanoTag interface.
  • The final step in configuring PanoTag is defining a Guest Wall. The Guest Wall feature enables users to tag themselves even if they are not present in the panorama. To define a Guest Wall you need to specify an area in the panorama where all guest tags will appear. To assist you in finding the correct position of the Guest Wall area include the following code in your XML file.
    <include url="panotag/panotag_debug.xml"/>
  • Navigate to your website and you should be in DEBUG MODE. Use the aim and point to each edge of your Guest Wall area and take note of ath and atv values. Remember that you need at least 3 points to define a Guest Wall.
  • In panotag configuration file panotag/configuration.js redefine guestWall parameter using the points you chose in the last step.
  • Upload your website to your server and you are done!
  • NOTE: You can see a more in depth documentation at PanoTag website.

    Pricing

    Click here to see a detailed info of the different types of licenses and their pricing.