Note: This tutorial is no longer valid and has been updated for Pano2VR V5.2.3 You can find the new tutorial at http://tonyredhead.com/pano2vr/twitter-panoramas-v5

This step-by-step tutorial will take you through the requirements and workflow of posting a 360˚ Panorama to a Twitter Tweet. In it I'll provide information about the Twitter player card, the meta tags required, domain whitelisting, and Twitter Card Validator.

At the end I'll provide a link to download both a Version 4.5.3 and Version 5 Pano2VR droplet and all the elements to create the content suitable for test posting to the Player Card.

360˚ Panorama in a Tweet
This image below an example of a Twitter Player Card currently published on my Twitter account

What is a Twitter player card
A player card is a subset of Twitter Cards. With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Primarily designed for video clips and audio streams, Player Cards can also provide a unique platform to distribute and share 360˚ Panoramas and Virtual Tours.

1. Getting Started
There are only a few simple requirements needed to display a 360˚ panorama in a Twitter Player Card.

A hosted and self playing 360˚ panorama scalable at 100%
A rectilinear image that can be used in the initial display
Secure hosting SSL (https://)
A HTML page containing a set of specific Twitter Player Card Meta Tags
Audio content, if incorporated, set to ‘Sound Off’ by default

2. Host your 360˚ Panorama
Once you have built your 360˚ panorama upload it to your SSL server and test it in different browsers and devices to ensure that it plays across all platforms. The image below shows the 360˚ panorama, hosted at http://tonyredhead.photography/360/social/An-ExpTeam-Break/twitter.html, in a Chrome browser on the desktop and Safari on iPhone.

3. Adding Twitter Player Card Meta Tags to your HTML
Specific meta tag data is required in between the <head></head> tags of the html page you will reference in the URL you use. In my example I use a page called Twitter.html but it can be named anything e.g index.html.

The italicised text will be replaced with your own information. This information can be hard coded on a tweet by tweet basis or applied using the droplet through the User Data Field.

When using a droplet the following are hardcoded into the twitter.ggst file;

The remaining information is added via the User Data window as shown below.

For example the content added in the User Data fields creates meta tags in my sample twitter.html file as follows;

4. Getting your Domain Whitelisted
Before you can post your URL to Twitter Player Card you have to have the domain whitelisted. Twitter review each Player Card implementation to make sure it fits the guidelines for publishing to their platform. Although they strive for a quick turnaround, they acknowledge that this process sometimes takes longer than expected.

In order to help make the process as smooth and quick as possible, you should verify the following:

You’ve added the proper Twitter Card meta tags to your page, and your page is publicly accessible
The twitter:player and twitter:image URL’s open and play properly in a browser

5. Using the Card Validator
1. Once you have verified the bullet points above open your browser and go the the URL https://cards-dev.twitter.com/validator

If you are not already logged in to your Twitter account do so now. Once you are logged in the Card Validator window will be displayed.

2. Enter the URL you used in the 'twitter:player' meta tag. In this example I will use https://tonyredhead.photography/360/social/AN-ExpTeam-Break/twitter.html

4. Select ‘Preview Card’. In the image below the log section is all green and my link is good to be posted. I can click on the 'play' button to see the actual expanded tweet. This is because my domain, tonyredhead.photography, is whitelisted with Twitter.

5. If your domain isn’t whitelisted the window will look like the image below and showing an orange 'WARN: Not whitelisted' comment in the Log and a comment under the 'Preview card' button.

6. To proceed and have your domain whitelisted, select the ‘Request Approval’ button and fill out the information the form requests.

7. Once you have requested approval and opted-in to having cards displayed, Twitter has to approve the integration. Once approved, you'll get an email confirming that your request has been activated. You can then go back to the Card Validator and you will see a screen similar to that in section #4.

6. Tweeting the Panorama

All that's left now is to actually create a tweet using the URL to your panorama.

1. Log into your Twitter Account if you aren't already logged in

2. Create a new Tweet, add your text and paste in your URL

4. Select Tweet and your tweet will appear at the top of your tweet list.

Note: you will not see the 360˚ panorama just the reference image and a play button. Twitter doesn't auto-expand tweets with 'card' content except for simple Twitter-hosted images

5. Select the play button and the tweet window will expand to display the 360˚ panorama

7. Twitter Player Card Droplet

This simple Pano2VR V4.5.3 droplet has been designed for an equirectangular image 8000 x 4000 px using multiresolution tiles. If you want to use a larger image, duplicate the droplet and modify the multiresolution tile size.

The download zip file contains:

The droplet '8x4k-twitterplayer.ggt'
8x4.jpg for testing
tutorial-TWITTER.ggt

Download link: http://tonyredhead.photography/360/tutorials/twitter-player-card.zip

1. Before using the droplet open the tutorial-TWITTER.ggst file in a simple text editor, go to the line, <meta name="twitter:site" content="@twitteraccountname">, and change '@twitteraccountname' to your own account name.

2. Save and upload the .ggst file to the location where your other .ggst files are saved. If you don't know the location open Pano2VR, select Preferences from the menu bar and look under Files

Post 360˚ Panoramas to a Tweet

Note: This tutorial is no longer valid and has been updated for Pano2VR V5.2.3 You can find the new tutorial at http://tonyredhead.com/pano2vr/twitter-panoramas-v5

Tony Redhead