Go to Index
Pano2VR 7 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 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 Twitter 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 Twitter. 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.

✭ Note: 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 Twitter

  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." />

You can use Twitter’s Card Validator tool to test the post. (As of August 2022, the preview has been disabled.)

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 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);

  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.
  • If the link isn’t working on Twitter, try using Twitter’s Card Validator.
  • Save everything to the same directory and keep the naming conventions the same.
  • Facebook and Twitter will resize larger images to fit their timelines.

See also…

Last modified: Mar 30, 2023

Privacy Policy – Terms of Service – Contact / Imprint
Facebook-f Twitter Youtube