Gareth Hooper's Blog

  • Home
  • IT
    • Cloud
    • Oracle
    • Web Multimedia
    • Windows
      • Active Directory
  • Social Media
    • Integration
  • About
  • Contact
  • Share on Facebook – How to embed your own Videos on someone’s Facebook wall when your web pages are “Shared” on Facebook

    Posted at 5:29 pm by Gareth Hooper, on May 16, 2010

    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 Video Post

    *** 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.

    Share on Facebook Example Link

    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.

    Facebook Post with a Video

    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=https://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

    Share on Facebook or

    Facebook Share Button

    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

    1. 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.
    2. 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
    • How to embed your own videos on Facebook using the Facebook “Like” and “Share” buttons
    • Share on Facebook – Customizing the Text and Images that are posted when your web pages are “Shared” on Facebook
    • Overview of the New Facebook Social Plugins – Part 1 of 3

    Share this:

    • Email
    • Tweet
    • ← How to make Joomla Faster – Tip #1 Apache Mod_expires
    • Overview of the New Facebook Social Plugins – Part 1 of 3 →

    Author: Gareth Hooper

    Posted in Integration | 0 Comments | Tagged Amazon S3, Facebook, Facebook Share, video player |

    Please leave me your feedback... Cancel reply

    Fill in your details below or click an icon to log in:

    Gravatar
    WordPress.com Logo

    You are commenting using your WordPress.com account. ( Log Out /  Change )

    Google+ photo

    You are commenting using your Google+ account. ( Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. ( Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. ( Log Out /  Change )

    Cancel

    Connecting to %s

    • Recent Posts

      • Amazon’s Elastic Transcoder is a Great Video and Audio Conversion Option
      • NTP and Reliable Time Sources in a Windows Active Directory Environment
      • Amazon S3 – The following objects were not made public due to errors:
      • Window Active Directory Event ID 2092 using Amazon EC2
      • How to embed your own videos on Facebook using the Facebook “Like” and “Share” buttons
    • Recent Comments

      Akhtar Hossain on Amazon S3 – The followin…
      Adi on Amazon S3 – The followin…
      Joe on Amazon S3 – The followin…
      aken huang on Amazon S3 – The followin…
      DJ on Amazon S3 – The followin…
    • Categories

      • Cloud
      • Integration
      • Oracle
      • Uncategorized
      • Web Multimedia
    • Like Me on Facebook

      Like Me on Facebook
    • Archives

      • December 2013
      • January 2012
      • December 2011
      • November 2011
      • September 2011
      • October 2010
      • June 2010
      • May 2010
      • April 2010
      • January 2009
    • RSS

      RSS Feed RSS - Posts

  • Recent Posts

    • Amazon’s Elastic Transcoder is a Great Video and Audio Conversion Option
    • NTP and Reliable Time Sources in a Windows Active Directory Environment
    • Amazon S3 – The following objects were not made public due to errors:
    • Window Active Directory Event ID 2092 using Amazon EC2
    • How to embed your own videos on Facebook using the Facebook “Like” and “Share” buttons
  • Recent Comments

    Akhtar Hossain on Amazon S3 – The followin…
    Adi on Amazon S3 – The followin…
    Joe on Amazon S3 – The followin…
    aken huang on Amazon S3 – The followin…
    DJ on Amazon S3 – The followin…
  • Archives

    • December 2013
    • January 2012
    • December 2011
    • November 2011
    • September 2011
    • October 2010
    • June 2010
    • May 2010
    • April 2010
    • January 2009
  • Categories

    • Cloud
    • Integration
    • Oracle
    • Uncategorized
    • Web Multimedia

Blog at WordPress.com.

Cancel
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.