I just gone through implementing the FB Like button on a site, and on some product pages it works as expected (like count increments, posts on wall), on some the count increments and is immediately reset to nothing but still shows up on wall.
Grabbed the based code for the button from FB just yesterday and here's what I got:
<!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:fb="http://ogp.me/ns/fb#" >
... meta tags: ( not allowed to disclose/post any client identifying info though:-( )
<meta property="fb:admins" content="000000"/>
<meta property="og:site_name" content="Some Client In QA" />
<meta property="og:title" content="Some Client In QA product title" />
<meta property="og:type" content="product" />
<meta property="og:image" content="http://client.in.qa/product/pix/somepix.jpg">
<meta property="og:url" content="http://client.in.qa/product/product1234" />
<meta property="og:description" content="product description" />
... right after the opening tag:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
... the button itself:
<fb:like href="http://client.in.qa/product/product1234" send="false" layout="button_count" width="90" show_faces="false"></fb:like>
The strange stuff:
When I started out on it I was using the admins ID provided by the client and when running the url through fb linter, the only error it gave is
Object at URL 'http://client.in.qa/product/product1234' of type 'product' is invalid because the given value '000000' for property 'fb:admins' could not be parsed as type 'fbid'. but when I looked at the response in Firebug after clicking 'like', the error mentioned invalid app_id.
At that point I'd click the button, the count would increment and immediately revert, but it would show up on my wall.
So I set up a test app on FB and entered the client.in.qa as App Domain and http://client.in.qa as Website and used my own app id on fb:admins meta-tag.
Then the 'like' count would increment and hold. I thought all's well. But..., turns out it does not work on all products. And the same error shows up on linter, even for the product pages where the buttons seems to work as expected.
Clicking the URLs Graph API reveals:
{
"error": {
"message": "An unknown error has occurred.",
"type": "OAuthException",
"code": 1
}
}
Thanks in advance.
UPDATE:
It seems that until FB crawls the site the only way to get consistent behavior is run the url to be liked through the linter. Then the little preview shows up when I try to 'Like' it and the count 'sticks'
Related
I am trying to implement the Like button on my pages.
Those pages represent the review page for a product. When a user Likes the page, it shows up in Facebook (not as a link, but as liking an entity), however when you click on the entity in Facebook it links through to a facebook.com hosted page representing the page. I want the user to be redirected to the og:url page?
This happens for example when you Like an artist page on Grroveshar: http://grooveshark.com/#!/artist/Elbow/4795
I am clearly "doing it wrong".
I am using the following markup to include the SDK. MYAPPID is included by the code generator Facebook provides so I assume it is required.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MYAPPID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then my code to render the Like button.
<div class="fb-like" data-send="false" data-width="450" data-show-faces="true"></div>
And finally my og tags:
<meta property="og:title" content="My product" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://site.com/product_1/" />
<meta property="og:image" content="http://site.com/image1.jpg" />
<meta property="og:site_name" content="My-Site-Name.com" />
<meta property="fb:admins" content="MYFACEBOOKID" />
<meta property="fb:app_id" content="MYAPPID" />
Thanks!
It sounds like you're confusing the Admin Page for that URL with the URL itself, but i could be wrong because the admin page has a message at the top explaining this which looks like this:
Only the admins will see the on-Facebook admin page, and other users will be brought back to the og:url value defined on the URL which was liked. If you're not specifying a data-href parameter in the HTML5 Like plugin, this will be the current page or whatever the og:url value is on the current page's meta tags
Check what Facebook's Debug Tool says for the URL you're trying to like and make sure the tags are being read correctly
The problem with the grooveshark example is the fact they are using #! urls. If you wereto like http://grooveshark.com/artist/Elbow/4795 instead it would work correctly. If you are using such URL patterns than you will run into problems, and you would need to override the like button to hit the url without it.
I got my code to validate with debugger but none of my properties are showing up on the new feed like I want them to. Instead it seems to show a Facebook default text:
Cosmetology & Spa Institute | Facebook www.facebook.com Facebook is a
social utility that connects people with friends and others who work,
study and live around them. People use Facebook to keep up with
friends, upload an unlimited number of photos, post links and videos,
and learn more about the people they meet.
How can I get it to display my og properties?
All code on my site is below.
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<script src="//connect.facebook.net/en_US/all.js#xfbml=1" id="facebook-jssdk"></script>
<meta property="og:title" content="Cosmetology Schools and Beauty Salons" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.cosmetologyandspainstitute.com/facebook-tabs/CSI_Logo_2012-square.jpg" />
<meta property="og:url" content="http://www.cosmetologyandspainstitute.com/" />
<meta property="og:site_name" content="Cosmetology and Spa Institute" />
<meta property="fb:admins" content="1540268369" />
<meta property="og:description" content="The Cosmetology and Spa Institute has 2 of the best cosmetology and esthetician schools in Chicago. Our Illinois beauty schools, cosmetology and esthetics programs, provide results that truly matter." />
</head>
<body>
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style="margin-left:25px" class="fb-like" data-href="http://www.facebook.com/CosmetologySpaInstitute" data-send="false" data-layout="button_count" data-show-faces="false"></div>
</body>
Just tested it – can’t find any problems, your description and image show up as in the meta elements.
It's because the data-href on your like button is pointed at a page on Facebook (http://www.facebook.com/CosmetologySpaInstitute) not the page the like button is on, so the opengraph tags never even get read. Instead Facebook scrapes what it can from the page on Facebook.
In effect, clicking like doesn't like your webpage, but your Facebook Page.
I'm pretty sure the meta tags and Send button code are fine. I'll show that code below anyways but I'm pretty sure the code is correct.
Here's what I think my problem stems from:
1) I have a FB 'Send' button on a page in my site called landing_page.php
2) I therefore specify
<meta property="og:url" content="http://www.oursite.com/landing_page.php"/>
for the 'url' meta tag for the page.
3) When I go to https://developers.facebook.com/tools/debug -- and then type in
my page URL of http://www.oursite.com/landing_page.php --- I get an error msg.:
Error Parsing URL: Error parsing input URL, no data was scraped.
So my question is -- must I put the Send button ONLY on the index.php page?
I thought I could put the Send button on ANY page as long as I put the meta tags
and Send button code on that page. But the Facebook debugger complains
Error Parsing URL: Error parsing input URL, no data was scraped.
if I put the Send button and associated code on 'anypage.php' and try to use it --
the Send box that appears picks up NONE of my OG meta tags (see below) and the
Facebook debugger cannot 'scrape' an arbitrary page in my site.
Must I put the Send button ONLY on the index.php page?
Or what do I need to change so the Send button on landing_page.php works and shows my OG meta tag settings??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<meta property="og:url" content="http://www.oursite.com/landing_page.php"/>
<meta property="og:title" content="Wow cool title!"/>
<meta property="og:image" content="http://www.oursite.com/images/logo.png"/>
<meta property="og:description" content="Hey -- SUPER-COOL!!"/>
etc.
</head>
<body>
<div id="fb-root"></div>
<script>
(function(d, s, id)
{
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send" data-href="http://www.oursite.com"></div>
You need to add appid as well to scrap your page
<meta property="fb:app_id" content="${fb_app_id}"/>
Asuming that u have added this tag in the landing_page.php
You can use this send button any where in the website
you need to put the meta tags in http://www.oursite.com/landing_page.php also because the fb not found any meta tags on the mentioned url
Also check the Fetched URL in the debugger tool. That will show what exactly they found from your url
I have problems with counter of facebook like button. I've tried to use iframe and XFBML, the results were the same.
When I click the button, the counter appears with the right value "1", on facebook account page appears the right like post (with image, descriptoin etc.). But if I refresh the page, where the button is, the counter on it is disappered and its value became "0" again. For example: http://biletoid.ru/event/?event_id=25
How can I solve that problem?
Meta:
<meta property="og:image" content="http://storage.biletoid.ru/0000/0000/0000/0325/47.jpg" />
<meta property="og:description" content="Лучшая рок-группа последних 30 лет приезжает в Сербию. Стоимость перелета от 6969 руб. Дата проведения: 08.05.2012." />
<meta property="og:title" content="Metallica в Белграде" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:url" content="http://biletoid.ru/event/?event_id=25" />
<meta property="og:site_name" content="Biletoid"/>
Script:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Html:
<fb:like href="<?php echo 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];?>" send="false" layout="button_count" width="95" height="19" show_faces="true" action="like"></fb:like>
1.
I went to
http://developers.facebook.com/docs/reference/plugins/like/
I entered your page http://biletoid.ru/event/?event_id=25 as the like url.
I clicked the like url generated. A red error text is shown. Click on the red error text.
Then, a pop-up showed the error:
The page failed to provide a valid list of administrators. It needs to specify the administrators using either a "fb:app_id" meta tag, or using a "fb:admins" meta tag to specify a comma-delimited list of Facebook users.
So you should add one of these:
<meta property="fb:app_id" content="<YOUR FACEBOOK APP ID>"/>
OR
<meta property="fb:admins" content="<ADMIN's FACEBOOK USER ID>"/>
Before your currently existing open graph tags.
<YOUR FACEBOOK APP ID> is a numeric id. For example,
http://www.facebook.com/profile.php?id=4
is mark zuckerburg, so 4 is mark's facebook user id. So you need to find your facebook user id. To find your own facebook user id - log into facebook with your account and find the profile link on the top right corner. The id= is your facebook user id.
<ADMIN's FACEBOOK USER ID> is also a numeric id. A Facebook App can be added at
https://developers.facebook.com/apps
and at there you obtain the Facebook App ID for your facebook application can be added at your facebook application configuration page.
2.
So you need to have something like,
<meta property="fb:app_id" content="<your facebook application id>" id="fbapp_id"/>
OR
<meta property="fb:admins" content="<ADMIN's FACEBOOK USER ID>"/>
PLUS
<meta property="og:type" content="<video>" id="ogtype"/>
<meta property="og:title" content="<title>" id="ogtitle"/>
<meta property="og:image" content="<image>" id="ogimage1"/>
<meta property="og:description" content="<like description>" id="ogdescription"/>
<meta property="og:determiner" content="a" id="ogdeterminer"/>
<meta property="og:url" content="<your like page url>" id="ogurl"/>
3.
To find out whether your facebook open graph tags are done correctly, put your url into:
http://developers.facebook.com/tools/debug
i have this facebook page: LINK
And i want to implement multiple facebook like button on product page on site: LINK
When i click on "Like" Buttom, this aways shows "1" and when refresh the page, this count disapear.
for my product page i use:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and for buttons:
<div class="fb-like" data-href="http://www.calcadosabruzzo.com.br/2012/catalogo/1402.html" data-send="false" data-layout="button_count" data-width="85" data-show-faces="false" data-font="segoe ui"></div>
for each phantom pages for the products i use these meta tags:
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/">
<head>
<title>Calçados Abruzzo - Ref.: 1402</title>
<meta property="og:title" content="Calçados Abruzzo - Ref.: 1402" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://www.calcadosabruzzo.com.br/" />
<meta property="og:image" content="http://www.calcadosabruzzo.com.br/2012/produtos/1402_5122_Marrom_montila.jpg" />
<meta property="og:site_name" content="Calçados Abruzzo" />
<meta property="fb:app_id" content="100002115061810" />
<meta http-equiv="refresh" content="0;url=http://www.calcadosabruzzo.com.br/2012/catalogo.html">
</head><body></body></html>
i dont know where to get the APP_IP becouse the client make his page on facebook and dont make an APP
when i put the product page on Facebook Debug, show me these errors: LINK
How to solve this? Its the first time i use this Plugin...
I managed to find few reports on this behaviour. I seems Facebook introduced a bug because even their reference where you can create like button gives errors. What people suggested is to make an app through developers.facebook.com/apps
Get the app_id from there and in the app settings under App Domain add your website (calcadosabruzzo.com.br).
For fb:admins you should add the app admin id (probably yours).
Hope this helps.