We all know that videos and audios hold a significant place in social platforms like Facebook and Twitter. So it is pivotal to deliver rich and quality media on this platforms. When we consider Twitter, most of the content is shared on twitter as a URL, which takes us to another link. Therefore, it is important to control how your content appears on Twitter. For this, you need to mark up your website with twitter card tags and import this info explicitly in order to provide posts of top quality in Twitter.

So in this article, we are going to see how to share a website link on twitter to play videos inline, on the wall.

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.

Twitter card properties for Video

In order to set the twitter card properties for a video, we need to add the following meta properties in the <header> section of your HTML page. Refer the sample https://github.com/agiratech/twitter-url-share for detailed information.

<head>
    <title>Player page Title</title>
    <meta name="keywords" content="Player page keywords" />
    <meta name="description" content="Player page description" />
   <!-- Twitter -->
   <meta name="twitter:card" content="player" />
   <meta name="twitter:site" content="Player site name" />
   <meta name="twitter:url" content="Player page url" />
   <meta name="twitter:title" content="Player page title" />
   <meta name="twitter:description" content="Player page description" />
   <meta name="twitter:image" content="image url" />
   <meta name="twitter:player" content="player page url" />
   <meta name="twitter:player:width" content="player width" />
   <meta name="twitter:player:height" content="player height" />
   <!-- Twitter -->
</head>

It is advised to follow twitter card best practices for better appearance on the tweet.

Here is an example of what I did during the development of the application:

<head>
    <title>Player page Title</title>
    <meta name="keywords" content="Video, Sharing, Social Media" />
    <meta name="description" content="Sharing the video on social media" />
   <!-- Twitter -->
   <meta name="twitter:card" content="player" />
   <meta name="twitter:site" content="Agira" />
   <meta name="twitter:url" content="www.agiratech.com" />
   <meta name="twitter:title" content="Promotional content" />
   <meta name="twitter:description" content="Sharing the promotional video on social media" />
   <meta name="twitter:image" content="www.agiratech.com/media/uploads/promo.jpg" />
   <meta name="twitter:player" content="www.agiratech.com/media/player" />
   <meta name="twitter:player:width" content="360" />
   <meta name="twitter:player:height" content="640" />
   <!-- Twitter -->
</head>

ng your Card for approval

Twitter Player Card requires whitelist approval through the twitter card validator (https://cards-dev.twitter.com/validator).

Go to the Card Validator URL
Open Validate & Apply menu
Enter player page URL and click GO
If all the meta tags are properly set, click on Submit for Approval
Fill the form, with email address for further updates

Don’t violate Twitter Policy (https://dev.twitter.com/overview/terms/policy) and Display Principles (https://about.twitter.com/en-gb/company/display-requirements)

Conclusion

Now we are all set to share a web page URL on Twitter. Sharing a website link in facebook to play videos can also be done following some simple steps like this. Here is the article that helps you to share a website link on facebook to play videos inline, on the wall, with a custom video player. Follow Agira for more interesting blogs.

Have any doubts or queries? Comment below.

0Likes