I am working on a video library project and I want to share the video on Facebook. My og meta tags are
<meta property="og:url" content="https://test.mydomain.com/post/details/1" />
<meta property="og:type" content="video.movie" />
<meta property="og:title" content="Bibin And Blenda" />
<meta property="og:description" content=" #Videos " />
<meta property="og:image" content="https://test.mydomain.com/data/event/500/2" />
<meta property="fb:app_id" content="1976568725906357"/>
<meta property="og:site_name" content="Big DayBookings"/>
<meta property="og:video:url" content="https://test.mydomain.com/data/og_video/1">
<meta property="og:video:secure_url" content="https://test.mydomain.com/data/og_video/1">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
but when I click the play button in Facebook it wouldn't play the video, if I gave a video file URL instead of HTML 'og:video:url' it plays fine on Facebook but if it's an HTML it gives an error 'video format or mime type not supported', but I want it plays like a vimeo video shared on Facebook with all the like share button and got to website option.
And 'og:video:url' html page
<html class="gr__player_vimeo_com" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>YETI Presents: Carter Andrews from Talweg Creative on Vimeo</title>
</head>
<body data-gr-c-s-loaded="true" class="showfocus">
<div id="player" class="player player-aa721499-4e81-40a5-9e22-e7c2f7860db8 js-player-fullscreen with-fullscreen with-sticky-custom-logo">
<div class="player-inner">
<div class="video-wrapper">
<div class="video" data-thumb="https://i.vimeocdn.com/video/645868523.jpg?mw=1400&mh=688" data-thumb-width="1400" style="background-image: none;">
<div class="telecine">
<video preload="" src="https://test.mydomain.com/data/event_video/full/1"></video>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
We are trying to share audio with image on facebook. For this we are following this example
http://flowplayer.blacktrash.org/fbshare-audio.html
So now our script is
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Minimal Demo Page For Sharing Audio With Flowplayer</title>
<meta name="medium" content="video">
<meta name="title" content="Share Audio with Flowplayer">
<meta name="description" content=
"This Flowplayer demo video is coming from a page providing only the most minimal content to share audio on Facebook with Flowplayer.">
<meta name="video_type" content="application/x-shockwave-flash">
<meta name="video_height" content="30">
<meta name="video_width" content="500">
<link rel="video_src" href=
"http://66.235.194.119/payroll/flowplayer/flowplayer.swf?config=%7B%27plugins%27%3A%7B%27controls%27%3A%7B%27autoHide%27%3Afalse%2C%27height%27%3A30%2C%27fullscreen%27%3Afalse%7D%7D%2C%27play%27%3Afalse%2C%27clip%27%3A%7B%27url%27%3A%27http%3A%2F%2F66.235.194.119%2Fpayroll%2Fa.wav%27%7D%7D">
<link rel="image_src" href="http://66.235.194.119/76east/images/portfolio/thumb/item2.jpg">
<meta property="og:url" content="http://66.235.194.119/payroll/a.html">
<meta property="og:site_name" content="Flowplayer Demos">
<meta property="og:type" content="movie">
<meta property="og:title" content="Share Audio with Flowplayer">
<meta property="og:description" content=
"This Flowplayer demo video is coming from a page providing only the most minimal content to share a video on Facebook with Flowplayer.">
<meta property="og:video:height" content="30">
<meta property="og:video:width" content="500">
<meta property="og:image" content="http://66.235.194.119/76east/images/portfolio/thumb/item2.jpg">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content=
"http://66.235.194.119/payroll/flowplayer/flowplayer.swf?config=%7B%27plugins%27%3A%7B%27controls%27%3A%7B%27autoHide%27%3Afalse%2C%27height%27%3A30%2C%27fullscreen%27%3Afalse%7D%7D%2C%27play%27%3Afalse%2C%27clip%27%3A%7B%27url%27%3A%27http%3A%2F%2F66.235.194.119%2Fpayroll%2Fa.wav%27%7D%7D">
<link rel="canonical" href="http://66.235.194.119/payroll/a.html">
<link rel="stylesheet" type="text/css" href="fp.min.css">
</head>
<body>
<h1>Minimal Demo Page For Sharing Audio With Flowplayer</h1>
<p>This page demonstrates the most minimal content needed to share a video with <a href=
"http://flowplayer.org" target="_blank">Flowplayer</a>.</p>
<p>Share page and player on Facebook by clicking on <span class="bold"><a href=
"https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F66.235.194.119%2Fpayroll%2Fa.html">this
link!</a></span></p>
</body>
</html>
But when we are sharing this on facebook, its not showing player.
What we are doing wrong?
Here is the demo of script
http://66.235.194.119/payroll/a.html
I'm trying to use Facebook Open Graph meta tags for my site. I want my links to be showed correctly when I share them in Facebook. But it doesn't. When I test the link in Facebook Debuger but it always shows Error parsing input URL, no data was cached, or no data was scraped.. I searched a lot and read the Facebook's documentation about good examples and followed them. But no success. Here is my Page Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="utf-8" />
<title>تست</title>
<link rel="canonical" href="www.kaladaran.com">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="Product">
<meta name="description" content="Product">
<!--FACEBOOK-->
<meta property="og:type" content="website">
<meta property="og:title" content="Test">
<meta property="og:site_name" content="Kaladaran">
<meta property="og:url" content="www.kaladaran.com/test.html">
<meta property="og:description" content="Descritption">
<meta property="fb:app_id" content="My App Id">
<meta property="og:image" content="http://kaladaran.com/Data/1598/6ccec951-f124-43f6-abb0-a59e3d94bd67.jpg">
<meta property="og:image:width" content="250px">
<meta property="og:image:height" content="169px">
<meta property="og:locale" content="fa_IR"><meta property="article:author" content="https://www.facebook.com/KDAdsCo" />
<meta property="article:publisher" content="https://www.facebook.com/KDAdsCo" />
</head>
<body>
<div>
<h1>
Facebook Open Graph Tag Test
</h1>
<img src="http://kaladaran.com/Data/1598/6ccec951-f124-43f6-abb0- a59e3d94bd67.jpg" alt="Panasonic" />
</div>
</body>
</html>
I can't understand what is wrong with my code? Any help is appreciated in advance.
The line:
<link rel="canonical" href="www.kaladaran.com”> is causing the error. A canonical link is meant to point to the current page, not the home page.
Also, note that, the URL inside a <link> is relative if you leave out the http:// which is why you are getting the error.
Make it like :
<link rel="canonical" href="http://www.kaladaran.com/test.html">
<meta property="og:url" content="http://www.kaladaran.com/test.html">
Also, remember to type the exact same URL in the Facebook scraper.
When Facebook finds a canonical link that points to a different URL, it will treat it like a redirect .
From Facebook:
The following will be treated as a redirect by the crawler:
A HTTP redirect
A <link rel="canonical" href=".." /> tag
A <meta property="og:url" content=".." /> tag
https://en.wikipedia.org/wiki/Canonical_link_element
How can I customize the content display when I share a page on facebook or google plus. title, description, image..etc.. When I share my page now on facebook, it adds a certain image and title other the required. In case of google plus, image is shared correctly but still the title is not the one I need.
Here's how I currently use them:
<!-- Google+ -->
Any idea how can I customize it to my need or if there is any packages that could support me as well. Also, do I need to create an app on facebook or google plus in order to do so. I'm just using share button.
something like this for facebook share
<meta property="og:title" content="title here" />
<meta property="og:image" content="image url here" />
<meta property="og:type" content="website" />
debug your page first on facebook using https://developers.facebook.com/tools/debug/
to clear facebook cache on your site
you don't have to create app on facebook to use share button, i think it's same with gplus but i'm not sure.
or create this page as a target url to share
<php
$title = 'title';
$image = 'image';
?>
<meta property="og:title" content="{{$title}}" />
<meta property="og:image" content="{{$image}}" />
<meta property="og:type" content="website" />
<script>
window.location = "http://www.url-to-real-shared-page";
</script>
Lets say this is the content of your master.blade.php template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
#yield('og')
<title>Manny Isles</title>
Then this is your show.blade.ph template that extends the master.blade.php
#extends('layouts.master')
#section('content')
{{ $blog->content }}
#endsection
#section('og')
<meta property="og:title" content="{{ $blog->title }}" />
<meta property="og:image" content="{{ $blog->image_url }}" />
<meta property="og:type" content="website" />
#endsection
Just notice the #yield('og') and #section('og')
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" />
In the Facebook share button when i click popup window appears in that it is not showing image and description. What might be the reason?
<fb:share-button class="meta">
<meta name="medium" content="mult"/>
<meta name="title" content="name of fan page"/>
<meta name="description" content="description of fan page"/>
<link rel="image_src" href="url to image location" />
<link rel="target_url" href="http://facebook.com/Anti.Social.Development"/>
</fb:share-button>
You need to use the Open Graph Protocol. As given on their site, here is a full example of a movie page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>
If you check your w3c, you'll want to change the DocType to XHTML + RDFa