Instead of just posting a plain link, the Open-Graph tags and Twitter cards provide us with a cool option to embedding Kaltura videos player directly with the entry video, description and title.
Lets Begin with Twitter Cards
Twitter Cards can be used for all kinds of web content, from blog posts and news articles, to videos and more. It is designed to give the reader a preview of the content before clicking through to your website.
The Twitter Cards require the following Meta tags that contain information about your content and site, in the following form:
name – The name of the property
content – The value of the name property
<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@panda-os" />
<meta name="twitter:url" content="https://cdnapisec.kaltura.com/...." />
<meta name="twitter:player" content="https://cdnapisec.kaltura.com/.... " />
<meta name="twitter:image" content="https://cdnapisec.kaltura.com/.... " >
<meta name="twitter:title" content="Panda-OS Open Source Solutions" />
<meta name="twitter:description" content="PandaOS is a freelance open-source software development and consulting agency. We specialise in web applications, online video, CMS, and more!" />
<meta name="twitter:player:width" content="560" />
<meta name="twitter:height" content="395" />
Twitter Cards Additional Remarks
-
The Twitter Card Validator Tool and Twitter Card Types, the Validator tool provides a glimpse of the number of meta tags that have been rendered.
-
You can find the source content of your entry url/player in the KMC under preview and embed.
-
Twitter requires an https prefix for your url/player/image content source such as:
“https://cdnapisec.kaltura.com”
-
In some cases when using the Validator Tool you will need to request an approval for your player, the approval procedure may take couple of days.
Lets continue with Facebook Open-Graph
People use stories to share the things they’re doing, the people they’re doing them with and the places where they happen. Let people share stories about your app on Facebook through a structured, strongly typed API. Open-Graph supports embedding videos, blogs, articles and more then Twitter.
Facebook provides custom options embedding your content on iOS, Android, Web Apps and more.
The Open-Graph requires the following Meta tags that contain information about your content and site, in the following form:
property – The name of the property
content – The value of the property
<meta property="og:type" content="video" />
<meta name="og:video:type" content="text/html" />
<meta name="og:site" content="@panda-os" />
<meta name="og:video:url" content="http://cdnapi.kaltura.com/...." />
<meta name="og:video:secure_url" content="https://cdnapisec.kaltura.com/.... " />
<meta name="og:image" content="https://cdnapisec.kaltura.com/.... " >
<meta name="og:title" content="Panda-OS Open Source Solutions" />
<meta name="og:description" content="PandaOS is a freelance open-source software development and consulting agency. We specialise in web applications, online video, CMS, and more!" />
<meta name="og:player:width" content="560" />
<meta name="og:player:height" content="395" />
Facebook Open-Graph Additional Remarks
-
The Facebook Debugger Tools and Facebook Open-Graph Protocol, unlike the Twitter validator tool, Facebook debugger tool provides us much more information about our page with an explanation of each meta tag that has been rendered, including warnings that should be fixed and more.
-
You can find the source content of your entry url/player in the KMC under preview and embed.
-
Facebook requires an https prefix for your url/player/image content source such as:
“https://cdnapisec.kaltura.com”
-
In some cases when using the Debugger Tool, you will need to request an approval for your player, the approval procedure may take couple of days.