Home → Publish →


    Adding a Video to a Post with Open Graph Protocol

    Note: This article contains very technical information. It might be best for your IT person or developer to read this article.

    When you add a video to your post from the Choose Video from Web section of the Add New Video area, Publish scans through the HTML of that video's webpage looking for specific data that it can translate and apply to your post as the title and description. Facebook has developed a protocol for metadata, which allows for easy organization of the information that Facebook and other programs can grab, including content type, thumbnail image, video size and many other details. Here is Facebook's explanation about how their protocol works.

    Using Facebook's Open Graph Protocol, Publish can now use any video from any URL, as long as the URL has correctly formatted metadata in the  < head > of its HTML. Here's the list of information that should be in the < head >:

    • Thumbnail image's URL: < meta property="og:image" content="image_src URL" >
    • SWF URL:  < meta property="og:video" content="video_src URL" >
    • Your page's URL:  < meta property="og:url" content="URL" >
    • Title: < meta property="og:title" content="title" >
    • Description: < meta property="og:description" content="description" >
    • Video pixel width: < meta property="og:video:width" content="video_width" >
    • Video pixel height: < meta property="og:video:height" content="name="video_height" >
    • Content Type: < meta property="og:type" content="video" >

    Here is an example of a video from Youtube that has this correct metadata in its header:
     
    WARNING: The below code is an example. DO NOT COPY & PASTE THE INFORMATION BELOW INTO YOUR CODE.

    <meta property="fb:app_id" content="87741124305">
    <meta property="og:url" content="http://www.youtube.com/watch?v=CFLGRidfF04">
    <meta property="og:title" content="Vanilla Ice Ninja Rap - Go Ninja, Go Ninja Go!">
    <meta property="og:description" content="Ninja Rap music video by Vanilla Ice from Teenage Mutant Ninja Turtles 2 movie back in '91. Classic.">
    <meta property="og:type" content="video">
    <meta property="og:image" content="http:///14.ytimg.com/vi/GFLGRidF04/default.jpg">
    <meta property="og:video" content="http://www.youtube.com/v/GFLGRidF04?version=3&autohide=1">
    <meta property="og:video:type" content="application/x-shockwave-flash">
    <meta property="og:video:width" content="398">
    <meta property="og:video:height" content="264">
    <meta property="og:site_name" content="YouTube">

    If this solution isn't something your company thinks would support their business model, we can also whitelist any URL to be uploaded in Publish. If you need whitelisting, contact Vitrue Support or your Vitrue contact.

    Related Topics