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 shared my site in fb and in place where the image should be it says just "index of /". ??
I have these in my head:
<head prefix="og: http://ogp.me/ns#">
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta property="og:description" content="Graphic design etc other stuff..." />
<meta property="og:title" content="Audiovisual" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="/images/ogimage.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<link rel="canonical" href="http://audiovisuaalinen.work/english.html" />
<meta property="og:url" content="http://audiovisuaalinen.work/english.html" />
<meta property="og:type" content="product" />
<meta property="fb:admins" content="1385587538423284" />
If you want to control more of what Facebook uses in their snippets, you can add open graph tags to your site. Then Facebook will use those tags to populate the title, description, thumbnail, etc. when shared on Facebook.
You have to use an absolute URL for the Open Graph image:
<meta property="og:image" content="http://audiovisuaalinen.work/images/ogimage.png" />
When a link from my Tumblr blog is posted on Facebook, Facebook grabs the title between the title tags and not the one specified in the Open Graph meta tags. Why is it doing this? Is there any way to fix it?
Without seeing the code, I'm not sure what you're problem is exactly, but for anyone else searching for this looking for how to set up Open Graph on their blog, try doing something like this:
<!-- FACEBOOK OPEN GRAPH -->
<!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<meta property="og:site_name" content="{Title}"/>
{block:PermalinkPage}
<meta property="og:url" content="{Permalink}"/>
<meta property="og:type" content="article"/>
{block:Posts}
{block:Text}
{block:Title}<meta property="og:title" content="{PlaintextTitle}"/>{/block:Title}
<meta property="og:description" content="{PlaintextBody}"/>
{/block:Text}
{block:Photo}
<meta property="og:image" content="{PhotoURL-500}"/>
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photo}
{block:Photoset}
{block:Photos}
<meta property="og:image" content="{PhotoURL-500}"/>
{/block:Photos}
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photoset}
{block:Quote}
<meta property="og:title" content="{PlaintextQuote}"/>
<meta property="og:description" content="{PlaintextSource}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Quote}
{block:Link}
<meta property="og:title" content="{PlaintextName}"/>
<meta property="og:description" content="{PlaintextDescription}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Link}
{block:Chat}
<meta property="og:title" content="{PlaintextTitle}"/>
<meta property="og:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} • {/block:Lines}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Chat}
{block:Audio}
<meta property="og:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
<meta property="og:description" content="{PlaintextCaption}"/>
{block:AlbumArt}<meta property="og:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
{/block:Audio}
{block:Video}
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Video}
{block:Answer}
<meta property="og:title" content="{PlaintextQuestion}"/>
<meta property="og:description" content="{PlaintextAnswer}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Answer}
{/block:Posts}
{/block:PermalinkPage}
{block:IndexPage}
<meta property="og:title" content="{Title}"/>
<meta property="og:type" content="blog"/>
<meta property="og:description" content="{MetaDescription}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:IndexPage}
Should cover just about anything you can through at it!
Remember that all of the code belongs before the closing </head> tag.
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.
When you post a youtube link on facebook a player will show up on your wall, letting other people play the video right away. How is this done, and how can you do the same thing for your own website, such that when people post a link to one of your pages, you can make a widget show up on facebook instead of the actual link?
It´s actually pretty simple you need to add several meta tags to your website
Open Graph Protocol
Something like:
<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 want to embedded a video you can just do:
<html xmlns:og="http://ogp.me/ns#">
<head>
...
[REQUIRED TAGS]
<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:secure_url"
content="https://secure.example.com/awesome.swf" />
<meta property="og:video" content="http://example.com/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://example.com/fallback.vid" />
<meta property="og:video:type" content="text/html" />
...
</head>
</html