I am trying to make a Facebook share button on my site. Everything goes well except Facebook garbles non-ascii symbols obtained from meta tags. For example:
I am sharing a page with URL http://example.com/facebook/.
The page at http://example.com/facebook/ has the following meta tags inside its HTML:
<head>
...
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
...
<meta name="title" content="John Smith won £10000!" />
<meta name="description" content="Wanna be next John Smith?" />
<link rel="image_src" href="http://example.com/img/logo.jpg" />
...
</head>
The problem is that a pound (£) sign is shown as � symbol in Facebook share pop-in, that's not a desired behaviour.
I would be grateful for any thoughts.
I would recommend replacing the pound-sign with the equivalent entity, i.e. £ = £. You may also need to add a charset definition, e.g. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> In fact, you might be able to get away with just the meta tag -- just put it before the others.
Related
I have been trying to implement open graph protocols on my pages and keep getting errors through the facebook debugger - at first I was getting
Could Not Follow Redirect Path - Circular redirect path detected
and research suggested this could be fixed by making
<meta property = "og:url" content="http://www.mandyevansartist.com/newsletterone/index.html" />
into
<meta property = "og:url" content="http://www.mandyevansartist.com/newsletterone/index.html/" />
(adding the backslash at the end)
but this has created even more errors and dependent on wether I put the backslash on the end of the address when i plug it into the debugger - will not scrape any information at all - at this point i am getting
'URL returned a bad HTTP response code'
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property = "og:title" content="Noahs Ark|Mandy Evans Artist|Newsletter One" />
<meta property = "og:description" content="Noahs Ark is the limited edition print showcased by unique artist Mandy Evans in this first website newsletter" />
<meta property = "og:image" content="http://www.mandyevansartist.com/newsletterone/images/sendinglove1.jpg" />
<meta property = "og:url" content="http://www.mandyevansartist.com/newsletterone/index.html/" />
<meta property = "og:type" content="website"/>
could someone point out what i am missing
It seems that your server is returning with a 301 code. You can see that with the following:
curl http://www.mandyevansartist.com/newsletterone/index.html
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>301
Moved Permanently</title> </head>
<body> <h1>Moved Permanently</h1> <p>The document has moved here.</p> </body></html>
Note that you redirect from ...newsletterone... to ...newsetterone.... But, the og:url provided points to newsletterone again, which will cause the crawler to get in a loop.
This is the part that you need to fix.
Hello Ive been struguling with this for a while.. and just cant get my head around it.
I do have the meta tags required :
<link rel="canonical" href="http://www.profsonstage.com" />
<meta property="fb:app_id" content="366418850196673">
<meta property="og:title" content="ProfsOnStage"/>
<meta property="og:site_name" content="ProfsOnStage" />
<meta property="og:description" content="Welocme to ProfsOnStage Web Site" />
<meta property="og:url" content="http://www.profsonstage.com" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://www.profsonstage.com" />
But when I try to use the share button facebook scraper doesnt fetch any data but the link.
When I check what the scraper sees 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">
<script>function set_cookie(){var now = new Date();var time = now.getTime();time += 19360000 * 1000;now.setTime(time);document.cookie='beget=begetok'+'; expires='+now.toGMTString()+'; path=/';}set_cookie();location.reload();;</script>
</head>
<body></body>
</html>
I hope anyone can point me into the right direction to fix this. Checked a lot of similar questions but I was unable to find an answer regarding this issue.
Also I get this in my console log
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
And My APP urls are :
www.profsonstage.com/
profsonstage.com/
I just don`t understand what is the problem here.
Seems like its a hosting issue. If anyone get a problem like that contact your hosting provider.
I'm getting a Facebook Open Graph debugger warning when I put two admins in the fb:admins meta value. With a single admin, it passes fine, but with two I get a warning. Everything works fine, but my OCD wants to get it right. Any help?
Here's my code:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="122146944552301"/>
<meta property="fb:admins" content="15901643,15932442"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="http://uamedia.missouri.edu/mizmag/facebook-test.html" />
<meta property="og:site_name" content="UA Media" />
<meta property="og:title" content="Facebook Test" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Facebook Test</title>
</head>
And I get this error:
Parser Mismatched Metadata The parser's result for this metadata did not match the input metadata. Likely, this was caused by the data
being ordered in an unexpected way, multiple values being given for a
property only expecting a single value, or property values for a given
property being mismatched. Here are the input properties that were not
seen in the parsed result: 'fb:admins'
Any ideas?
you have to use the array format [http://ogp.me/#array]
In your example:
instead of
<meta property="fb:admins" content="15901643,15932442"/>
you have to use
<meta property="fb:admins" content="15901643"/>
<meta property="fb:admins" content="15932442"/>
I've updated Facebook's documentation to include the right directions for more than one admin. Sorry for the confusion.
in my oppinion, only the last meta tag will count for the code that uses the property value.
although meta should go in the head, you can use them anywhere and anytime on the page. just keep in mind the parser goes through the code and compiles all the lines in order.
you can even use the [IF] to select the code to be parsed according to certain global conditions.
The facebook like plugin (used as iframe) still not working for the website i work.
I'm aware for the problems that ocurred last week but I don't even have the debugger working for the URLs.
Example:
simple article
In the image below you can see where the fb:like button should appear.
The same URL of the article above at the facebook URL debugger (link) show no response about the open graph tags - and all the meta tags are ok in my point of view:
<meta property="og:url" content="http://extra.globo.com/famosos/zilu-assume-pela-primeira-vez-que-esta-separada-de-zeze-di-camargo-vida-continua-5767649.html"/>
<meta property="og:title" content="Zilu assume pela primeira vez que está separada de Zezé Di Camargo: ‘A vida continua’" />
<meta property="og:locale" content="pt_BR">
<meta property="og:type" content="article" />
<meta property="og:image" content="http://extra.globo.com/incoming/5767648-1c6-157/w107h60-PROP/zilu-zeze-dicamargo.jpg"/>
<meta property="og:site_name" content="Extra Online" />
<meta property="fb:app_id" content="205680889447721"/>
<meta property="fb:admins" content="100000043813964" />
Actually, there is one non-closed meta tag og_type but it isn't the real problem (meta at w3schools - section Differences Between HTML and XHTML and the page doctype is HTML).
There is a possibility of a problem not in the website but at facebook?
I would try to put the Like button iFrame outside of the <div
id="fb-root">, it does not belong there. Put it below the <div
id="fb-root"> and use a div with another id if you need to wrap it.
For the debug tool problem I would try to place my og meta data above
anything else right behind <meta http-equiv="content-type"
content="text/html; charset=utf-8"> so that nothing odd happens
before the Facebook bot scrapes the info it needs.
I know this is a pretty common problem but any of the solutions I have tried (thats a lot) haven't worked.
I am trying to scrape http://residencyradio.com/ using https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fresidencyradio.com%2F
The site itself is getting a complete overhaul, this will be revealed next week and I want the relevant images, title and info to appear if someone links to the site, but instead at the moment these properties are being shown as they were the very first time the site was cached on FB (nearly a year ago).
As far as I can see, I have included all the relevant meta tags etc how they should be, I even tried implementing a like button on the site, but to no avail. I have followed what has been set out on: http://ogp.me/ and can't see anything wrong.
Here is a sippet of the page from !DOCTYPE to </head>:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset=utf-8>
<title>The Residency</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<!--Meta Data-->
<meta name="keywords" content="The Residency, M. Budden, Neal McClelland, Michael Budden, Radio, Residency Radio,
Residency, Global, House, Electro, Progressive, Tech, Techno, DnB, Drum and Base, Dubstep, iTunes, Belfast,
Northern Ireland, UK" />
<meta name="description" content="Brought to you by Neal McClelland and M. Budden, The Residency is a weekly global underground dance show" />
<meta property="og:title" content="The Residency A global underground dance show" />
<meta property="og:type" content="musician" />
<meta property="og:url" content="https://www.facebook.com/theresidency" />
<meta property="og:image" content="https://www.residencyradio.com/images/Residency_logo_circle.png" />
<meta property="og:site_name" content="The Residency" />
<meta property="fb:admins" content="1324839758" />
Any help would be greatly appreciated, as I've been scratching my head for a few days trying to figure it out!
Thanks in advance!
This is a guess, but your html is not valid and maybe because of that the facebook scraper fail to parse and extract the data from it.
I haven't went through all of it, but you don't seem to close all tags.
For example the description and keywords meta tags don't end with "/>" or ">".
Edit
Screen capture of what the debugger shows when I load your html from my server: