after several hours of researching I really need your help.
I simply want to define the preview picture, when I post the website-url on facebook. I already added these meta properties to my website:
<meta property="og:image" content="image.png" />
<meta property="og:title" content="My Website" />
This is my Doctype Specification:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
However, the attribute "property" does not exist. Yes, this is not new to xhtml. So I looked in older threads and extended the Doctype with RDFa, so now it looks like this:
<!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">
But this still doesn't work!
When I use the Open Graph Object Debugger from Facebook, it says:
"Based on the raw tags, we constructed the following Open Graph properties", and it shows many random images which are included in my website, but none of them are usable as preview picture.
I am really desperate and would greatly appreciate your help!
Edit: Can anybody help please :P
Related
When Facebook debugger scrapes http://www.daisyworld.co.za it says 'Can't Download: Could not retrieve data from URL.' When I click 'See exactly what our scraper sees for your URL', this is what I get:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body><p>ÿþ</p></body>
</html>
But what is actually there is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="content-language" CONTENT="En">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
None of the other pages in the domain where I implemented a like button have any problems, it works just fine & I basically used the same pieces of fb code, for all of them with just the different particulars for each page. I cannot figure out what the problem is except that it seems that the debugger is looking at a cached file but surely that isn't supposed to happen?
Maria-Helena
I just hit this issue as well and discovered that facebook's scraper was appearing as a inbound JSON request. Since that particular route was set up to handle both JSON and HTML responses, FB was getting a big gnarly JSON blob instead of the actual web page. Not sure if this solves your exact problem, but hopefully sparks some fresh ideas!
Try saving the file with a different encoding - going from unicode to UTF-8 did it for me.
This is my first time posting a question on this site, but certainly not the first time finding answers in it.
I have used stackoverflow as a resource to fix several issues I've faced with my new blog, that is until last night, when I found this issue which I just can't fix.
When I try to share the home page of my blog, I don't get the proper image specified in the og:image tag... once I check my site via de FB debugger, it shows me this:
https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com
Curiously enough, I do not find any issues when I check for a page, or a post:
https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com%2Fvideos%2F
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fivanfuentes.com%2Fthe-popularity-contest%2F
So, I know it's an issue that is generated in the home page only, but during the last 18 hours, have been unable to find it.
I have OG meta tags specified dinamically via a wordpress plugin... currently, it's "Facebook AWD", but I've had several other Facebook sharing, all-in-one's, and OG plugins, which give me the same results in the debugger, which makes me think I messed up somewhere else. I have no embarrassment in admitting I'm quite a newbie, so it's highly likely I messed up while trying to modify some code... probably when I added a few lines to make the site IE compliant?
Hope I gave enough information, and someone gets to help me, as this is not only about the proper image being displayed on a Facebook link, but rather about me likely having a mess in my code, and that could (WILL) mean trouble once I make any mods/updates to my site in the future.
Thanks for the time!
Your html is a complete mess and that's why the debugger is complaining.
Visiting your page and looking at the code I can see this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<div id="fb-root"></div>
<script>
...
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div id="fb-root"></div>
<script>
...
</script>
<title>Ivan Fuentes Hagar</title>
Two problems there:
The sdk code is inserted twice
In both cases there's a div placement before the body
In the debugger result for this page when clicking the bottom link (Scraped URL: See exactly what our scraper sees for your URL) you can also see broken html but in another variation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><body>
<div id="fb-root"></div>
<script>
...
</script><meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
...
</script><title>Ivan Fuentes Hagar</title>
There problems here:
The body definition is right after the html
There's no head definition
All of the tags which suppose to live inside the head are inside the body
The sdk script is loaded inserted twice
In both cases I found 3 occurrences of the <div id="fb-root"></div>.
As you can see you have some fixin' up to do with the html output of your wordpress.
I'm not sure why the outputs is different for the debugger, I thought that maybe due to the user agent string, but trying curl --user-agent "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "http://ivanfuentes.com/" returns the exact results as with the browser.
I have seen various articles on this site and on google about how to make facebook code valid, but none of the solutions seem to work for me.
I think the problem lies in my doc type decleration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" >
...
<meta property="og:site_name" content="my site name" />
<meta property="og:title" content="Buy...
Can anyone point me in the right direction please?
John
I'm having a similar problem.
<?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" xmlns:og="http://ogp.me/ns#" xml:lang="nl-NL">
...
<meta property="og:type" content="book" />
That's how almost all examples are like, and strangely it validates on w3c's validator, however all other validators including CSE Html validator and http://check.rdfa.info need a og prefix in front of the meta tag:
<og:meta property="og:type" content="book" />
That validates in almost anything except the official w3c validator. Not sure if facebook will parse it either. Why they chose not to use "name" is a big mystery for me. What a fine mess!
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.
I've recently started working on a facebook app and I am lost and confused trying to get any direct answer. Googling for answers don't seem to work too well with facebook as things are changing too fast and blogs rarely update it to reflect the new APIs.
I know Facebook will deprecate FBML and I am overjoyed by that.
So my question is, will the DOCTYPE facebook gave you to put on your site, being deprecated?
What does doing this even do?
Assuming you are talking about this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
(specifically the xmlns:fb="http://www.facebook.com/2008/fbml"). They are not deprecating that. You should continue to add xmlns:fb="http://www.facebook.com/2008/fbml" in your <html> tag. However, for modernity you should be using the HTML5 doctype, so your doctype and HTML tag should look like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
What the xmlns:fb part does is specifies the XML namespace for tags within the page which begin with the fb: prefix (such as <fb:name/>).