Sharing On Facebook And Twitter Guide

Sharing on Facebook

Where we at now?

In the "good old days" we used to be able to share a Flash-based 3rd-party player directly into a Facebook timeline. But as Flash is now obsolete in the streaming media industry and we use HTML5 video new constraints have come to see the lights of day. With HTML5 video Facebook only allows a selected number of Internet giants to embed content (YouTube, Twitch, Vimeo ...) with their custom player on a Facebook timeline. For all the others (yes - this you and us), they cannot currently share a custom HTML5 video player on a Facebook timeline. We can only provide Facebook with an MP4 URL and this URL will be displayed in the browser default HTML5 video player. We hope Facebook will be more open in the future but as of May 2017 - this is what it is.

Anyhow it is still possible to offer a smooth sharing experience to your audience through the the Open Graph protocol. This is how it works:

• On your web page where Radiant Media Player is hosted you will need to add specific Open Graph markup
• In the player just activate the social sharing module with Facebook sharing enabled and the player will automatically pick up on the Open Graph markup when shared on Facebook

Open Graph Markup

Documentation for using Open Graph markup with Facebook can be found here. In order to validate or debug your Open Graph markup you would want to use the Sharing Debugger here.

In order to properly share video content we need the following tags (you must adapt them to your content):

<!-- Basic required tags -->
<meta property="og:url" content="https://www.radiantmediaplayer.com/guides/sharing-facebook-twitter-guide.html">
<meta property="og:title" content="Sharing on Facebook and Twitter guide - Radiant Media Player">
<meta property="og:description" content="Best practices to share media content on Facebook and Twitter with Radiant Media Player.">
<meta property="og:image" content="https://www.radiantmediaplayer.com/images/radiantmediaplayer-logo-640.jpg">
<!-- Optional tags but recommended -->
<meta property="og:type" content="video.other">
<meta property="og:locale" content="en_US">
<meta property="fb:app_id" content="your-fb-app-id">
<!-- Media related tags -->
<meta property="og:video:url" content="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4">
<meta property="og:video:secure_url" content="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="360">

The player shown below can be used to test Open Graph based sharing on Facebook. Note that as explained above the video will not be rendered in Radiant Media Player itself but the native HTML5 video player for your current browser (which may only support limited features).

Sharing on Twitter

In order to better share media content on Twitter through Radiant Media Player we will review how to use Twitter Cards and more specifically Player Cards.

You will need to do the following:

• Set up your twitter:player and test it. Essentially this is Radiant Media Player in iframe mode.
• Fill the required markup for your Twitter Card and add it to your page
• Submit your Card for approval to Twitter

Once you have completed all those steps you will be able to share Radiant Media Player including its advanced features through our sharing module on Twitter. Below is an example of Twitter Card markup (you must adapt it to your content):

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@radiantmp">
<meta name="twitter:title" content="Sharing on Facebook and Twitter guide - Radiant Media Player">
<meta name="twitter:description" content="Best practices to share media content on Facebook and Twitter with Radiant Media Player.">
<meta name="twitter:image" content="https://www.radiantmediaplayer.com/images/poster-rmp-demo.jpg">
<meta name="twitter:player" content="https://www.radiantmediaplayer.com/docs/latest/gist/iframe/iframe.html">
<meta name="twitter:player:width" content="640">
<meta name="twitter:player:height" content="360">
<meta name="twitter:player:stream" content="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4">

Implementation example

Here is an example of player that can be shared on Facebook (with open graph markup) and Twitter (with Twitter Card markup) through our sharing module.