podlove / podlove-publisher

Podlove Podcast Publisher for WordPress
https://wordpress.org/plugins/podlove-podcasting-plugin-for-wordpress/
MIT License
299 stars 84 forks source link

Open Graph issues regarding embedded audio #668

Open ofadam opened 9 years ago

ofadam commented 9 years ago

The Open Graph tags produced by Podlove produces the following error when ran through Facebook's validator:

Share has playable media but will not play inline because it would cause a mixed content warning if embedded. Add a secure_src or make the video src secure to fix this.

Since many hosts don't offer secure hosting, should "og:audio" be disabled?

eteubert commented 9 years ago

The "mixed content" warning only appears if your site is secure but your files are not, right? I could check for this specific case and then don't display the go:audio tag.

ofadam commented 9 years ago

Not quite - my site is insecure for both hosted files and Wordpress framework, but Facebook's news feed forces secure access.

eteubert commented 9 years ago

Hm, I can't reproduce the issue.

For example: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fnewz-of-the-world.com%2Fnewz084-passing-gas%2F

It's a http site and http files. I don't see an error (the audio is not part of the share, thought). https://developers.facebook.com/docs/opengraph/music mentions:

og:audio:type - This should be set to "audio/vnd.facebook.bridge"

But nothing about http/https (although I remember to have read in the past that for all shared media content https is required on both Facebook and Twitter).

Do you know any site with shareable http audio that works on Facebook?

ofadam commented 9 years ago

I think the error only occurs when trying to embed http (like a podlove-based website) on an https website (Facebook.)

https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fofadam.com%2Fmovie-night%2Fepisode-92-starred-up%2F

eteubert commented 9 years ago

Facebook writes

Add a secure_src or make the video src secure to fix this.

Which makes sense. All of Facebook is https and, by design, you can't have http content inside https. So if you want your content to be playable in Facebook, you have to serve it via https.

eteubert commented 9 years ago

Just as an aside: Marco who made https://overcast.fm/ went through giant hoops to make all episodes share-able via Twitter — which is comparable to Facebook. They have their own "Twitter Card" meta tags but the main thing is, they require https.

Announcement on Twitter with example episode: https://twitter.com/OvercastFM/status/568867305352011776

If you follow the links, you end up at https://overcast.fm/podcasts/episode/221176329075926, an episode proxy page hosted by Overcast. Now, the actual media player uses the original files. But the Twitter Card contains the interesting bits:

<meta name="twitter:player" content="https://overcast.fm/podcasts/episode_card/221176329075926?t=0" />
<meta name="twitter:player:stream" content="https://beast.overcast.fm/proxy?s=601891204935e56ff945891fae7d639e0955023d0f7d4acb49de756fde1f23e9&amp;t=1424841531&amp;u=http%3A%2F%2Frelay-fm.herokuapp.com%2Finquisitive%2F27%2Flisten.mp3#t=0" />

He has to supply his own https player and proxy the whole media file through his own SSL setup. It's a nice proof of concept and as far as I understand it, this approach would equally work for sharing on Facebook.

We (or anyone else) could supply the same proxy architecture for Podlove Publisher users. However, it has the potential to create significant costs through traffic. And since the Publisher is free, that's problematic :)

ofadam commented 9 years ago

Might there be an opportunity to add a new checkbox that disables/enables the audio embedding? I'd rather have people go to my website anyway to get the full episode description – and since I don't have the means to host secure files, I'd rather turn that functionality off.

cohan commented 9 years ago

I've not been back to my dev box yet so please do forgive the lack of a patch but wouldn't something like this solve the problem Facebook's complaining about? In lib/modules/open_graph/open_graph.php

$data[] = array( 'property' => 'og:audio:secure_url', 'content' => str_replace('http://', 'https://', $media_file->get_file_url()) );

Assuming that your file host supports https on the same domain of course. This means your files are served over http as normal (as some podcast apps aren't a fan of HTTPS) but you are then able to tell Facebook et al that there's a HTTPS version for embedding if required

iFlash commented 8 years ago

Hello, maybe somebody can help me as I have a similar issue with audio. Although I provide a secure URL, Facebook debugger throws a warning. This is an example for a page I am debugging:

https://www.bodalgo.com/de/sprecher/armin-hierstetter

As you can see, both secure and unsecure URLs are provided. I have no clue why FB insists on the error in the debugger.

Any insight would be highly appreciated.