Update (Dec. 20, 2017): This fall Facebook (quietly and unannounced) removed the ability to play external video in their social posts, including those from YouTube and Vimeo. Until they restore that feature, only the Audiogram and Shortcut methods below will work. For embedding audio in Twitter, see “How to make tweets talk.”
Embedding a video in a Facebook post is easy. Embedding audio is harder but doable. This article will show you how, covering several ways public media outlets add audio players to Facebook posts. (An upcoming article will cover Twitter.)
Facebook lets you embed players from several video-sharing services, including YouTube and Vimeo, or you can use their built-in player by uploading video directly to Facebook. But the platform doesn’t allow audio uploads or provide an audio player. For that, you’ll need something called the Open Graph protocol.
Open Graph opens Facebook
When a user shares a link on Facebook, their posts automatically displays a link preview. Facebook pulls a title, image and excerpt for the preview from OG meta tags in the HTML of the linked page.
OG also has video tags for embedding media players. These can play video or audio in Facebook posts. The examples of Facebook posts below all play audio (click to listen).
To get your audio into Facebook, you either get your tech staff to put OG video tags in your web pages or use one of the these audio-sharing services:
audioBoom
audioBoom stores, shares and podcasts audio. Each episode page has OG tags that embed their fine-looking Flash audio player in Facebook (and Twitter). Among its users are NPR, the BBC and StoryCorps:
Internet Archive
The massive Internet Archive library serves OG tags in pages with a single audio or video file but not playlists with multiple media files. Shared IA pages auto-embed a basic HTML5 player in Facebook (and Twitter):
Public Radio Exchange
Shared PRX piece pages embed their Flash audio player on Facebook (but not Twitter). The PRX Player does handle playlists. CTO Andrew Kuklewicz told me they built it to “use multiple audio files as a single story, which is often what we have for a radio show.” For instance, a one-hour program plays, in order, its separate billboard, segments and music breaks:
SoundCloudX
SoundCloud formerly embedded audio players on Facebook and Twitter but no longer does so. The SoundCloudX hack restores that feature. Take any soundcloud.com URL (e.g., https://soundcloud.com/user/track-name) and change the domain name to soundcloudx.com (e.g., https://soundcloudx.com/user/track-name).
When you paste that modified URL into Facebook, SoundCloud’s beautiful HTML5 audio player embeds. As with the PRX Player, SoundCloudX can embed a playlist:
I asked the developer, Mike Ramirez of Promo.ly, how long he’ll continue to support SoundCloudX. He wrote back: “I plan to keep it up and running for years to come. I use it for my own label’s music so it is in my own best interest to keep it going.”
Homegrown OG
Using an audio service to social-share your media has drawbacks: The Facebook post links back to the audio service, not to your site. Tracking data is outside your site’s analytics. You can’t control factors like ads in your audio.
Rolling your own Open Graph tags solves these problems. To do so, first, add this to your HTML <head> tag (telling browsers your page has OG metadata, a predefined “vocabulary” with the prefix "og:"):
<html prefix="og: http://ogp.me/ns#">
Next, you place this OG <meta> in the <head> section of your HTML, like this:
<meta property="og:title" content="Program Title">
<meta property="og:description" content="Program description for the link preview.">
<meta property="og:image" content="https://example.org/program-image.jpg">
<meta property="og:url" content="https://example.org/program-page/">
<meta property="og:type" content="video.movie">
<meta property="og:video" content="https://example.org/program-audio.mp3">
<meta property="og:video:secure_url" content="https://example.org/program-audio.mp3">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="480">
<meta property="og:video:height" content="50">
<meta property="fb:app_id" content="1234567890987654321">
<meta property="fb:admins" content="9876543210,1234567">
Your site probably already has "og:title" , "og:description", "og:image" and "og:url" tags (view them in your site’s source code). That’s what generates your link previews.
The video tags ("og:video…") tell Facebook to embed a player with the specified audio or video file. If you store your media at a secure site — highly recommended but not required, yet — add the "og:video:secure_url" tag.
Analytics Insights
To track Facebook Sharing Insights, include an "fb:app_id" number (get it from the App Dashboard) and "fb:admins" user IDs of those allowed to view your Insights (find yours with the Graph Explorer). Also, tell the browser your HTML has Facebook metadata, with the "fb:" prefix:
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
Sharing Debugger
Enter your URL into Facebook’s Sharing Debugger to check its link preview. If your OG embedded player tags are working, you’ll see a play-button icon over the image. If you change the tags, the debugger’s “Scrape Again” button prompts Facebook to fetch the updated data for your URL.
Making movies
In a 2016 Medium post, Delaney Simmons, then director of social media at WNYC, wrote: “Social platforms often work against our audio content even when we share it as a link to our website. It’s no secret that these platforms employ algorithms that give special treatment to native video content. Native, meaning uploaded directly onto a platform, no links needed.”
This realization led two pubmedia outlets to create apps that make videos from audio clips, which they then upload to Facebook. Both have minimal visuals, enough to occupy the eye but not distract from the sound.
Audiogram (WYNC)
Audiogram, which WNYC has open-sourced at GitHub, has a background image over which a sound wave bounces in time with the audio. Here’s a Facebook post with an audiogram made from a short excerpt of a WNYC show:
Paula Szuchman,VP of on-demand content at WNYC Studios, told me: “For WNYC Studios podcasts, we typically employ about two to three audiograms per week for new episodes.” Several other stations also put audiograms on their Facebook pages.
Shortcut (This American Life)
Shortcut allows listeners to select words in a transcript, then animates the text to follow an audio clip. It’s being beta-tested now with This American Life episodes:
This is a project of This American Life and the Tow Center for Digital Journalism, with support from the Knight Foundation Prototype Fund. They hope to open-source the app soon.
TL;DL (Too long; didn’t listen)
TAL‘s Shortcut allows only short cuts: 30 seconds max. That’s a popular length.
I asked Paula Szuchman for tips on sharing media in social posts. “At WNYC Studios our rule of thumb is to keep each audiogram around 30 seconds,” she wrote. “We’d suggest a maximum time of one minute and 30 seconds. If clips are longer, then engagement typically drops off.”
Delaney Simmons agrees. “We think shorter, more snackable content is the way to go,” she told Nieman Lab. “People on social media are always scrolling through their news feeds looking for the next thing, and after we took a look at the backend analytics, we decided the shorter, the better: Get people in, get people out, give people the best piece of content you can at the time, and hopefully they’re going to find it really interesting and engaging.”
Another bit of advice from Szuchman: “We’ve found audiograms work best when they’re self-contained — a complete thought that’s ideally something with a beginning, middle, and an end. Or at least a set-up and a punchline or ‘a-ha moment.’ Some more factors to consider: does the voice in this piece ‘pop’? Will the clip provoke an emotional response? Is it easy to understand without the context of the whole piece? Does this make you want to hear more?”
The future: Open Graph Music
Getting audio into Facebook is a bit of a hack right now. That will change when they allow everyone to use their Open Graph Music audio tags. This is the OG music player:
I should note: On the Facebook website, all the above embeds play inside the post, but OG music embeds are the only ones that do so in their mobile app. The rest launch the linked page in the app’s web browser.
At present, though, Facebook allows only an anointed set of whitelisted partners to use OG music tags. Twitter, on the other hand, already accepts all audio comers. Making tweets talk will be the subject of my next article.
Barrett Golding produces audio and develops websites. He was Executive Producer of Hearing Voices from NPR, a Peabody Award-winning weekly radio hour. He contributes to the WordPress.org Documentation and Accessibility teams. He worked in 2015–16 as a Fellow at the Reynolds Journalism Institute. In 2010 United States Artists named him a Media Fellow.
Very interesting.
the soundcloud player doesn’t work to be sneaked ! maybe will be available again.
I knew the ”secret” about soundcloudx. Today I used it again and it worked magically after posting and staying on the page. But unfortunately the music player disappears after reloading my Facebook page! Is there a way to work around?
Soundcloud disputes some of the claims, but I’d be nervous about relying on SC these days given their layoffs and rumored funding problems.
https://noisey.vice.com/en_us/article/d384ez/back-up-your-shit-because-soundcloud-might-be-dying
They don’t seem to work at all.
no luck with the above og: tags on my own server, never get the play button appear
Turns out Facebook in past month or so quietly removed the ability to play external videos. We’ll adding an update to this article noting that.
The soundcloudx method does not work on facebook, when you click on the status it opens the link on the soundcloud site. I want to embed that plays on the facebook page
Due to changes at Facebook, embedding an audio player no longer works in Facebook posts (see Update at top of this article from late last year). The methods above still work in Facebook comments, tho. Except for SoundCloudX, the changes at FB and SC prevent SoundCloud embeds.