googleads
Facebook link share with inline custom Video Player | Developers Tips
Standard

Facebook link share with Inline custom Video Player

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.

 

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
 

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. 

The following two tabs change content below.

Saravana

An enthusiastic Tech Lead with 7 plus years of experience in Web development arena. Owns legitimate experience in Ruby, Ruby On Rails, AngularJs, DevOps. Golang, Another add on, This young tech freak never miss a chance to get his hands on planting and Gardening even in his busy weekends.

Leave a Reply

Your email address will not be published. Required fields are marked *