Thread by @theunfoldingway

An #unfolding #BuildInPublic thread demoing an iteration to the previously created audio 'Drop' page

(e.g. theunfoldingway.com/drops/template…)

The iteration is to add twitter meta-tags to the Drop page, as follows👇

Idea:

When posting an audio 'Drop' to twitter, format it as a Twitter Player Card – with a playable audio widget in the tweet

Allows me to store my audio files on theunfoldingway.com & share these in easily-consumable fashion via twitter

Ideal Version:

A smartly-customised 'unfoldingway'-monikored & designed audio widget embedded in the tweets, with a link back to the Drop page on theunfoldingway.com

Displays the title & description of the audio file

Real (i.e. 'Now') Version:

Uncustomised, simple audio player embedded in the tweet, perhaps without the link back to theunfoldingway.com for now

Displays the title & description of the audio file

Connections:

- player card might require an image file, which might suggest rapidly creating some basic unfolding way-monitored imagery

– other page types will also employ twitter cards for similar reasons

Decisions:

- Create slim 'embed' page with only the audio tag
- Add Twitter tags to the existing Drop page
- Point Twitter Player tag to the new corresponding embed page
- Embed URL e.g. unfoldingway.com/drop/embed/25

Components:

- Twitter tags as per github.com/twitterdev/car…
- embed page tags: html, head, style, body, audio
- embed page data: audio file address

Design & Structure:

#ActingImmediately & #BuildingInPublic

✅ Setup new iteration & folder structure:

- folder + symlink
- update dev project folder location
- rename 'drops' folder to 'drop'
- create 'embed' folder in 'drop' folder

#ActingImmediately II

✅Construct embed page html:

- create html structure
- link file to audio tag
- test embed page

#ActingImmediately II

✅ Add Twitter Player Card meta-tags:

- add twitter player card tags to Drop page html
- test the new page on test.theunfoldingway.com
- validate the twitter card
- post a Drop url in a tweet and see if it works!

and here is the tweet with the audio file embedded and playable…

test.theunfoldingway.com/drop/template.…

will now push this to live and i can happily drop my @theunfoldingway audio recordings from my own site into twitter

(disk space being my only limitation)

done!

#ActingImmediately II

✅ Made a couple of improvements / enhancements:

- show an image in the media preview
- get twitter to display a play button
- autoplay the audio on the embedded page (works on desktop... phones maybe not so happy to comply)