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.

1 Tips and Notes
2 Basic Workflow
3 Multiresolution Projects
4 Droplet Workflow
- 4.1 1 Create a new project
- 4.2 2 Add an HTML5 output format
5 Adding a Share Button
6 See also

Tips and Notes

There is a bug in the Flash fallback player for Multiresolution that we currently working. There is a workaround.
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.
If using multiresolution (recommended for playback on mobile devices) and outputting both HTML5 and Flash, keep the levels and tile size the same for both. Also, keep their images in the same folder. You will then only need to output images from one output. Remember, once the tiles have been generated once, you do not need to generate them again (deselect, Generate Files, in the Multiresolution tab).
Remember, Facebook uses only Flash. Flash is not supported on iOS devices (iPhone, iPad, etc.)
The site where your object movie is hosted must be a secure site (https://), if you want it to work on Facebook.
Save everything to the same directory and keep the naming conventions the same.
We use the Large Image Twitter Card. This means that in order to see the thumbnail, you’ll need to click, View Summary in the post.

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

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

Basic Workflow

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

1 Set up

Download the template.
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.
Create a new project (or open an existing).
Add an image sequence.
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

Add an HTML5 output format.
Adjust the settings as usual.
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
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)
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.
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.
Host site settings:
- Select, Flash fallback player.
For the Output File, enter the same convention that you’ve been using so far: my_object/my_object.html.
Click, OK.
Create.

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

images (folder)
object2vr_player.js
object2vr_player.swf
object2vr_player.html
object2vr_player.xml
skin.js (if using a skin)
skin.xml (if using a skin)
swfobject.js
object2vr_player.jpg (thumbnail image that you must add manually)

3 Publish

Upload the output folder (my_object) to your (secure) server.
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.
Share on Twitter and Google+ by sharing the link to your project.

If the link isn’t working on Facebook, try using Facebook’s debugging tool.
If the link isn’t working on Twitter, try using Twitter’s Card Validator.

Multiresolution Projects

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

Add a Flash output.
Adjust the settings as usual.
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
In the Multiresolution tab, enable multiresolution.
In the HTML tab, deselect, Enable HTML file.
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

Add a Flash output.
Adjust the settings as usual.
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
In the HTML tab, deselect, Enable HTML file.
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

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)
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.
Host site settings:
- Add the Flash file for the host site for the Flash fallback file.
Check that the HTML page is going to the same location indicated in the Settings tab.
Click, OK.
Create.

Droplet Workflow

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

Download the template.
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

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

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.
Customize the settings (add a skin, zoom, multiresolution, etc.). (Optional: You can always force Object2VR to open so you customize the settings later.)
Go to the HTML tab and select the embed_object2vr.ggt template.
In the Template Parameters, select Fullscreen. (optional)
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.
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 object movie’s path on the server. For example, my_folder/$uo.
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.
For Preview image file add the preview image path. It can look something like this: $uo/$p.jpg.
For the Host site settings, select Flash fallback player. This will be used to playback the object movie on Flash supported browsers.
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.
Click, OK.

Adding a Share Button

Add a share button to your skin.

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

Save the skin.
Add the new skin to the project.
Output.