How to embed your own videos on Facebook using the Facebook “Like” and “Share” buttons

Saturday, 28 January 2012 00:00

Did you know you can embed your own Videos on Facebook so that they appear on People’s Facebook Walls, Timelines, and News Feeds? This article will show you how to do it using the Facebook Like and Share buttons, and be able to support HTTPS, and even be able to support non-flash devices such as iPhones and iPads.

Facebook Like, Send, and Share Buttons

We have all seen the ubiquitous Like, Send, and Share buttons on blogs and Corporate websites, such as the below.

They all tend to work the same, when someone clicks the Like, Send, or Share button a new window appears where you can write some additional comments before it is posted to the person’s Facebook Wall/Timeline, and subsequently appears in that person’s Facebook friends News Feed.

In my other article Share on Facebook - Customizing the Text and Images that are posted when your web pages are "Shared" on Facebook I went over how you customize the text and images that Facebook uses for a normal (non-multimedia) web page.

For web pages that contain multimedia such as Videos, Facebook does allow you to embed your Videos on someone's Facebook wall/timeline, but only if you specify your own video player. Don't worry, it's not as complicated as it sounds.

Before I begin

All the changes I describe below will need to be done in the HTML code of the webpage that has the Video that you want to embed on someone's Facebook wall/timeline when a visitor clicks a Facebook, Like, Send, or Share button.

First - Specify the General Open Graph Meta Property tags that you add to all pages

As with normal (non-multimedia) web pages, you need to specify some Open Graph Meta Property tags. The below are the tags you need to specify as a reminder. If you have already done it, move on to the next step. If you haven’t done it and don’t know how to, read my article Share on Facebook - Customizing the Text and Images that are posted when your web pages are "Shared" on Facebook on how to do this.

Below are the general Open Graph Meta Property Tags for this webpage.

As a reminder, these tags go into the HEAD section of your webpage.

Second – Add the Video specific Open Graph Meta Property Tags

Next you need to add the video specific Open Graph Meta Property Tags. There are actually 2 types of video that you may want to specify:

Video for Flash enabled devices, PC’s, MAC’s, etc.
Video for Non-Flash devices, such as iPads, iPhones, etc. Note however, at the time of writing this article, specifying a video for non-flash devices only showed that video in the Facebook App for that device. For example, specifying a non-flash video only showed that video in the Facebook App for the iPad. It didn’t show that video when you went to the Facebook website using Safari on the iPad.

Video for Flash enabled devices

To specify the location of the Video player component and Video that you want Facebook to use for Flash enabled devices, you will need to add the following Meta Property tags to the HTML HEAD section of your webpage. For the purposes of this example, I will use the JW Player which I use all over this website, however, you may theoretically use any Video player you wish.

Where og:video is the non-secure (HTTP) version of the Flash enabled video, og:video:secure_url is the secure (HTTPS) version of the video (remember that at least 15% of Facebook users, at time of writing this article, use Facebook in secure mode, and thus won’t see your video unless you specify a secure version of it), og:video:height and og:video:width are the dimensions of the flash enabled video, and og:video:type is where you specify that this video is for flash enabled devices.

Video for Non-Flash enabled devices

With Non-Flash enabled devices such as the iPad and iPhone, you only specify the video source, you do not need to specify a video player because the video has to be played by the device’s own media player which is called from the device’s version of the Facebook App (again, it can’t be viewed from the device if you go to the Facebook website, you HAVE to use the Facebook App).

The video source itself should be MP4 format which is a standard format. I have not experimented to see if other formats are supported, I suspect that it is dependent on what the device’s media player supports. I personally stick with MP4.

Add the following Meta Property tags to the HTML HEAD section of your webpage. They should go underneath the Flash enabled video meta property tags you specified above.

Where og:video is the non-secure (HTTP) version of the MP4 video, og:video:secure_url is the secure (HTTPS) version of the MP4 video (remember that at least 15% of Facebook users, at time of writing this article, use Facebook in secure mode, and thus won’t see your video unless you specify a secure version of it). Also, I have found that if you specify a secure version of a flash enabled video but don’t specify a secure version of the MP4 video, the flash enabled video doesn’t work when browsing Facebook (from a PC) in secure mode. There seems to be no reason why this should happen, but that’s my observation. The og:video:type is where you specify that this video is MP4 and thus for Non-Flash enabled devices. You do not need to specify any dimensions for the MP4 video.

Example

Here's a sample Video, the 2012 Avengers movie trailer, and working Facebook Like, Send, and Share buttons below it. By all means use the buttons to see the information in this article at work.

If the movie isn’t playing, download a new ADOBE FLASH PLAYER.

The Avengers

You need to get your website WHITE LISTED with Facebook

Before you'll be able to successfully embed your website's videos in Facebook, you will first need to get your website white listed, which is just a simple form you fill in. Click below and fill in the simple form.

Facebook Video Embed Whitelist Request

If like this website, you host your MP4 videos on another website (for better bandwidth, etc), such as Amazon's S3 service website, you still ONLY need to whitelist your own website. You do NOT need to also whitelist the other website that is hosting your MP4 videos (e.g. Amazon S3).

Facebook turned around my whitelist request in less than 8 hours, so you'll need to wait for your whitelist confirmation (which comes via email) before proceeding with your testing.

Caution when testing

See my other article Share on Facebook - Customizing the Text and Images that are posted when your web pages are "Shared" on Facebook on how it appears that Facebook caches.
Note: You won't see the Video player on the Post to Profile page. It's only visible once the link is posted on the visitor's Facebook wall, so I suggest you test by actually posting to your own wall (you can remove the post afterwards).

Please leave me a comment if you found this article useful or if you have any questions.

Comments (3)

...

You look at and perform web longchamp bag sale page take away the store within your longchamp handbags cheap local urban center.

longchamp le pliage medium , May 14, 2012 | url

...

nearly all which in turn Firms Mac Cosmetics wholesale should be warned of just before doing Mac Cosmetics wholesale every choice to visit together with a single corporation over anothernd Foundation Examine if your current weak prospective client continues to be fascinated.

Mac Lipstick Swatches , May 14, 2012 | url

...

The actual compare with coloring Tiffany and Co for a sight could make Wholesale Tiffany Jewelry them sound extra remarkable.

Tiffany Necklaces , May 14, 2012 | url

Write comment

Show/Hide comment form

Next >