logo

let’s make something together

Give us a call or drop by anytime, we endeavour to answer all enquiries within 24 hours on business days.

Find us

PO Box 16122 Collins Street West
Victoria 8007 Australia

Email us

info@domain.com
example@domain.com

Phone support

Phone: + (066) 0760 0260
+ (057) 0760 0560

Facebook link share with Inline custom Video Player

  • By Saravana
  • February 21, 2017
  • 38 Views

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.

Saravana

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 *