Skip to main content

Embedding and formatting for social networks (Pano2VR)

This is the documentation for Pano2VR 4, but the process will still work with Pano2VR 5.

Pano2VR - Help

Updated 29 July 2014

We've created an HTML template for you to use for embedding your panoramas or tours on Facebook (to embed panoramas in the Facebook timeline, a secure site is required). This means that the panorama will be interactive in the timeline (rather than just a link to the panorama). You can also use the template for Twitter and Google+ posts. For both, the post will display the thumbnail image, title and description. The caveat here (Twitter only): you have to get your site approved for the use of Twitter Cards.

In summary:

  1. Create an HTML5 output with Flash fallback, and a suitable preview image.
  2. On the HTML tab choose the embed_pano template and fill in the additional social site settings.
  3. Publish and share.

Basic Workflow[edit]

Any panorama or tour can be embedded or shared on Facebook as long as it has a valid Flash output and a preview image. For simplicity we will use an example of a single panorama with nothing fancy with all files exported to a single folder.

1 Set up[edit]

  1. Download the template (embed_pano.ggt).
  2. Add the template to the Html5Templates folder.
    ◊ TIP: You can easily locate and open the folder by going to the Settings/Preferences and selecting the Files tab. Right click on the path and click, Open in Finder or Open in Explorer to open the directory.
  3. Create a new project (or open an existing).
  4. Add a panorama.
  5. In User Data, fill out the title, author and description. The title and description will appear on all social posts (Facebook, Twitter, Google+).

2 Create a thumbnail image[edit]

  1. Add a Transformation output.
  2. Choose, Rectilinear, for the Type.
  3. Define the Image Size. A good size for Facebook is 800 x 420.
  4. Choose JPG as the Format. Image Quality can be changed to 80.
  5. For the Output file path, name the output folder and the file name the same to keep things simple. For example: pano_a/pano_a.jpg
  6. Click, OK.
  7. Create.

3 Add the HTML5 output[edit]

  1. Add an HTML5 output format.
  2. Adjust the settings as usual.
    ◊ NOTE: For the Output file path, in the Settings tab, use the same naming convention you used for the thumbnail image. For example, pano_a/pano_a.xml.
  3. Go to the HTML tab and do the following:
    1. Choose the embed_pano.ggt for the Template.
    2. In the Template Parameters, select Fullscreen. (optional)
  4. Social site settings:
    • Enter your domain for Host Name. No need to include http:// or https:// - the template adds it for you.
    • If your site is secure, select, Include Secure Hosting.
      ◊ NOTE: To embed panoramas in the Facebook timeline, a secure site is required.
    • For the Page Path, enter the path to the directory where the panorama is located on the server. For example, a_folder_on_server/a_subfolder/pano_a.
    • Select, Flash fallback player.
    • For, Preview image file and add the preview image you've outputted (see above) here. The path is what you set in the Transformation settings: pano_a/pano_a.jpg.
  5. Host site settings:
    • Select Flash fallback player.
    • For the Output File, enter the same convention that you've been using so far: pano_a/pano_a.html.
  6. Click, OK.
  7. Create.

4 Publish[edit]

  1. Upload the output folder (pano_a) to your (secure) server.
  2. Embed the project on Facebook by posting a link to your project (using the HTML template). First post it privately, and test it by selecting, Only me.
  3. Share on Twitter and Google+ by sharing the link to your project.

Droplet Workflow[edit]

You can also automate this workflow by creating a Droplet. We've outlined the steps below:

1 Add the template[edit]

  1. Download the template.
  2. Add the template to the Html5Templates folder.
    ◊ TIP: You can easily locate and open the folder by going to the Settings/Preferences and selecting the Files tab. Right click on the path and click, Open in Finder or Open in Explorer to open the directory.

2 Create a project[edit]

  1. Create a new project.
  2. In User Data, add any information that will always be the same (i.e. Copyright), but leave anything that will change, like Title and Description, empty.
  3. Create an output folder using the Comment field. Whatever you add here, a folder will be created that hold all the outputted files and will be created on output. You can use any field. Just check out the user data placeholders for each (you'll need them later).

3 Add the HTML5 output[edit]

  1. Add an HTML5 output format.
  2. In the Settings tab, add $uo/$p.xml to the Output File.
    $uo calls the comment field and this creates the output folder. $p uses the project file name as the output file name.
    ◊ NOTE: All files need to have the same name and path.
    ◊ TIP: If you don't want to use the project file name for the output file names, you can use any of the user data fields to a file name and have Pano2VR call it up using a placeholder.
  3. Customize the settings (add a skin, zoom, multiresolution, etc.). (Optional: You can always force Pano2VR to open so you customize the settings later.)
  4. Go to the HTML tab and select the embed_pano2vr.ggt template.
  5. In the Template Parameters, select Fullscreen. (optional)
  6. In the Social sites settings, enter your domain for Host Name. No need to include http://.
  7. If your site is secure, select, Include Secure Hosting.
    ◊ NOTE: To embed panoramas in the Facebook timeline, a secure site is required.
  8. For the Page Path, enter the panorama's path on the server. For example, my_folder/$uo.
  9. Choose to use either the Flash fallback player or the fallback file. In our example, we used the fallback file so we could demonstrate using different skins. ◊ NOTE: Facebook will only use Flash to playback the panorama. For a browser that does not support Flash, Facebook will go directly to the host site.
  10. For Preview image file add the preview image path. It can look something like this: $uo/$p.jpg.
  11. For the Host site settings, select Flash fallback player. This will be used to playback the panorama on Flash capable browsers.
  12. In the Template Output section, check that the HTML page is going to the same location indicated in the Settings tab. It should be something like, $uo/$p.html.
  13. Click, OK.

4 Add a thumbnail image[edit]

  1. Add a Transformation output.
  2. Choose, Rectilinear, for the Type.
  3. Define the Image Size. A good size for Facebook is 600 x 400.
  4. Make sure the output file path matches the HTML5 output file path ($uo/$p.jpg).
  5. Click, OK.

5 Save the project as a droplet[edit]

  1. (Optional) If you are using the Flash fallback file, add a Flash Output.
  2. Under the Settings tab, make sure the SWF is going to the same location as the XML file ($uo/$p.swf).
  3. Disable the HTML file in the HTML tab.
  4. Go to File > Save as Droplet…
  5. Select which parameters should pop up once an image is dropped on to the Droplet. At the least, User Data should be selected.
  6. Click Create…, give the droplet a name and save it.

Adding a Share Button[edit]

  1. Add a share button to your skin.
  2. Add a Go to URL action and add the following links for the following networks:
    Facebook:
    javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' + location.href);

    Twitter:
    javascript:window.open('http://twitter.com/share?url=' + location.href);

    Google+:
    javascript:window.open('https://plusone.google.com/_/+1/confirm?url=' + location.href);
  3. Save the skin.
  4. Add the new skin to the project.
  5. Output.

Tips and Notes[edit]

To clear Facebook cache:

Facebook will cache links for a few days. But you can clear the cache manually. We've found that this process works (just using the Debugger didn't always work):

  1. Delete the post from Facebook
  2. Refresh the page (or if needed, log out.)
  3. Run Facebook's Debug tool.

See also[edit]

Example project
Tutorial via IVRPA - 2016
HTML5 Output (Pano2VR)
HTML Template
Droplets and Batch Processing (Pano2VR)
HTML template for embedding
Embedding and formatting for social networks (Object2VR)
HTML5 Flash Fallback Player
Flash Fallback Player and Non-pro Multi-node Tours
Tutorial on using Droplets for embedding by Tony Redhead