I have a HTML page where I am using javascript to load contents based on query string value..
In javascript, I have some dynamic code to load separate data on the page based on this query string value.
Now my page link looks like
https://example.com?datatype=1
https://example.com?datatype=2
https://example.com?datatype=3
Based on this my page data will vary.
Now I want to Add Facebook and LInked in Sharing on this and want to send custom information to share on facebook and LinkedIn.
As per my R&d, this data can be posted using metatags.
As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.
Can anyone suggest how I can Post URL, title, and description to this linkedIn and facebook.
Thanks in Advance
So, I want to focus in on one thing you have stated here:
As per my R&d, this data can be posted using metatags. As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.
That's actually not the complete story. Even if your webpage is "pure client-side", you still absolutely need to have an HTML framework to hold this, even if it's as minimal as: <html><head><script type="text/javascript" src="...."></head></html>. What you will need to do is to edit the document being served for your client-side application.
You did not mention a language, so, let's just assume you're using ReactJS. The procedure here will be the same for other client-side pages.
After making a react project, I have this file, ./public/index.html, and in it is...
<!doctype html>
<html lang="en">
<head>
<title>Scheduler</title>
<meta charset="utf-8" />
<link id="css-root" href="" rel="stylesheet" type="text/css" />
</head>
...
</html>
All you need to do is to insert the og: tags to your for LinkedIn. Just use the tags as described by the Official LinkedIn Share Documentation. This should look like this...
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Hope this helps!
I have a website where I'd like to have a facebook like button, with the button being customized so it shows a specific picture, description, etc.
All of that is done and it works, however I used regular img, description, title meta tags instead of the og tags we are supposed to use.
Facebook complains when I lint the website with http://developers.facebook.com/tools/debug.
Here are some error messages:
Inferred Property: The 'og:url' property
should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property
should be explicitly provided, even if a value can be inferred from other tags.
and etc for all of the other tags...
Here is the problem: When I did add and configure the tags as shown in examples provided on the web, not only did it not work, I recieved another error:
Meta Tags In Body: You have tags ouside of your . This is either because
your was malformed and they fell lower in the parse tree, or you accidentally
put your Open Graph tags in the wrong place. Either way you need to fix it
before the tags are usable.
Here is my html config:
<html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:og="http://opengraphprotocol.org/schema/">
...
<meta property="og:url" content="..." />
<meta property="og:site_name" content="..." />
<meta property="og:type" content="..." />
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />
<meta property="fb:app_id" content="..." />
...
NOTE: My fb-root tag and the other fb provided like button code is at the very bottom of the page along with the other script's.
NOTE: I did zero configuration on open graph's website, or on facebook's open graph section of my app, in facebook developers, however I don't think that this is an issue because in fb's instructions, they said to add a like button only copying/pasting code is needed and no actual open graph configuration was needed.
Here is the site URL: http://darehut.com
NOTE: My tag code is actually inside the head element in my source, but for whatever reason, they get rendered outside!
Thanks for your help!!
Meta Tags In Body: You have tags ouside of your . This is either because
your was malformed and they fell lower in the parse tree, or you accidentally
put your Open Graph tags in the wrong place.
That message is missing the word <head> before the first period.
What it means, is pretty simple: Either you put your OG meta tags outside of your <head> element, or your HTML is malformed.
And next time you ask a question like this, please include the URL to the document you’re having trouble with – that way, we can have a look at it ourself and we’ll be able to answer more specific.
I have tried everything I could before posting this question here on stack overflow.
I am unable to understand why Facebook doesn't pick up any related information to posts on hellyalol for example title, thumbnails or description.
This is an example http://hellyalol.com/181/my-date/
All the open graph tags are in place as shown by source code but facebook debugger doesn't pickup any open graph tag.
<meta property='og:title' content='Will you be my date?'/>
<meta property='og:url' content='http://hellyalol.com/181/my-date/'/>
<meta property='og:site_name' content='Hell Ya LOL'/>
<meta property='og:type' content='article'/>
<meta property='og:image' content='http://hellyalol.com/wp-content/uploads/2011/10/fart-exhibit-150x150.jpg'/>
Another big confusion is When I change permalinks in WordPress for example my-date to your-date it surprisingly works.
e.g http://hellyalol.com/195/years-ago/ this one is working just fine while you share it on facebook but still debugger doesn't pick any open graph tags :S but still I changed the permalink twice for this post before it could work with WordPress
Can any one help? Thanks a lot :(
Server Details: I am using Lightspeed and using w3 total cache with memcache enabled.
Make sure to not miss this in your opening html tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
This is your current html tag - as you see, some parts are missing (or wrong) there:
<html xmlns="http://www.w3.org/1999/xhtml"
dir="ltr"
lang="en-US"
xml:lang="en-US"
xmlns:og="http://opengraphprotocol.org/schema/">
Just found the answer. For facebook to work with your blog, you should must have www in front of domain. I changed the domain url from http://hellyalol.com to http://www.hellyalol.com and its working
Is there any way to get facebook's crappy Open Graph meta tags to validate if my doctype is <!DOCTYPE html> (HTML5)?
Other than facebook's Open Graph meta tags, my document validates perfectly.
I really don't want to use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> as that creates a whole new set of problems.
Here is an example of one of the validation errors in question...
Error Line 11, Column 47: Attribute property not allowed on element meta at this point.
<meta property="og:type" content="website" />
Any help would be appreciated... I have been searching off and on for days to no avail.
For HTML5, add this to your html element like described on ogp.me and keep your og: prefixed properties:
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
...
For XHTML (like OP's question), use the name attribute instead of property attribute. Facebook lint will throw a warning, but the meta value will still be recognized and parsed.
<meta name="og:title" content="Hello Facebook" />
Yes. To validate as HTML5, add the prefix attribute from the Open Graph docs:
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>
Copy and paste the above to the w3 validator to check.
It is production ready – Apple uses this method on apple.com.
The short answer is no, not at this time. All other answers are workarounds, hacks, or just plain crazy. The only long-term solution is that Facebook needs to create an alternate syntax that is valid HTML5.
To those recommending targeting Facebook by the "facebookexternalhit" User Agent, you have to remember that other companies are following Facebook's lead with these tags. For example, Google+ will fall back to the OpenGraph tags if their preferred Schema.org markup isn't present. Since most sites aren’t using Schema.org attributes (especially if they’re spending the time to use OpenGraph correctly), you can easily miss out on enhancing your snippets on sites like Google+ by following this advice.
With the ubiquity of Facebook, it really isn't a good solution to target them directly--even if their choice of implementation is problematic for developers. When looking for solutions on a site like Stack Overflow, you always have to remember that there can be unforeseen consequences to these methods.
For our main sites, we've stuck with XHTML+RDFa for validation sake, and it's worked well enough. I'm hoping that as HTML5's usage grows, the Facebook team will start accepting a valid format for this metadata.
As for why we care about validation:
We've found that validation, when possible, helps to alert us to errors in our pages by not teaching us to ignore them. Since we all use validation extensions in our browsers, we know instantly if there's a validation error (or warning) on a page, and can investigate whether it's possible to eliminate it (which 99+% of the time it is). This saves us time dealing with restrictive implementations of the specs, especially on fringe and mobile platforms nowadays. We've seen a huge reduction in odd bugs because we're aware of our pages being valid and know that what's going on in the browser doesn’t have to do with invalid markup that a particular UA might not interpret as expected.
These meta tags are only required when facebook scans the page for these tags.
<?
if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){
echo '<meta property="og:type" content=xxxxxxxxxxxxx';
// continue with the other open graph tags
}
?>
The said tags will only be present when facebook needs them - this method with PHP removes them completely for all other instances including W3C validation.
Many of the answers here have become outdated. Please don't snoop for headers or write via JavaScript (since the processors might not evaluate the JS).
The W3C Recommendations (Extensions to HTML5) called RDFa 1.1 and RDFa Lite 1.1 (see http://www.w3.org/TR/rdfa-lite/ and http://www.w3.org/TR/rdfa-primer/ ) have made the "property" attribute valid and conforming. In the mean time (since the older answers here) the validator http://validator.w3.org/check recognizes the attribute as valid. In addition, the Open Graph Protocol documentation, http://ogp.me/ , has been updated to reflect RDFa 1.1 (it uses the "prefix" attribute).
The W3C work has been done with input from OpenGraph and schema.org among others to resolve the kind of issue raise by this question.
In short, make sure your OG tags conform to RDFa and you are golden.
More than a Year has passed and the best solution we've got is to wrap the meta tags in some sort of server-side verification.
In PHP I did:
<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
<meta property="og:title" content="Title of the page" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:type" content="website" />
<meta property="fb:admins" content="123456789" />
<meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php } ?>
It really works for Facebook. But I really don't like this idea!
One recent solution is to register a prefix in the html or head tag:
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
or
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
taken from here - sorry, page is in german...
Bad solution for the meta tags. If you wrap those in Javascript then the Facebook Linter won't find them. That's the same as not putting them in at all.
Wrapping like buttons and such in script works to help validate against XHTML 1.0 but not HTML5.
In JSP:
<%
String ua=request.getHeader("user-agent").toLowerCase();
if(ua.matches(".*facebookexternalhit.*")){
}
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
}
%>
Or:
<c:set var="ua" value="${header['User-Agent']}" scope="page"/>
<c:if test="${ua.matches('.*facebookexternalhit.*')}">
<meta property="og:image" content="images/facebook.jpg" />
...
</c:if>
Well, Visual Studio 2011 tells me that the "property" attribute is invalid. However, the W3C seems to be a little more lenient:
http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F
You'll notice that that I added Open Graph tags per Facebook's recommendation to that site, and it does not break the W3C validator, which I consider to be authoritative.
Consulting the official W3C HTML5 specification for the meta tag, it is clear that the use of the "property" attribute (in lieu of the "name", "http-equiv", "charset", or "itemprop" attributes) is not valid. However, their validator validates it (???). I have no explanation for this discrepancy.
I would be inclined to say don't worry about validation, I don't believe having invalid mark up will hurt your search engine ranking. e.g. googles technical recommendations do not mention standards. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 allows you provide more information to search engines which they can then use, but I can't see them down ranking based on not validating.
However if you feel it helps you to validate you can use
<script>document.write('<meta property="og:type" content="website" />')</script>
to have these tags present and have a html file that will pass validators.
Although it will cut off non-Javascript users, I've used this
<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="" send="false" layout="button_count" width="100" show_faces="true" font=""></fb:like>')
//]]>
</script>
and it validated perfectly. It shows and works fine with Firefox, Opera, IE, Chrome, Safari on Windows, and with Firefox, Opera, Safari on Mac.
can we use the meta name="fb:admins"
instead of
meta property="fb:admins"
for w3c validation ??
I'm answering this even though this is an old question since I think it's of value for whoever wants info on this in the future. Evan's probably right when he says it won't pass validation, but I think the answer is that you want to keep the property="" attribute. Taking from an old Facebook developer forum post concerning this question exactly it turns out your document should be an XHTML + RDFa document. This will validate in W3C, thanks to the DOCTYPE declaration:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
version="XHTML+RDFa 1.0"
xmlns:og="http://ogp.me/ns#"
xml:lang="en">
<head>
<title>Virtual Library</title>
<meta property="og:title" content="My Website"/>
</head>
<body>
<p>Moved to example.org.</p>
</body>
</html>
You can find out more in in the W3C spec for RDFa, and in this specific example of <meta property=""/>.
No, you'll just get this:
Line 1, Column 123: Bad value fb:app_id for attribute name on element meta: Keyword fb:app_id is not registered.
…="fb:app_id" content="176557225718913"><meta charset="utf-8"><meta name="descr…
Syntax of metadata name:
A metadata name listed in the HTML specification or listed in the WHATWG wiki. You can register metadata names on the WHATWG wiki yourself.