3D Twitter Card NFT Generator

Currently OpenSea only allows Twitter Social sharing of NFTs listed as image cards.
However the Twitter platform supports the ability to play content through third party players.

This allows us to add support directly in Twitter for users to interact with 3D based models that are shared from OpenSea.

Additionally analytics can added to the viewer to track engagement of NFT assets.

Tech

The player uses the Google https://github.com/google/model-viewer web component and passes params via the address bar to display 3D GLB content.

Example Opensea NFT Data (Crypto Horse: Sushi Swap)

OpenSea NFT: https://opensea.io/assets/0x495f947276749ce646f68ac8c248420045cb7b5e/93290888789314140276970432121952459674757115801796959568208263017141295382529
Flat image preview: https://lh3.googleusercontent.com/6IgnSG5Nm84tHaseN2xLvYDE8HpnECabZ6qD1knvHTdJ4FnFZMntPd728EUgJtVzBSSuhfnGfgL5lm1NC-9jAupYI49TC96MDWqDhg=w386
3D Asset: https://storage.opensea.io/files/c0bf8dadebe20f730940bb5acc5a0f55.glb

Example 3D Model loaded from OpenSea Data

Twitter Social Code

<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://nfthack2022.netlify.app/player/3DViewer.html?src=https://storage.opensea.io/files/c0bf8dadebe20f730940bb5acc5a0f55.glb&poster=https://lh3.googleusercontent.com/6IgnSG5Nm84tHaseN2xLvYDE8HpnECabZ6qD1knvHTdJ4FnFZMntPd728EUgJtVzBSSuhfnGfgL5lm1NC-9jAupYI49TC96MDWqDhg=w386&alt=Crypto Horse: Sushi Swap">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" >
      

Test it out on Twitter

Copy the address of this page and paste it into twitter as a new message or test it out at the Twitter card validator.

You should see the poster image display first whilst the 3D asset is loading and then see the animated 3D Model.

Example of OpenSea social card display

This is an example of the social share display for 3D content - it is still visually appealing but not interactive.