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>
We are using this example to share content on facebook.
http://flowplayer.blacktrash.org/fbshare.html
But when we are sharing as per example its showing a save button on share dialog. Please tell us how we can remove this.
<meta name="medium" content="video">
<meta name="title" content="Flowplayer Demo Video">
<meta name="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 name="video_type" content="application/x-shockwave-flash">
<meta name="video_height" content="300">
<meta name="video_width" content="500">
<link rel="video_src" href=
"http://flowplayer.blacktrash.org/flowplayer-3.2.18.swf?config=%7B%27clip%27%3A%7B%27url%27%3A%27http%3A%2F%2Fstream.flowplayer.org%2Fflowplayer-700.flv%27%7D%7D">
<link rel="image_src" href="http://flowplayer.org/img/home/flow_eye.jpg">
<meta property="og:url" content="http://flowplayer.blacktrash.org/fbshare.html">
<meta property="og:site_name" content="Flowplayer Demos">
<meta property="og:type" content="movie">
<meta property="og:title" content="Flowplayer Demo Video">
<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="300">
<meta property="og:video:width" content="500">
<meta property="og:image" content="http://flowplayer.org/img/home/flow_eye.jpg">
<meta property="og:image:secure_url" content=
"https://d12zt1n3pd4xhr.cloudfront.net/fp/img/flow_eye.jpg">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content=
"http://flowplayer.blacktrash.org/flowplayer-3.2.18.swf?config=%7B%27clip%27%3A%7B%27url%27%3A%27http%3A%2F%2Fstream.flowplayer.org%2Fflowplayer-700.flv%27%7D%7D">
<meta property="og:video:secure_url" content=
"https://d12zt1n3pd4xhr.cloudfront.net/fp/swf/flowplayer-3.2.18.swf?config=%7B%27clip%27%3A%7B%27url%27%3A%27https%3A%2F%2Fd12zt1n3pd4xhr.cloudfront.net%2Ffp%2Fflowplayer-700.flv%27%7D%7D">
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
What else should i include inside the head tag in-order to support as many browsers, HTML5, search engines, social networking sites etc
<title>My Site</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="My Site is cool">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="My Site"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="assests/icon_big.png"/>
<meta property="og:url" content="http://url.com"/>
<meta property="og:site_name" content="My Site"/>
<meta property="og:description" content="My Site is cool"/>
<link rel="shortcut icon" href="assests/favicon.ico" />
<link rel="apple-touch-icon" href="base_url();?>assests/icon.png"/>
<link rel="icon" href="assests/icon.png"/>
Taken from Paul Irish's Mobile HTML5 Boilerplate:
<!-- Mobile viewport optimization h5bp.com/ad -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<!-- Home screen icon Mathias Bynens mathiasbynens.be/notes/touch-icons -->
<!-- For third generation iPad Retina Display -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png" />
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png" />
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png" />
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png" />
<!-- For nokia devices: -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png" />
<!-- iOS web app, delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->
<!-- <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
<!-- The script prevents links from opening in mobile safari. https://gist.github.com/1042026 -->
<!-- <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script> -->
<!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
<meta http-equiv="cleartype" content="on">
For Bing SEO
<meta name="geo.placename" content="United States" />
<meta name="geo.position" content="x;x" />
<meta name="geo.region" content="usa" />
<meta name="ICBM" content="x,x" />
SEO
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>
<meta name='language' content='ES'>
<meta name='robots' content='index,follow'>
<meta name='abstract' content=''>
<meta name='topic' content=''>
<meta name='summary' content=''>
<meta name='Classification' content='Business'>
Author
<meta name='author' content='name, email#hotmail.com'>
<meta name='designer' content=''>
<meta name='reply-to' content='email#hotmail.com'>
<meta name='owner' content=''>
Dublin core metadata
<meta name="dc.language" CONTENT="UK">
<meta name="dc.source" CONTENT="http://www.your-domain.com/">
<meta name="dc.relation" CONTENT="http://www.second-domain.com/">
<meta name="dc.title" CONTENT="a title">
<meta name="dc.keywords" CONTENT="more keywords">
<meta name="dc.subject" CONTENT="the subject">
<meta name="dc.description" CONTENT="A description of the content">
Mobile
<meta name='HandheldFriendly' content='True'>
<meta name='MobileOptimized' content='480'>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="theme-color" content="#000">
<meta name="apple-mobile-web-app-title" content="title">
<link rel="icon" sizes="192x192" href="img/brand/icon_192.png">
<link rel="apple-touch-icon" href="img/brand/icon_192.png">
Claim Ownership
<meta name='y_key' content='XXXXXXXXXX'> <!-- Yahoo Site Explorer -->
<meta name='verify-v1' content='XXXXXXXXX'> <!-- Google -->
Disable Cache
<meta http-equiv='Expires' content='0'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Cache-Control' content='no-cache'>
IE
<meta http-equiv='imagetoolbar' content='no'>
<meta http-equiv="X-UA-Compatible" content="IE=edge>
Open Graph
<meta property="og:title" content="My Site"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="assests/icon_big.png"/>
<meta property="og:url" content="http://url.com"/>
<meta property="og:site_name" content="My Site"/>
<meta property="og:description" content="My Site is cool"/>
Twitter Card
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
Misc
<meta charset='UTF-8'>
<meta name='pageKey' content='guest-home'>
<meta itemprop='name' content='jQTouch'>
<meta name='revised' content='Sunday, July 18th, 2010, 5:15 pm'>
<meta name='search_date' content='2010-09-27'>
<meta name='ResourceLoaderDynamicStyles' content=''>
<meta name='medium' content='blog'>
<meta name='syndication-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
<meta name='original-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
<meta name='url' content='http://www.websiteaddrress.com'>
<meta name='identifier-URL' content='http://www.websiteaddress.com'>
<meta name='directory' content='submission'>
<meta name='pagename' content='jQuery Tools, Tutorials and Resources - O'Reilly Media'>
<meta name='category' content=''>
<meta name='coverage' content='Worldwide'>
<meta name='distribution' content='Global'>
<meta name='rating' content='General'>
<meta name='revisit-after' content='7 days'>
<meta name='subtitle' content='This is my subtitle'>
<meta name='target' content='all'>
<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="Description">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<script src="init.js"></script>
</head>
Keep it short and sweet. If you need to include social tags for the open graph that's fine.
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