In this article, we are going to see how to share a website link in facebook to play videos inline, in the wall, with a custom video player.
Introduction
Most of the content shared on Facebook is as a URL, which takes us to another link. Therefore, it is important to control how your content appears on Facebook. For this, you need to markup your website with Open Graph tags, and import this info explicitly in order to provide posts of top quality in Facebook.
Open Graph properties for Custom Video
In order to set the Open Graph properties for a video, you need to add the following code snippet in the <header> section of your html page. Refer the sample https://github.com/agiratech/facebook-url-share for detailed information.
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
<title>Page Title</title>
<meta name="keywords" content="app, name" />
<meta name="description" content="Page Description" />
<!-- FACEBOOK -->
<meta property="fb:app_id" content="application_id"/>
<meta property="og:site_name" content="site_name">
<meta property="og:url" content="page_url" />
<meta property="og:title" content="page_title" />
<meta property="og:image" content="image_url" />
<meta property="og:description" content="page_description" />
<meta property="og:type" content="video" />
<meta property="og:video" content="secure player .swf url" />
<meta property="og:video:secure_url" content="player secure .swf url" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="640" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<!-- FACEBOOK -->
</head>
It is advised to use the Open Graph tags properly for best results of posts. So, I have listed out some of the best practices to follow for the properties mentioned in the above code snippet.
og:title – The title should be only 60 to 90 characters of length. If it exceeds, it will get truncated to 88 characters by Facebook. Also, the best practice is not to use the site name as the title.
og:description – The main description of the content goes here, and should be around 200 characters only.
Og:url – This tag is used to provide the url. It is possible to provide different versions of the same content. But it should be noted that it will not be effected in case the different versions are hosted on separate subdomains. Also, they will be treated as the same if they are accessible over both http:// and https://.
Og:image – The minimum image size is 200 x 200 pixels. The tip is to use a 1200 x 630 pixels for top quality on high resolution devices.
Og:video – In case you did not know this, Facebook supports only mp4 and Flash videos. Therefore, you need to pass an mp4 video url for Facebook to play it in its default html5 player. In case you want to use your own player, best is to use flash players.
Facebook Crawler
Whenever someone shares a link on Facebook, the Facebook crawler comes into play, and scrapes the html of the URL that is shared. It will then cache and display information like title, description, image, etc.
If the content changes after the page crawl, the newly modified changes will not effect immediately. In such cases, Facebook should be forced to rescrape the URL, which can be done by either of two ways:
- Sharing Debugger https://developers.facebook.com/tools/debug/
- Using below ruby script
uri = URI.parse("https://graph.facebook.com?id=page_url&scrape=true")
Net::HTTP.post_form(uri,{})
Conclusion
Now, we are all set to share a webpage’s URL in Facebook, using a custom video player. Follow Agira for more interesting blogs and queries.
