API Documentation: OpenGraph Metadata
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