The Facebook Open Graph protocol is a simple and great way to add meta data to your existing webpages. It basically turns your external pages into a Facebook page! It's important to display the right information on a per page basis, whether that be a description, image, video, or song. By adding additional information to your headers, you can change the title, url, share image, and even add media like videos and music. Open graph optimization is an important skill to understand, regardless of your Facebook implementation.

Adding Open Graph

If you have not already read about how to add the Facebook Open Graph API to your page, check out my entry on Using Facebook's Graph API to optimize your Likes. It will get you started and explain how and why we add certain tags.

Using Flowplayer

Flowplayer is a great way to play locally hosted content, without the limitations of youtube or vimeo.

Below is the default modern skin config which is nearly transparent, and plays a h264 video hosted wherever you want, with a posterframe:

"playlist":[ "http://lumapictures.com/assets/images/thumb/650x254/reel/montage.jpg", { "url":"http://lumapictures.com/assets/reel/luma/Luma_Reel_Montage_050611_650.mp4", "autoPlay":true, "autoBuffering":true } ], "screen":{ "height":"100pct", "top":0 }, "plugins":{ "controls":{ "borderRadius":"0px", "buttonOffColor":"rgba(130,130,130,1)", "timeColor":"#ffffff", "bufferGradient":"none", "sliderColor":"#000000", "zIndex":1, "backgroundColor":"rgba(0, 0, 0, 0)", "scrubberHeightRatio":0.6, "volumeSliderGradient":"none", "tooltipTextColor":"#ffffff", "spacing":{ "time":6, "volume":8, "all":2 }, "sliderGradient":"none", "timeBorderRadius":20, "timeBgHeightRatio":0.8, "volumeSliderHeightRatio":0.6, "progressGradient":"none", "height":26, "volumeColor":"#4599ff", "tooltips":{ "marginBottom":5, "buttons":false }, "timeSeparator":" ", "name":"controls", "volumeBarHeightRatio":0.2, "opacity":1, "timeFontSize":12, "left":"50pct", "tooltipColor":"rgba(0, 0, 0, 0)", "bufferColor":"#a3a3a3", "border":"0px", "volumeSliderColor":"#ffffff", "buttonColor":"#ffffff", "durationColor":"#b8d9ff", "autoHide":{ "enabled":true, "hideDelay":500, "mouseOutDelay":500, "hideStyle":"fade", "hideDuration":400, "fullscreenOnly":true }, "backgroundGradient":"none", "width":"100pct", "sliderBorder":"1px solid rgba(128, 128, 128, 0.7)", "display":"block", "buttonOverColor":"#ffffff", "url":"flowplayer.controls-3.2.5.swf", "timeBorder":"0px solid rgba(0, 0, 0, 0.3)", "progressColor":"#4599ff", "timeBgColor":"rgb(0, 0, 0, 0)", "scrubberBarHeightRatio":0.2, "bottom":0, "builtIn":false, "volumeBorder":"1px solid rgba(128, 128, 128, 0.7)", "margins":[ 2, 12, 2, 12 ] } }

There are many configuration options. They even have an online player setup. While this will not work directly for our purposes, we can use this to copy the the config object and feed it into our own Facebook config.

If you need a tool to easily read the config object, visit http://jsonformatter.curiousconcept.com/. This will put it in a human readable format.

Using Flowplayer In Facebook

Including the following in the HEAD of your html will make your page accessible on Open Graft with an video player right on Facebook and your wall posts.

If you use URL Linter, you will be able to see the swf link at the bottom of the page. Using the like button from the page will show the video.