Did you know you can embed your own Videos on someone's Facebook wall when someone uses "Share on Facebook" on your website? This article will show you how to do it.
We have all seen the ubiquitous “Share” buttons on blogs and Corporate websites, such as the below.
They all tend to work the same, when you click Facebook a new browser window opens up and you will see the usual Facebook “Post to Profile” page (such as the one at the top of this article).
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, but only if you specify your own video player. Don't worry, it's not as complicated as it sounds.
All the changes I describe below will need to be done in the HTML code of the webpage on your website that has the Video, and that you want to embed on someone's Facebook wall when a visitor clicks "Share on Facebook".
As with normal (non-multimedia) web pages, you should specify a title, description, and image for your multimedia web page. I explained how to do this in my other article Share on Facebook - Customizing the Text and Images that are posted when your web pages are "Shared" on Facebook, so you'll need to do this first if you haven't already. If you're restricted by where you can put these, for example, you use Wordpress, the image_src can go in the html body.
In the example at the bottom of the page, I specified the title, description, and image below.
<meta name="title" content="Share on Facebook – How to embed your own Videos on someone's Facebook wall when your web pages are Shared on Facebook" />
<meta name="description" content="Did you know you can embed your own Videos on someone's Facebook wall when someone uses Share on Facebook on your website? This article will show you how to do it." />
<link rel="image_src" href="/images/stories/articles/social_media/integration/facebook_video_post_onwall.jpg" />
To specify the location of the Video player component and Video that you want Facebook to use, you will need to add the following html code to your web page (it can live in the html body). For the purposes of this example, I will use the JW Player which I use all over this website, however, you may use theoretically any Video player component you wish.
Where embed/player.swf is the relative location of the Video player, ?config=http:/garethhooper.com/embed/flvplayer_facebook_embed_video_config.xml is the absolute location of the configuration for the Video player (so will change depending on the Video player you use), and &file=http://garethhooper.s3.amazonaws.com/garethhooper_com/articles/social_media/integration/the_other_guys_trailer.flv is the absolute location of the Video file. In this case the Video file is on another website (Amazon S3), but you can also specify the full URL of your own website if the Video file is located there.
You should specify the height and width of the Video player so that Facebook displays it correctly. You will also need to specify a video type. The height, width, and video type can go in the html body.
Here's a sample Video. The Other Guys movie trailer, and two example facebook share links below it:
Share on Facebook or
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.
Please leave me a comment if you found this article useful or if you have any questions.