Note: Recent changes to Facebook have reduced the effectiveness of embedding into the timeline. In the past if Flash wasn't present a link to the HTML version was displayed. This is no longer the case and there is no fallback to HTML. The alternative now is an error message in the timeline or a blank screen once the button to play has been activated. To help identify what works and what doesn't I've created a post "Embedded 360˚ Playback Status" that lists a number of OS/Devices, browsers and the playback results.

Overview

This step-by-step tutorial will take you through the process of configuring and using a Pano2VR droplet to create all the files required to display your panoramas embedded in a Facebook timeline post as well as post to Google+ and Twitter.

With the panorama embedded it will allow viewers to interact with it in the Facebook timeline (rather than just a link to the panorama). For viewers without the Flash plugin or on iOS devices there the files provide an HTML alternative.

See an example of a Facebook 360˚ panorama post, created from the tutorial files,

The caveat here: To display an interactive panorama in the Facebook timeline you need to have the ability to serve the file from a site with an SSL certificate so you can use an https:// preface. - For Twitter, you have to get your site approved for the use of Twitter Cards.

Tutorial File Download

In the Droplets folder you will find an Assets folder and two droplets 6x3_Drop.app and 8x4_Drop.app. These are designed for equirectangular images of 6,000 x 3,000 px and 8,000 x 4,000 pixels.

The Assets folder contains the following items;

HTML Template
1 x HTML Template; embed_p2vr.ggt

Skins
2 x Skins; Gyro.ggsk, Flash.ggsk

Test Grid Equirectangular
2 x test images that you can use to generate test files.

The Asset folder can be downloaded here [1.1mb]

How it Works

The droplets are pre-configured to create 3 basic Output files; a Flash .swf version, a HTML5 version and a Preview image. The droplets are also configured to create multi-resolution tiles that load automatically based on the resolution of the image displayed on the device screen. The .html file contains information that facilitates posting viaFacebook Timeline, Twitter and Google+.

Note: Even though the droplets are pre-configured they will need to be updated to reflect the location of the .ggsk skin files on your local system as well as the configuration of your https server paths.

There are 4 Steps in the process, the first Install the HTML Template covers installing the new HTML Template recently released by Pano2VR. The second, Setting up the Droplets for your System, covers installing the skins and updating your server path information in the droplets. The third on Using the Droplets takes you through building your project and the fourth discusses Adding Your Panorama to the Facebook Timeline.

The video provides a quick overview of the workflow that includes setting the droplet path, setting up the droplets for your system and building the panorama.

Step #1: Install the HTML Template

In the Assets folder there is a “HTML Template” folder which contains the HTML template file, embed_p2vr.ggt.

Note: Facebook allows videos to play back automatically within the news feed implemented via the Flash player. This means with the correct files we can also have interactive panoramas play directly in the timeline. The only caveat here is that your project must be on a secure server. This means you must be able to point to the index.html file using a URL such as https://redsquareproductions.squarespace.com/storage/360/droptest/index.html

The Pano2VR HTML template provides fields to enter all the code required for your panorama to be interactive within your Facebook news feed as well as post to Twitter and Google+

1. Install the template by copying the embed_p2vr.ggt template to your ~Library/Application Support/GardenGnomeSoftware/Pano2VR/HtmlTemplates/html5 folder. (illustration #1)

Tip: You can easily locate and open the folder by launching Pano2VR, 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.

Step #2: Set up the Droplets for your system

In this step we will modify the droplets to point to the HTML Templates and the Skins on your system.

2a. Flash Output

1. Double click on the 6x3_Drop.app. This opens a Pano2VR project window (illustration #2)

Note: if your Pano2VR application file is not in the default location (top root of Applications) you will see the following message or something similar.

If this is the case then you will need to modify the .app to point to the correct location of your Pano2VR.app. For instructions on how to change the location go to the Modifying Droplet paths blog.

2. Click on the Parameters button (the small wrench) to open the Flash Output window

3. In the Settings Window select the File button in the Skin Module and browse to the Droplets/Assets/Skins folder and select the Flash.ggsk skin (illustration #3)

5. Select Okay to close the Flash Output window

2b. HTML5 Output

1. Click on the Parameters button (the small wrench) to open the HTML5 Output window (illustration #4)

#4 Pano2VR project window — #4 Pano2VR project window

2. In the Settings Window select the File button in the Skin Module to the Droplets/Assets/Skins folder on your system and select the GyroToggle.ggsk skin (illustration #5)

3. Tap on the HTML tab and from the Template: dropdown menu select embed_p2vr.ggt if it's not already selected. (illustration #6)

4. In the Template Parameters module update the fields

Fullscreen: checked
Include Gyroscope Control: checked

Social sites setting module:

Note: My project files are always stored at this location..

https://redsquareproductions.squarespace.com/storage/360/

So in this case my settings would be...

Host Name: redsquareproductions.squarespace.com

Note: no leading or trailing "/"

Include Secure Hosting: checked

Page Path: storage/360/$uo/

Note: no leading "/" The entry '$uo' is replaced with the text that is entered in the comments field of the User Data window.

or Flash fallback file: $uo/$uo-FLASH.swf
Preview image file: $uo/$uo-TM.jpg

Host site settings module:

or Flash fallback file: $uo/$uo-FLASH.swf
Prefer Flash if available: checked

5. Select Okay to close the Output window

6. Quit Pano2VR and save the changes

Step #3: Using the Droplets

Now it's time to actually use the Droplet to create our files. In the folder Assets/Test Grid there are two .jpg images 6x3.jpg and 8x4.jpg.

1. Drag the 6x3.jpg on top of the 6x3_drop.app and the Progress window opens. After a few seconds the Viewing Parameters window opens. This window allows you to modify any of the settings in regard to the current view, viewing limits, field of view or North settings. Make any necessary modifications and select OK. (illustration #7)

2. The User Data window opens and you can add in your Title, Description, Author, Date and Time and Copyright information. (illustration #8)

3. Enter a name In the Comment field. Whatever you enter will replace the '$uo' and will define the name of the folder and the file name.

Note: In this example the path would be droplet/droplet-FLASH.swf.

4. Select OK and the User Data window closes and the progress window continues to show the project files being created. The progress window closes when the files are all finished. When the progress window has closed there will be a project folder, with the name you entered in the Comments field, in the same folder or location as the 6x3.jpg file. (illustration #9)

Note: The project folder is always created in the same location as the Equirectangular image you dragged onto the droplet.

#9 Droplets folder with "Droplet" project folder

Test the output by opening index.html into a browser with Flash installed and without Flash installed. You should see a page that looks like this. (see illustration #10 & 11)

#11 Firefox browser without Flash installed

5. Open the index.html in a text editor to see the code created by the droplet. (see illustration #12)

6. The final step is to upload your files to your server. All you have to do is make sure the location of the files on your server matches the Host Name and Page Path added into the HTML Template. In the illustration above the URL to the index.html file is https://redsquareproductions.squarespace.com/storage/360/droptest/index.html. So on my website I have a folder in the top root called storage, in that is folder called 360. My output project folder is called droptest and all of the files are contained within it, so I simply upload that whole folder into the 360 folder on my server.

Step #4: Adding your Panorama to the Facebook Timeline

There are two ways to publish your panorama to Facebook, the first is via the timeline the second is using the Facebook Debugger page. I always post via the debugger page as it will alert you to any issues you may have in your files. See the post Using Facebook Debugger for information on how it works.

1. Open Facebook and navigate to your Facebook page and select the Home button

2. Update your status with a new post. Add your text and the https URL to your project files. The preview image will appear with a 'play' button. When you are finished Post the updated status and, if you are running flash in your browser, you will see the link to launch the panorama. (illustration #13)

Note: If no image appears or just a link displays there may be an issue with the URL paths you used in your HTML template.

#13 Facebook page with Flash installed showing the preview image and a play button

3. Tapping on the play button will load the panorama into the timeline and replace the preview image. (illustration #14)

Note: there may be a few seconds lag the first time you view the panorama and all you see is a white screen. Just wait and the panorama should appear.

#14 Panorama playing in the Facebook timeline.

4. If you view the page in a browser without the Flash plugin or on a device such as an iPad you will link to the HTML version.

If you come across any issues or have any feedback on this tutorial I'd love to hear it.

Using Droplets to create 360˚ panoramas for Facebook Timeline, Google+ & Twitter