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.
Related
I am trying to get an S3 video to play in line on Facebook. My site is https://sigtwo.com/vlog/14/.
S3 Video: https://s3.amazonaws.com/spsttestbucket/20190220_142312_NF_2000k.mp4
I believe I used the proper tags as other parts of the post seem to work fine.
Meta tags are as follows:
<meta property="og:title" content="SigTwo Mapping & Imagery Solutions" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://sigtwo.com/vlog/14/" />
<meta property="og:description" content="Too many potholes on Storrow Drive after this winter. Someone needs to fix it." />
<meta property="og:image" content="http://sigtwo.com/static/img/OrangeMaskHeight500.png" />
<meta property="fb:app_id" content="571517186592163" />
<meta property="og:video:url" content="https://s3.amazonaws.com/spsttestbucket/20190220_142312_NF_2000k.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:height" content="720" />
<meta property="og:video:width" content="1280" />
Here are results of debugger where everything seems fine:
https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fsigtwo.com%2Fvlog%2F14%2F
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?
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" />