I have a website with many video pages. There is only one video on each page.
When i share a link of one of these pages on facebook, it is not considered as a video, but only a standard article.
Thumbnail, Title and Decription are well displayed. But instead of displaying the thumbnail, i would like Facebook to display the video.
I'm using videoJS as video player.
Here is my html header:
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page Description" />
<meta property="fb:admins" content="ADMIN-ID" />
<meta property="fb:app_id" content="APP-ID" />
<meta property="og:image" content="/path/to/the/thumbnail.jpg" />
<meta property="og:type" content="video" />
<meta property="og:url" content="www.domain.com/video.html" />
<meta property="og:video" content="www.domain.com/video.mp4" />
<meta property="og:video:type" content="video/mp4" />
And my video :
<video id="video_1" class="video-js vjs-default-skin shadow" controls preload="auto" width="686" height="386" poster="path/to/the/poster.png">
<source src="path/to/the/video.mp4" type='video/mp4' />
</video>
Here are the Facebook Debug Tool informations :
{
"url": "http:\/\/www.domaine.com\/video.mp4",
"type": "video\/mp4",
"width": 686,
"height": 386
}
and
status :
Video embedding on Facebook enabled
Thanks for your help and your comprehension, i'am a newbe in Facebook API.
Do you have HTTPS URLs for your video files in the OG meta tags as well?
You will need HTTPS sources as well, since most Facebook users surf over HTTPS already (and Facebook is in the process of getting the rest of them there).
Related
I am dealing with problem of sharing same image on messenger and facebook in Angular PWA app. Whole thing is done using tags in html. The problem is in size of image, the photo is in recommended size for Facebook 1200x630px and it shows correct. While i am sharing it via messenger it is cut, maybe there should be another image or I didnt configure it correctly. I also set width and height of image using meta.
Here's code:
<meta property="og:title" th:content="${title}">
<meta property="og:url" th:content="${url}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="here is site name" />
<meta property="og:image" content="here is photo url" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="314" />
<meta property="fb:app_id" content="here is facebook app id" />
I have a component with shared buttons and messenger is using function from FB docs.
shareOnMessenger() {
window.open('fb-messenger://share?link=' + encodeURIComponent(this.detailedViewURL) + '&app_id=' + encodeURIComponent(this.facebookMetaTag.content));
}
i have a video page which i want to share on facebook. once i share that page on the facebook its showing video which can be played on the facebook itself. i want that video page should be shown as youtube page shared on facebook with the video on left side and title description on right side. once you click on the video it will expand and starts playing(copy any video link from the youtube and share you will see the video on left title description on the rightside)
as in the following image
following og tags i have added
<meta property="og:title" content="Tilt Viral App" />
<meta property="og:url" content="https://tilt.regalixdigital.com/share.php?id=video1503325335" />
<meta property="og:description" content="Test11" />
<meta property="og:video:url" content="https://tilt.regalixdigital.com/tilt_videos/video1503325335.mp4" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:secure_url" content="https://tilt.regalixdigital.com/tilt_videos/video1503325335.mp4" />
<meta property="og:video:width" content="600" />
<meta property="og:video:height" content="400" />
<meta property="og:site_name" content="Tilt" />
<meta property="og:image" content="https://tilt.regalixdigital.com/images/new-design/FB_Poster.jpg" />
my video page
https://tilt.regalixdigital.com/share.php?id=video1503325335
Here are the og meta tags I'm using:
<meta property="fb:app_id" content="xxxxxxxxxxxxxxxxx" />
<meta property="og:video" content="http://videogami.s3.amazonaws.com/54c2c58c19d5bdec65000036.mp4">
<meta property="og:video:secure_url" content="https://videogami.s3.amazonaws.com/54c2c58c19d5bdec65000036.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="600">
<meta property="og:video:height" content="380">
<meta property="og:title" content="" />
<meta property="og:image" content="http://videogami.s3.amazonaws.com/54c2c58c19d5bdec65000036.big.jpg" />
<meta property="og:url" content="http://videogami.tv/h/54c2c58c19d5bdec65000036" />
<meta property="og:type" content="video.other" />
If I share the link manually, the embedding works perfectly. But when I share the link through the Facebook /me/feed api, it won't play and just shows a link to the mp4 that says "download file".
Here is an example link: http://videogami.tv/h/54c2bb1719d5bdec65000030
Any idea why this might be happening? I'm pretty sure you don't need a flash player anymore, it said nothing about this in the FB docs that I could find.
It makes no sense that it would work when you manually post it, vs posting the link through the api...
When fbml was supported by fb, you could use iframes but is there a way to conduct a survey style in a fb post with embedded swf files.
Because I develop using Adobe Flash Builder & Adobe Flex 4.6+?
We can share content on facebook, to do that we use Open Graph tags which are included in your page’s HTML and allow the Facebook Crawler to generate previews when your content is shared on Facebook.
You can start here : https://developers.facebook.com/docs/sharing/best-practices#tags and https://developers.facebook.com/docs/opengraph/using-objects and If you have questions, I am here to help you.
Take this example :
<html xmlns:og="http://ogp.me/ns#">
<head prefix="og: http://ogp.me/ns fb: http://ogp.me/ns/fb">
<meta property="og:type" content="game" />
<meta property="og:url" content="http://your.site.com/page.html" />
<meta property="og:title" content="title here" />
<meta property="og:description" content="description here" />
<meta property="og:image" content="http://your.site.com/image.jpg" />
<meta property="og:video" content="https://your.https.site.com/your_swf.swf" />
<meta property="og:video:width" content="480" />
<meta property="og:video:height" content="360" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
</head>
This html code will give you an export like this :
For more details you can also see : https://developers.facebook.com/docs/games/feed-gaming and for you debug on facebook, to verify if you get what you want, you can use facebook debug page here : https://developers.facebook.com/tools/debug/og/object/
No, it isn´t possible, is like trying to post a gif on fb, it will only show the link
Wanted scenario:
people link to my website via Facebook
open graph data pops up (name, description, thumbnail, ...) (which works)
when you click the thumbnail a youtube video plays (which doesn't work)
Facebook seems to know that there is a video to be played, but doesn't want to go through with it.
My code:
<meta property="og:image" content="<url>" />
<meta property="og:site_name" content="<name>" />
<meta property="og:description" content="<description>" />
<meta property="og:video" content="http://www.youtube.com/v/S3_AwK3ujQI&fs=1" />
<meta property="og:video:width" content="560" />
<meta property="og:video:height" content="315" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<link rel="video_src" href="http://www.youtube.com/v/S3_AwK3ujQI&fs=1" />
<meta name="video_type" content="application/x-shockwave-flash" />
<meta name="video_width" content="560" />
<meta name="video_height" content="315" />
What seems to be wrong? I read somewhere that the solution has to do something with SSL, but since I link to a external YouTube video that shouldn't be the case; or is it?
You also need an og:picture. Using https for the video url will let it play for people who have Facebook on secure. Go to a youtube page and check out what they're using for og tags.