Skip to main content

Embedding and formatting for social networks (Object2VR)

Object2VR - Help

We've created an HTML template for you to use for embedding your object movies on Facebook (to embed in the Facebook timeline, a secure site is required). 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.

Embedding in Facebook can get a bit tricky sometimes - depending on what you want to do. But if you follow the Basic Workflow, it should work. However, check out the Notes below.

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.

Basic Workflow[edit]

You can use this basic workflow for embedding your object movies on Facebook and for custom posts on Twitter and Google+.

1 Set up[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.
  3. Create a new project (or open an existing).
  4. Add an image sequence.
  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 Add the HTML5 output[edit]

  1. Add an HTML5 output format.
  2. Adjust the settings as usual.
  3. In the Settings tab, change the Output file path to a convention you can use throughout the project. We suggest using the same name for everything to keep finding faults easier. For example, my_object/my_object.xml
  4. Go to the HTML tab and do the following:
    1. Choose the embed_o2vr.ggt for the Template.
    2. In the Template Parameters, select Fullscreen. (optional)
  5. Social sites 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 in the Facebook timeline, a secure site is required.
    • For the Page Path, enter the path to the directory where the object movie is located on the server. For example, a_folder_on_server/a_subfolder/my_object.
    • Select, Flash fallback player.
  6. Add the Preview image file. For this, you can use one of the images from the sequence and resize it. A good size is something like 600 x 600 pixels.
  7. Host site settings:
    • Select, Flash fallback player.
  8. For the Output File, enter the same convention that you've been using so far: my_object/my_object.html.
  9. Click, OK.
  10. Create.

Check your output folder (in our example, my_object). It should have all these files in it:

3 Publish[edit]

  1. Upload the output folder (my_object) 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.
    The thumbnail image should load, then click Post. You will see that the thumbnail image now has a play button. If you don't see these, you probably have not selected Include Secure Hosting or your website is not a secure site. Check with your Host Provider if you're not sure.
  3. Share on Twitter and Google+ by sharing the link to your project.


Multiresolution Projects[edit]

For Multiresolution projects, you will need to output two Flash files (in addition to the HTML5 output) in order for it to work in Facebook. This is a temporary workaround for a bug found in Object2VR's Flash fallback player. Therefore, you will output one single-resolution Flash file for Facebook and one multi-resolution file for a fallback on the host site.

Set up the project as you would for a basic workflow and in the HTML5 output, enable multiresolution in the Multiresolution tab. Make sure the tiles are located in the same location as the Flash output for the host site.

1 Add a Flash output for host site[edit]

  1. Add a Flash output.
  2. Adjust the settings as usual.
  3. In the Settings tab, change the output file path to what will match all the other outputs. But, here, you'll need to differentiate between the two SWFs. For example, this one would be: my_object/my_object_host.swf
  4. In the Multiresolution tab, enable multiresolution.
  5. In the HTML tab, deselect, Enable HTML file.
  6. Hit, OK. You can output if you like, or just wait until all outputs have been added to create all.

2 Add a Flash output for social sites[edit]

  1. Add a Flash output.
  2. Adjust the settings as usual.
  3. In the Settings tab, change the output file path to what will match all the other outputs. But, here, you'll need to differentiate between the two SWFs. For example, this one would be: my_object/my_object_social.swf
  4. In the HTML tab, deselect, Enable HTML file.
  5. Hit, OK. You can output if you like, or just wait until all outputs have been added to create all.

3 Add files to HTML template[edit]

  1. Open the HTML5 output and go to the HTML tab.
    1. Choose the embed_o2vr.ggt for the Template.
    2. In the Template Parameters, select Fullscreen. (optional)
  2. Social sites 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 in the Facebook timeline, a secure site is required.
    • For the Page Path, enter the path to the directory where the object movie is located on the server. For example, a_folder_on_server/a_subfolder/my_object.
    • Add the Flash file for the social sites for the Flash fallback file.
    • Add the Preview image file. For this, you can use one of the images from the sequence and resize it. A good size is something like 600 x 600 pixels.
  3. Host site settings:
    • Add the Flash file for the host site for the Flash fallback file.
  4. Check that the HTML page is going to the same location indicated in the Settings tab.
  5. Click, OK.
  6. Create.


Droplet Workflow[edit]

You can also automate this workflow by creating a Droplet. Below we've outlined the steps for doing so.

  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.

1 Create a new project[edit]

  1. 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.
  2. In the Comment field, add the name of the folder you would like to output to.
  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.

2 Add an HTML5 output format[edit]

  1. In the Settings tab, add $uo/$ut.xml to the Output File.
    $uo calls the comment field and this creates the output folder. $ut calls the Title field; this will name the files according to the Title.
    ◊ NOTE: All files need to have the same name and path.
  2. Customize the settings (add a skin, zoom, multiresolution, etc.). (Optional: You can always force Object2VR to open so you customize the settings later.)
  3. Go to the HTML tab and select the embed_object2vr.ggt template.
  4. In the Template Parameters, select Fullscreen. (optional)
  5. In the Social sites settings, enter your domain for Host Name. No need to include http:// or https:// because the template will add it for you.
  6. If your site is secure, select, Include Secure Hosting.
    ◊ NOTE: To embed in the Facebook timeline, a secure site is required.
  7. For the Page Path, enter the object movie's path on the server. For example, my_folder/$uo.
  8. 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 object movie. For a browser that does not support Flash, Facebook will go directly to the host site.
  9. For Preview image file add the preview image path. It can look something like this: $uo/$p.jpg.
  10. For the Host site settings, select Flash fallback player. This will be used to playback the object movie on Flash supported browsers.
  11. 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.
  12. Click, OK.


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.


See also[edit]

Tutorial via IVRPA - 2016
HTML5 Output (Object2VR)
HTML Template
HTML template for embedding
Embedding and formatting for social networks (Pano2VR)
HTML5 Flash Fallback Player