API Documentation: OpenGraph Metadata

By default, when sharing videos to Facebook, the outbound link points to WellcomeMat's video landing page on www.wellcomemat.com. The reason is because Facebook needs certain metadata (called OpenGraph) to embed videos inside of Facebook. It is possible to have the outbound links point to your domain if you embed our OpenGraph data onto the page you want to link to.

The process is simple:

1. Get the hash for the WM video in question

  • For individual videos (which, for example, could be on a listing landing page), you already know the hash from embedding the video.
  • For a channel or playlist, this can be pulled from the url.
    Example: ?wm_video_id=k5hfc1467d036dt

2. Make this API call to retrieve the OpenGraph data

OpenGraph: /api/media/opengraph.php

Parameter Name Label Notes
hash Video Hash
url Page URL The URL you want Facebook to point to

Example Response

<!-- Facebook OpenGraph metadata -->
<link rel="image_src" href="http://3acbc45816885af0fe7a-edffc6cf84a1214568eae26dc2113f20.r76.cf1.rackcdn.com/jvmed0abc163fr7_3fr79dab4e59f0o7_large.jpg" />
<meta property="og:title" content="Inspired by... Pools - Profile Video - WellcomeMat" />
<meta property="og:description" content="View more information about the Extraordinary properties featured in this video" />
<meta property="og:url" content="https://www.example.com/video.html" />
<meta property="og:site_name" content="marketing" />
<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://www.wellcomemat.com/player.swf?loader=https://www.wellcomemat.com/player&track_url=facebook.com&video_id=jvmed0abc163fr7&autoplay=true" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:secure_url" content="https://www.wellcomemat.com/player.swf?loader=https://www.wellcomemat.com/player&track_url=facebook.com&video_id=jvmed0abc163fr7&autoplay=true" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="360" />
<meta property="og:image" content="http://3acbc45816885af0fe7a-edffc6cf84a1214568eae26dc2113f20.r76.cf1.rackcdn.com/jvmed0abc163fr7_3fr79dab4e59f0o7_large.jpg" />

<!-- Twitter OpenGraph metadata -->
<meta name="twitter:card" content="player">
<meta name="twitter:title" content="Inspired by... Pools - Profile Video - WellcomeMat">
<meta name="twitter:description" content="View more information about the Extraordinary properties featured in this video">
<meta name="twitter:player" content="https://www.wellcomemat.com/embed/jvmed0abc163fr7?track_url=twitter.com">
<meta name="twitter:player:width" content="640">
<meta name="twitter:player:height" content="360">
<meta name="twitter:player:stream" content="http://8b651a9a92e3e35ae33d-eaef829eae7c04fd12005cc3ad780db0.r48.cf1.rackcdn.com/b17edf460139g6_bf0354f8_270p.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4">
<meta name="twitter:image" content="http://3acbc45816885af0fe7a-edffc6cf84a1214568eae26dc2113f20.r76.cf1.rackcdn.com/jvmed0abc163fr7_3fr79dab4e59f0o7_large.jpg">

We strongly recommend saving this information locally so that the call doesn't slow your page's load time. Note that the OpenGraph data will change as often as the fields above are changed in WellcomeMat.

3. Dynamically insert this HTML into the page's <head> tag