Go to Index

Posting Projects in Social Networks

Facebook currently doesn’t allow interactive media in the Timeline. That means that you cannot embed a Pano2VR output in Facebook. However, you can add a preview link (a link with an image). In this tutorial, we walk you through the process of creating a social network friendly project.

Share on Facebook

  1. Create a new project (or open an existing one).

  2. Add a panorama.

  3. In User Data, fill out the title, author and description. The title and description will appear on all social posts (Facebook, Twitter). For a single-node panorama, replace the HTML Page Title placeholder ($(upt)) in the HTML normal template in step 2. For tours, you can use the Master Node.

  4. Add an HTML5 output.

  5. 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.

  6. Edit the HTML template. Go the HTML pane and under the HTML file section, make sure the normal.ggt template is selected. And then open the template parameters (Edit Template button). Select, Create files for external embedding. This not only outputs a few needed files to the output folder, but it also adds metadata to the HTML file. ★ Currently, the metadata for Twitter is not added, but you can add it to the HTML template.

  7. Click, OK.

  8. Output the project.

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 HTML5 output, replace the preview image with the one you just made here.

Publish

  1. Upload the output folder to your server.

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

Adding a Share Button

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

  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 HTML5 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

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