im trying to display the player from Vimeo on the facebook wall (after clicking the link share).
<html>
<head>
<title>Some title</title>
<meta name="title" content="Some title" />
<meta name="description" content="Some description" />
<link rel="image_src" href="http://b.vimeocdn.com/ts/xxx/xxx/xx.jpg" />
<link rel="video_src" href="http://player.vimeo.com/video/XXXXXX" />
<meta name="video_height" content="360" />
<meta name="video_width" content="640" />
<meta name="video_type" content="application/x-shockwave-flash" />
<meta name="medium" content="video" />
</head>
<body></body>
</html>
using this, facebook doesn't load the video directly. Im not sure why its not working, so anyone with experience - can you tell me where i fail?
Use the new Facebook open graph meta tags. I grabbed the vimeo link by going to a vimeo video, clicking embed, clicked "old embed code", and grabbing the url.
<meta property="og:image" content="http://b.vimeocdn.com/ts/xxx/xxx/xx.jpg"/>
<meta property="og:video" content="http://vimeo.com/moogaloop.swf?clip_id=xxxxxxxx&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1&autoplay=0&loop=0" />
<meta property="og:video:height" content="360" />
<meta property="og:video:width" content="640" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
Related
I am using og:video meta tag to do sharing of video and I can play the video in Facebook newsfeed from desktop browser. However if I view the video from Facebook app, it will not not play the video and it will bring me to the article page.
You can use the Facebook Share feature from https://www.youth.sg/Spotted/People/2017/5/Captured-by-the-journey
Appreciate anyone who can help. Is there any issue with my meta tag?
<meta property="og:video" content="https://www.facebook.com/video/embed?video_id=1557722510925076" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:type" content="video.other" />
<meta property="og:image" content="https://www.youth.sg/~/media/YouthSG/behind-the-gram-yk/YK-banner.ashx?w=800&h=450&thn=1" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="450" />
<meta property="og:title" content="Captured by the journey" />
I have a web page that shows video and people can share it to facebook.
here are the open graph meta tags im using:
<meta property="fb:app_id" content="app_id" />
<meta property="og:url" content="https://www.domain.com/show/245" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Website tile" />
<meta property="og:description" content="Website description" />
<meta property="og:video" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:video:url" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:video:secure_url" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:image" content="https://www.domain.com/uploads/thumbnail.png" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
*not actual domain name and app id, for privacy purpose
When i check the page using sharing debugger, it works okay, no error whatsoever.
The shared video also looks okay, just like normal video. But when i try to play it, it shows "download file" link to the video file instead.
Any idea why this is happening? i tried using different video, using 3rd party tools like addThis to generate the share button, but the result is the same.
Just figured it out!
You need to call "og:video:type" before you set video source.
I know it's weird, but this prevents api to set video source to "flash".
So your meta tag should look like this:
<meta property="og:url" content="someurl" />
<meta property="og:type" content="video.other" />
<meta property="og:title" content="yourtitle" />
<meta property="og:image" content="https://url.com/img.png">
<meta property="og:video:type" content="video/mp4"/>
<meta property="og:video" content="https://url.com/video.mp4" />
<meta property="og:video:url" content="https://url.com/video.mp4" />
<meta property="og:video:secure_url" content="https://url.com/video.mp4" />
<meta property="og:video:width" content="videoWidth"/>
<meta property="og:video:height" content="videoHeight"/>
<meta property="fb:app_id" content="id" />
I am trying to post two videos in single playlist without using any flash player. I have tried following code.
<meta property="og:site_name" content="Test" />
<meta property="og:url" content="LINKING_URL" />
<meta property="og:title" content="test!!!!" />
<meta property="og:image" content="preview_image_url" />
<meta property="og:type" content="video.tv_show" />
<meta property="og:video:url" content="http://mydomain/video1.mp4" />
<meta property="og:video:secure_url" content="https://mydomain/video1.mp4" />
<meta property="og:video:url" content="http://mydomain/video2.mp4" />
<meta property="og:video:secure_url" content="https://mydomain/video2.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="480" />
<meta property="og:video:height" content="360" />
By applying this, First video is displaying on my FB wall and its playing also.
Actually I need to add two videos in single post video but its adding only one.
I have tried with video.episode, video.other, video.movie. But there is no successful result.
Any Suggestion?
I am hosting videos on a website, and have created Open Graph video tags so that when a page like example.com/video/my-new-video is shared on Facebook that video can be played in the Facebook newsfeed, but there's no link back to example.com/video/my-new-video.
The Open Graph tags in this case look like this:
<meta property="og:title" content="My New Video" />
<meta property="og:description" content="This is my new video about sharing videos" />
<meta property="fb:app_id" content="xxxxxxxxxxxxx" />
<meta property="og:image" content="http://example.com/video/my-new-video/poster-image.jpg" />
<meta property="og:url" content="http://example.com/video/my-new-video/" />
<meta property="og:type" content="video" />
<meta property="og:video" content="http://example.com/video/my-new-video/video-file.swf" />
<meta property="og:video:secure_url" content="https://example.com/video/my-new-video/video-file.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
If I remove the og:video URL that points to the SWF to play the video I get the video's image and description with a link to example.com/video/my-new-video but it's not possible to play the video in the Facebook newsfeed.
The Open Graph tags in this case look like this:
<meta property="og:title" content="My New Video" />
<meta property="og:description" content="This is my new video about sharing videos" />
<meta property="fb:app_id" content="xxxxxxxxxxxxx" />
<meta property="og:image" content="http://example.com/video/my-new-video/poster-image.jpg" />
<meta property="og:url" content="http://example.com/video/my-new-video/" />
<meta property="og:type" content="video" />
<meta property="og:video" content="http://example.com/video/my-new-video/iframe-embed.php" />
<meta property="og:video:secure_url" content="https://example.com/video/my-new-video/iframe-embed.php" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
Is there a way to both let the video play in the Facebook feed and link back to the page it's on?
From just a simple SoundCloud link pasted into my Facebook status update, then Facebook detects that it is a SoundCloud link and embeds a nice SoundCloud player into the post:
I have inspected the metadata on the SoundCloud page and found only one OpenGraph entry, og:site_name:
<meta charset="utf-8" />
<title>SoundCloud - Hear the world’s sounds</title>
<meta content="record, sounds, share, sound, audio, tracks, music, soundcloud" name="keywords" />
<meta content="Explore the largest community of artists, bands, podcasters and creators of music & audio" name="description" />
<meta name="google-site-verification" content="dY0CigqM8Inubs_hgrYMwk-zGchKwrvJLcvI_G8631Q" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--[if IE]>
<meta content="true" name="MSSmartTagsPreventParsing">
<meta content="false" http-equiv="imagetoolbar"> <![endif]-->
<meta content="19507961798" property="fb:app_id" />
<meta content="SoundCloud" property="og:site_name" />
<meta content="soundcloud" property="twitter:site" />
<meta content="SoundCloud" property="twitter:app:name:iphone" />
<meta content="336353151" property="twitter:app:id:iphone" />
<meta content="SoundCloud" property="twitter:app:name:ipad" />
<meta content="336353151" property="twitter:app:id:ipad" />
<meta content="SoundCloud" property="twitter:app:name:googleplay" />
<meta content="com.soundcloud.android" property="twitter:app:id:googleplay" /> <link href="/sc-opensearch.xml" rel="search" title="SoundCloud Search" type="application/opensearchdescription+xml" /> <link rel="icon" href="https://a-v2.sndcdn.com/assets/images/sc-icons/favicon-154f6af5.ico" />
<meta name="application-name" content="SoundCloud" />
<meta name="msapplication-tooltip" content="Launch SoundCloud" />
<meta name="msapplication-TileImage" content="https://a-v2.sndcdn.com/assets/images/sc-icons/win8-38b02b00.png" />
<meta name="msapplication-TileColor" content="#ff5500" />
<meta name="msapplication-starturl" content="https://soundcloud.com" />
In addition, I can play the music and even more fancy custom things happen:
I have read about Open Graph, custom actions, objects and so on. I have had a good go at the Facebook documentation and played all through the settings of my custom app, but I can't work out how to emulate the kind of thing SoundCloud has.