How to share videos on Facebook and Twitter from your own website

Note: if you're using Galaxie Blog, all that you need to do is upload your file and create the necessary XML Post Directives and Galaxie Blog will take care of the rest for you. This post is a technical how-to article on how I incorporated Plyr into Galaxie Blog. This is a continuation of my how to make the perfect social media sharing image series, but here we focus on using video and audio on Facebook and Twitter instead of sharing images.

Create the Video

In this video, I used a Battlestar Galactica preview made as a university project made by Bob. The 2004 Battlestar Galactica was one of my favorite Sci-Fi TV shows. The 2004 version of Battlestar Galactica is essentially a science fiction rendition of both the Genesis and Exodus stories, but the 10 plagues were instead caused by 6 different eerily human-like robots created by humans. OK, enough of the Sci-Fi stuff; time to get back to the substance of this article here.... Your own video should be created in mp4 format using the progressive HDTV 720p format. The final size should be 1280 x 720 (2048K bitrate).

Creating the images used by the social media platform along with the cover image

We still need to create several images to serve as the cover image. These images will cover the video until the video is loaded. If you reload this page, you will see a dark Battlestar Galacticaimage that will cover the video until the video is loaded. Once the video is loaded, the large arrow will show on top of the cover image.

  1. After you have created the video, create an image of the video by pressing the print screen. We will use this to create the images that we'll use in the image meta tags and to create a cover image for the video
  2. Crop the images using the same ratio and size formats as we did in part 2. The cover image for Facebook should be 1200x630, Twitter's dimensions are nearly the same at 1200x628. The cover image should be either .jpg or .png. WebP is not yet supported for social media sharing. I am providing resources and examples below.
  3. Once you have created and uploaded the images to your site, we need to create the essential open graph and Twitter tags and validate them on our web page as we did here:

You'll need to have an HTML5 capable Media Player on your website

It goes without saying that you'll also need to have an HTML5 Media Player to handle the video and audio formats on your own website. If you don't have an HTML5 media player, you can follow my steps to integrate Plyr on your own website.

Creating a separate player instance for Twitter

Unfortunately, Twitter can't read embedded videos from your own web page. Buried in Twitters player card documentation, you'll find that you also need to create a separate instance of your media player, and either point to the new instance, or an iframe. Importantly, the video must take up the full width of the page. This is how I solved this issue using Plyr. If you don't have Plyr, you'll have to use this approach with your own HTML5 media player. Here is the ColdFusion code that I used to create a new page with Plyr.

<!doctype html>
<!--- Note: this is a proof of concept page. This template will be revised. --->
<head>
	<!-- Plyr (our HTML5 media player) -->
	<InvalidTag src="/blog/common/libs/plyr/plyr.js"></script>
	<!-- Plyr css. -->
	<link rel="stylesheet" href="/blog/common/libs/plyr/plyr.css" />
</head>

<cfparam name="URL.videoUrl" default="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4">
<cfparam name="URL.poster" default="https://gregoryalexander.com/blog/enclosures/twitter/blueMoonTrailer.jpg">
<cfparam name="URL.crossOrigin" default="false">
<style>
<!--- This must be set to full screen! --->
.mediaPlayer video {
	width: 100% !important
}
</style>

<div class="mediaPlayer">
	<video
		controls
		<cfif URL.crossOrigin eq true>crossorigin</cfif>
		playsinline
		poster="<cfoutput>#URL.poster#</cfoutput>"
		id="player1">
		<!-- Video files -->
		<!-- 1280x720 --->
		<source
			src="<cfoutput>#URL.videoUrl#?id=#createUuid()#</cfoutput>"
			type="video/mp4"
			size="720"
		/>

	</video>
</div>

This new instance of your player must be set to take the full width of the page. If it does not render the video using the full width of the page, Twitter will play the video at a much smaller resolution and the users will only see part of the video being played.

Creating the essential media meta tags

Twitter tagsThe following twitter tags must be set in the header of the page.

  • The first tag, the twitter:player meta tag is a directive that tells Twitter that we want to use the player card. When we are using just an image and not a video, we would use 'twitter:card' 'summary_large_image'
  • The next 4 tags are similar, if not identical, to the tags that we've covered in How to make the perfect social media sharing image - part 5. The only difference is that here we are using the image of the video that you have created in a previous step above.
  • I am using ColdFusion's createUuid function to generate the id element in the twitter:image. This is a trick that I learned to refresh the twitter preview after the initial twitter preview has been made.
<!-- Twitter meta tags. -->	
<!-- Note: we are using the twitter player card --->		
<script name="twitter:card" content="player" />
<script name="twitter:site" content="@https://gregoryalexander.com/blog" />
<script name="twitter:title" content="Plyr, a HTML5 media player, is incorporated into Galaxie Blog" />
<script name="twitter:description" content="Plyr is now the default HTML5 media player in Galaxie Blog" />
<!-- This is a picture taken of the video. The size of this image is 1200x628. --->
<script name="twitter:image" content="https://gregoryalexander.com/blog/enclosures/twitter/blueMoonTrailer.jpg?id=E2DC9DE6-9B6A-9736-EE1FFFD42B90FEC3" />

The next tags are used to tell Twitter how to play our fancy shiny video.

  • The "twitter:player" tag has the full URL to the minimal HTML5 Media Player that we covered above
  • The "twitter:player:width" for the recommended 720p video is 1280 pixels.
  • And the "twitter:player:height" for the recommended 720p video is 720 pixels.
<!-- Twitter player card meta types -->
<!-- The twitter video must be on a minimal page that just includes the video, and nothing else. -->
	
<script property="twitter:player" content="https://gregoryalexander.com/blog/videoPlayer.cfm?videoUrl=https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4&poster=https://gregoryalexander.com/blog/enclosures/twitter/blueMoonTrailer.jpg&id=E2DC9DE7-9749-288C-C9BA9EBE432D3203">
<script property="twitter:player:width" content="1280"></script>
<script property="twitter:player:height" content="720"></script>

Facebook Open Graph Tags

Facebooks' approach to video sharing is more streamlined than Twitter's. First, we don't need a minimal media player that plays the video on a full page. Facebook will glean the source of the video found in the og:video tag. The first 5 tags are identical to the open graph meta tags used for images. The only difference is that I added an extra fb:app_id meta tag. This key is not required; I am using my own developer key here as I want Facebook to know that this share is coming from a trusted source.

<!-- Open graph meta tags for Facebook. See notes. -->
<script property="og:image" content="https://gregoryalexander.com/blog/enclosures/facebook/blueMoonTrailer.jpg" /> 
<script property="og:site_name" content="Gregory's Blog" />
<script property="og:url" content="https://gregoryalexander.com/blog/2019/11/15/Plyr-a-HTML5-media-player-is-incorporated-into-Galaxie-Blog" />
<script property="og:title" content="Plyr, a HTML5 media player, is incorporated into Galaxie Blog" />
<script property="og:description" content="Plyr is now the default HTML5 media player in Galaxie Blog" />
<script property="fb:app_id" content="your facebook app id" />

The next set of tags informs Facebook that we are sharing a video.

  • The og:type tag indicates that we are using video.
  • The og:video:type tag indicates that we are using .mp4 as our video format. Facebook recommends .mp4 as its preferred video format.
  • The og:video, og:video:url, and og:video:secure_url should point to the same URL that is the source of the video. The video:type is not required, but I am including it in my code just to cover all of my bases here.
  • The og:video:width and height tags use the same width and height as Twitter using the 720p video format.
<!-- Video meta types -->
<script property="og:type" content="video.movie" />
<script property="og:video:type" content="video/mp4" />
<script property="og:video" content="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" />
<script property="og:video:url" content="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" />
<script property="og:video:secure_url" content="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" /> 
<script property="og:video:width" content="1280" /> 
<script property="og:video:height" content="720" />

You can see an example of how this video was shared by following me on Twitter. Happy coding!