Social Media Integration Share on Facebook – How to embed your own Videos on someone's Facebook wall when your web pages are “Shared” on Facebook
|
|
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.
*** Facebook will be eventually discontinuing the Facebook "Share" mechanism in favor of using the Facebook "Like" button. While the information in this article is still correct, it may be better for you to use the more up to date methods that I detail in my new article How to embed your own videos on Facebook using the Facebook “Like” and “Share” buttons ***
Facebook Bookmarks or "Share on Facebook"
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.
Before I begin
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".
First - Specify a Title, Description, and Image
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" /> |
Second - Specify the Location of your Video player and the Video that you want Facebook to use
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.
| <link href="/embed/player.swf?config=http://garethhooper.com/embed/flvplayer_facebook_embed_video_config.xml&file=http://garethhooper.s3.amazonaws.com/garethhooper_com/articles/social_media/integration/the_other_guys_trailer.flv" rel="video_src" /> |
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.
Lastly - Specify the dimensions of the Video player that you want Facebook to use
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.
| <meta content="234" name="video_height" /> <meta content="373" name="video_width" /> <meta content="application/x-shockwave-flash" name="video_type" /> |
Example
Here's a sample Video. The Other Guys movie trailer, and two example facebook share links below it:
The Other Guys
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).
Related Articles
- Share on Facebook – How to embed your own MP3s on someone's Facebook wall when your web pages are “Shared” on Facebook
- Share on Facebook - Customizing the Text and Images that are posted when your web pages are “Shared” on Facebook
- How to create your own Facebook Custom Page with your own page icon
- Overview of the New Facebook Social Plugins – Part 1 of 3
Please leave me a comment if you found this article useful or if you have any questions.
Comments (19)
...
-
- +2
-
-
...
-
- +0
-
-
...
Any ideas what I did wrong?
-
- +0
-
-
...
If you give me the URL I'll take a look.
Gareth
-
- +0
-
-
...
The video is at this page: http://brannockstownbaptistchu...age_id=393
Thanks for any input you can give!
Mark
-
- +0
-
-
...
I emailed you what I think is wrong and what I think you need to do to resolve the problem you're having.
I couldn't post it here as the code changes don't display correctly.
Gareth
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
When sharing to facebook they currently just link back to the posterous post.
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
-
- +0
-
-
Write comment
Show/Hide comment form
| < Prev | Next > |
|---|