Go to Index
Pano2VR 7.1 Docs / Posting in Social Networks

Posting Projects in Social Networks

Social networks have requirements for sharing links with images. Learn how to best prepare your project for posting on Facebook and X, formerly known as Twitter.

Share a Single Panorama


Use the Quick Share Button to
quickly share the current node as an image post to Facebook. The Share button
injects the image with the necessary metadata that lets Facebook know it’s a
360º panoramic image. It will use the default view and if limits have been
applied, the image will be cropped accordingly.

Share a Tour as Link with Image on Facebook


Pano2VR adds all the necessary metadata and external files for posting on
Facebook. Currently, the metadata for X is not added, but you can
add it to the HTML template.

  1. Add a Title in
    Project User Data

  2. Add a web output.

  3. In the HTML tab, change the Window Size to 1200 x 630 for Facebook or
    1200 x 675 for X. This will be the size of the preview image used for the
    thumbnail. It will also use the current default view. If you’d like to use a
    custom thumbnail image, see below.

  4. Choose the normal.ggt HTML template.

  5. Click, OK.

  6. Output the project.

If you’d like to include the project description in the post’s preview:

  1. Duplicate the normal.ggt HTML template. Locate the template from Pano2VR’s
    Settings > Files. Right click on the filepath for HTML Template Directory
    and choose, Open in Explorer/Finder.

  2. Open the template in a text editor (Notepad, Visual Studio Code).

  3. Add the following line under the <title> tag in the head content. This is
    assuming there is content in the Description field of the Project User Data.

<meta property="og:description" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables('$(upd)')))); ?>">

Create a Custom Thumbnail Image


This is the image that will be seen when you add a link to your timeline.
Pano2VR will create a preview image by default, but if you want to have a
different projection or angle then do the following:

  1. Add a Transformation output.

  2. Choose Equirectangular (or any other projection) for the Type.

  3. Define the Image Size. A good size for Facebook is 1200 x 630. A good size
    for Twitter is 1200 x 675.

  4. Choose JPG as the Format. (If you’re concerned with file size, image quality
    can be changed to 80.)

  5. Name the file, preview.jpg. In the Output section, right-click the output
    file and choose, Edit.

  6. Optional Make an output template to use again later. Choose, Save as New
    Template     from the template menu.

  7. Output the image.

  8. In the output folder of the web output, replace the preview image with the
    one you just made here.

Publish


  1. Upload the output folder to your server, or upload to
    Gnome Cloud.

  2. Post the link to your project on your timeline. First post it privately, and
    test it by selecting, Only me. You can also test that the preview image shows
    up correctly using
    Facebook’s Debugger.

★ Tip  If the image is not showing, you may need to include the entire file path to the image for the og:image tag. http://your-website.com/a-directory/preview.jpg

Share on X


  1. Follow the steps above for outputting an web output.

  2. Open the HTML file (index.html ) and add the following metadata. You can
    add this on the line after

    <meta property="og:image" content="http://your-website.com/a-directory/preview.jpg">
    <meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@YourTwitterHandle" />
<meta name="twitter:image" content="http://your-website.com/a-directory/preview.jpg" />
<meta name="twitter:url" content="http://your-website.com/a-directory/index.html"/>
<meta name="twitter:title" content="The Title" />
<meta name="twitter:description" content="The Description." />

Adding a Share Button


Share buttons are included in all the built-in skins. You are free to copy those
buttons to your skins. Or build it from scratch:

  1. Add a share icon to your skin.

  2. Add a Go to URL action and add the following code

    Facebook:

    javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' + location.href);

    X:

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

  3. Save the skin.

  4. Add the new skin to the project.

  5. Output.

Tips and Notes


  • This workflow will open the panorama in a new tab.
  • Rename the HTML file to avoid overwriting previous versions. The default file
    name is index.html. You can change this in the HTML pane in the web output
    settings. Right-click the path, select, Edit.
  • When posting to Facebook, first test the post by posting it privately. Choose,
    Only Me.
  • If the link isn’t working on Facebook, try using
    Facebook’s debugging tool.
    This will give you information on what may be missing from the template. It
    will also reset the cache.
  • Save everything to the same directory and keep the naming conventions the
    same.
  • Facebook and X will resize larger images to fit their timelines.

See also…


Last modified: Dec 11, 2023