Embed Audio & Video from BlogEngine.NET 2.0 MediaElementPlayer to Facebook

It was a long road to embed audio and video into Facebook. First of all you have to request your site to be whitelisted for Facebook videos. Unless you're whitelisted, you couldn't embed videos. This link gives an overview of the Facebook Share Functionality and which properties are required. There you'll also find this link to request your site to be whitelisted. After you send your request, you'll receive an e-mail from Facebook that they'll review your site. And if you're whitelisted, they will contact you again within one week - if not, they didn't contact you. So you have to hope and wait. I've waited one complete week to get finally whitelisted.

After that I've started implementing a Facebook Extension which writes the required metadata properties. After some time I realized that it was crap and not userfriendly. So I've changed the MediaElementPlayer.cs which have all required information for the audio/video information. I thought it is much better to include this direct into the class which already does all the work.

Required Components

First a little overview of which fields are required. At one site, Facebook says, only FLV files are supported. At another site they say, only SWF files are supported. This confused me a lot and so I had to experiment and test a lot to find all the required meta attributes to get it to work. I also inspected a few other sites which embeds videos into Facebook which metadata they write into their headers. After some time I found a combination of metadata properties which worked. The important thing is, that you couldn't embed directly FLV files into Facebook. Therefore you need your own FLV player in SWF format which plays your video. This is the reason why you need JW Player or an equivalent SWF Video Player.

Regarding Facebook you need following:

<meta property="og:title" content="video title" />
<meta property="og:description" content="video description" />
<meta property="og:image" content="video screenshot image url" />
<meta property="og:video" content="video url (.swf only)"/>

And following fields are optional:

<meta property="og:video:height" content="video height" />
<meta property="og:video:width" content="video width" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

But I didn't get it to work with this attributes. This is the combination of attributes which worked for me. I've added a few at the same time and tested it. So it is possible that maybe a few of them are not really required. But I was to tired to test it out again. Because Facebook has its own cache and when you modify your attributes, Facebook will not read the site again. So you either have to create a new post or change the Slug to get a new URL to the posting. Otherwise Facebook will not read again the new site. However, here are the properties

<meta property="og:title" content="Your title"></meta>
<meta property="og:description" content="Your description"></meta>
<meta property="og:image" content="A image of the video"></meta>
<meta property="og:video" content="http://xtrm.cc/jwplayer/player.swf?file=http://xtrm.cc/media/video/hotelcaliforniasolo.flv&autostart=true&allowfullscreen=true&height=432&width=576"></meta>
<meta property="og:video:height" content="432"></meta>
<meta property="og:video:width" content="576"></meta>
<meta property="video_height" content="432"></meta>
<meta property="video_width" content="576"></meta>
<meta property="video_type" content="application/x-shockwave-flash"></meta>
<link rel="http://xtrm.cc/jwplayer/player.swf?file=http://xtrm.cc/media/video/hotelcaliforniasolo.flv&autostart=true&allowfullscreen=true&height=432&width=576"></link>

With this combination of metadata I was finally able to embed a video into Facebook. For the image I use a hardcoded image for every video. I was too lazy to create a thumbnail for every video.

One important thing you should know: I've modified the MediaElementPlayer with a additional setting to use the default dimension of the video if nothing else is specified. I don't wan't to specify the height and width for every single video. So I've configured MediaElementPlayer to use the default height and width if nothing else is specified. I've added these two lines to the InitSettings method

initialSettings.AddParameter("usedefaultdimension", "Use Default Dimension for every video if nothing else is specified");
initialSettings.AddValue("usedefaultdimension", "False");

And in the ProcessMediaTags method I've added following code within the foreach loop

bool usedefaultdimension = false;
bool.TryParse(_settings.GetSingleValue("usedefaultdimension"), out usedefaultdimension);
if (usedefaultdimension)
{
    if (string.IsNullOrEmpty(w))
        w = _settings.GetSingleValue("width");
    if (string.IsNullOrEmpty(h))
        h = _settings.GetSingleValue("height");
}

This gives me two advantages

  1. I didn't have to care about adding the video dimensions when writing a new post with video and I always use the default dimension (only if you change the new setting to true!)
  2. For Facebook I always have a valid height and width for the metadata

To implement all this, you have to create a new folder on your blog root named "jwplayer" and copy the content of the downloaded ZIP file into it. I think the only important file is the player.swf. But I've also copied the jwplayer.js, swfobject.js and yt.swf into the folder in case I will use it somewhere else. Then you have to add following lines to the ProcessMediaTags method at the end of the foreach (but within the foreach)

//add facebook metadata for media

AddMetaData("og:title", post.Title);
AddMetaData("og:description", post.Description);
AddMetaData("og:image", Utils.AbsoluteWebRoot + "xtrmlogo.jpg");
if (tagName == "video")
{
    string swfUrl = Utils.AbsoluteWebRoot + "jwplayer/player.swf?file=" + Utils.AbsoluteWebRoot + folder.TrimEnd(new char[] { '/' }) + "/" + src + "&autostart=true&allowfullscreen=true&height=" + h + "&width=" + w;
    AddMetaData("og:video", swfUrl);
    AddMetaData("og:video:height", h);
    AddMetaData("og:video:width", w);
    AddMetaData("video_height", h);
    AddMetaData("video_width", w);
    AddMetaData("video_type", "application/x-shockwave-flash");
    AddLinkData(swfUrl);
}
else if (tagName == "audio")
{
    string audioUrl = Utils.AbsoluteWebRoot + folder.TrimEnd(new char[] { '/' }) + "/" + src;
    AddMetaData("og:audio", audioUrl);
    AddMetaData("og:audio:artist", "Hardcoded Artist");
    AddMetaData("og:audio:title", post.Title);
    AddLinkData(audioUrl);
}

You also need these two methods

private static void AddMetaData(string propertyName, string content)
{
    if (string.IsNullOrEmpty(propertyName) || string.IsNullOrEmpty(content))
        return;

    if (HttpContext.Current.CurrentHandler is System.Web.UI.Page)
    {
        System.Web.UI.Page pg = (System.Web.UI.Page)HttpContext.Current.CurrentHandler;
        HtmlGenericControl metaTag = new HtmlGenericControl("meta");
        metaTag.Attributes.Add("property", propertyName);
        metaTag.Attributes.Add("content", content);
        pg.Header.Controls.Add(metaTag);
    }
}

private static void AddLinkData(string link)
{
    if (string.IsNullOrEmpty(link))
        return;

    if (HttpContext.Current.CurrentHandler is System.Web.UI.Page)
    {
        System.Web.UI.Page pg = (System.Web.UI.Page)HttpContext.Current.CurrentHandler;
        HtmlGenericControl metaTag = new HtmlGenericControl("link");
        metaTag.Attributes.Add("rel", link);
        pg.Header.Controls.Add(metaTag);
    }
}

Important things to know about this piece of code:

  • You always have to fill out the Excerpt when writing a new post. This is used as the description which is required for Facebook
  • I use a hardcoded logo for the video. You have to change this to your own logo or you dynamically create a thumbnail from the video
  • I set the variables for JWPlayer to autostart the video. Otherwise the users have to click twice in Facebook to view the video
  • I specify to allow fullscreen but for some reason this didn't work within Facebook
  • For audio I use a hardcoded artist at the moment because the only audio files I post are my guitar recordings
  • The audio title is at the moment the post title. You could change this to your needs for example with a new attribute in the [audio] tag. E.g. [audio scr="lala.mp3" title="Best song in the world" artist="Me"] and use these attributes for Facebook. With a few developing skills this shouldn't be a problem to implement. Otherwise you could ask me of how to do this.

This should be all :-) For example if you now click on my "Share on Facebook" button with a video it will look like this

And when you click on it, it plays fine

Same for audio posts

I'm not quite sure what happens if you have multiple audio/video files with resulting multiple metadata tags. Maybe I'll give it a try some time. I hope this post was helpful!

Here you could download the complete MediaElementPlayer.cs:

MediaElementPlayer.cs (13.43 kb)

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About the author

Something about the author

Month List