I have used the following code to implement the like - button:
Header
<!-- Facebook Metatags -->
<meta property="og:image" content="http://mysite/logo.gif"/>
<meta property="og:locality" content="mycity"/>
<meta property="og:country-name" content="Germany"/>
<meta property="og:latitude" content="52.xxxxxxx"/>
<meta property="og:longitude" content="9.xxxxxxx"/>
<meta property="og:type" content="product"/>
<meta property="og:site_name" content="mypage.com"/>
<meta property="og:url" content="http://mypage.de/myproduct/myproductkey"/>
<meta property="og:title" content="Myproduct Description"/>
Body on mypage.de/myproduct/myproductkey
<div id="facebook-likebox">
<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>
<fb:like href="http://mypage.de/myproduct/myproductkey" width="450" height="90" show_faces="false"></fb:like>
</div>
The result is inconsistent: Most of the time it works, but sometimes I get this error:
You failed to provide a valid list of
administators. You need to supply the
administors using either a
\"fb:app_id\" meta tag, or using a
\"fb:admins\" meta tag to specify a
comma-delimited list of Facebook
users.
This error makes no sense because when I call the page later or somebody else calls the page it works again. Any idea what is wrong here.
EDIT
I updated the site with these meta tags
<meta property="fb:admins" content="xxx"/>
<meta property="fb:app_id" content="xxx"/>
I rechecked the ids on https://graph.facebook.com/xxx
But I still get get errors sometimes. The new error is:
The app ID "xxx" specified
within the "fb:app_id" meta tag was
invalid.
But most of the time everyrthing works. Does anybody have any idea on how to solve this issue?
EDIT 1
Our site uses a load balancer and has a lot of external scripts (E-Tracker and other tracking solutions)
EDIT 2
We used LINT https://developers.facebook.com/tools/lint/ to check the page
It gives sometime an error (invalid app_id )and sometimes returns as valid. But the app-id from the meta-tags is allways parsed correctly and it is the valid app-id.
The Facebook Like Plugin requires six attributes when using the open graph meta tags:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
So just add your facebook ID:
<meta property="fb:admins" content="your_FB_ID"/>
I spent a good couple of hours on this blasted Like button, but it is finally working for me! I had added the admin_id and app_id properties and it still flagged the same error.
Here is a check list to make sure you have what you need.
1) Your Doc type is probably wrong. I can't remember where I got this information, but use this instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
2) You need to import the XML namespaces. Change your HTML tag to something like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
I used the HTML5 script on my website. So here's a copy-pasta for your reference.
<?php $current_url = "http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]; ?>
<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_GB/all.js#xfbml=1&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="<?php echo $current_url; ?>" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false"></div>
Also, it takes a couple of minutes to propagate. I waited 15 minutes and suddenly... it worked.
It turns out that the reason for the inconsistent behaviour was the loadbalancer. We deactivated loadbalancing and LINT always showed consistent results.
I have no idea what the Load balancing changed. The meta-tags are similar.
I used the admins- metatag. I did not have to use the app-id tag. Thats how it is written in the specification.
I found the solution!
the problem is in the URL address,
it has to be:
<meta property="og:url" content="http://www.yoursite.com/index.php" />
I used this and it works
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'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'm developing a site implementing "facebook comments". One particular feature of the site is that I plan to have many pages implementing "facebook comments", which are generated automatically through server-side programming.
In theory this should be no problem... I included the following javascript code that was generated for me:
(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=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
The Html tag I included is the following:
<div class="fb-comments" data-href="www.myurl.com/user/{{user.id}}" data-num-posts="20" data-width="500"></div>
Regarding the above, you'll note that I'm using python-django, so there is a server-side variable within the double curly brackets. This allows me to have the same functionality on many automatically generated pages.
Everthing seems to be working perfectly. Every individual page has its own respective implementation of facebook comments.... EXCEPT, I'm getting this annoying warning message "Warning: (MY URL) is unreachable." Obviously it IS being reached because it's working properly! So, why is it showing the warning message, and how do I get rid of it?
I tried adding the whole slew of meta properties, but no effect:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml" version="XHTML+RDFa 1.1">
<head>
<meta property="fb:admins" content="<MY_FB_ID>" />
<meta property="og:site_name" content="bowlofgoals" />
<meta property="fb:app_id" content="<MY_APP_ID>" />
<meta property="og:title" content="Bowl of Goals"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="<URL>"/>
<meta property="fb:moderator" content="<MY_FB_ID>" />
Also, please note that I have also implemented facebook connect in the root folder of the site. So, my "Site URL" in my app setting is the root folder, not the sub-pages where the facebook comments is implemented.
All the functionality is working perfectly.... so what should I do to get rid of that annoying warning message?
Thank you very much for any guidance you can offer on this.
Mark
Consider checking your page for javascript errors. I had the exact same problem as you did and no matter what tags I added, no matter what I did, the plugin wouldn't work.
After taking a closer look in Firebug I noticed I had one javascript error caused by some slider script in my template. Removed that script and everything works like a charm now.
I assume that error was breaking all my javascript including Facebook's and that's why the plugin didn't work.
I got rid of that error by changing the data-href to the value that I set in Website with Facebook Login Site URL. So I have http://domain.org/contest/ in my Site url and my data-href to http://domain.org/contest
But I do have the same issue as you where my comments plugin is in a bunch of pages where the url is dynamic so something like http://domain.org/contest/id/13131 or http://domain.org/contest/id/4848 but I cant put either one of those urls in my data-href. I have to put http://domain.org/contest instead in order to get rid of that error.
I'm implementing Facebook's "Like" option in one of my websites as a voting tool. Users will be able to vote on a specific team by Liking the team's individual page. I have a number of teams and for some reason when I "Like" some of the teams, refresh my browser, my Like count refreshes as if I never "Liked" the page at all. However, on some of the other teams pages, when I "Like" and refresh, the count is accurate and keeps track.
I can't seem to find what is differentiating between the team pages that work and don't work. Code is identical but some keep the Like count and some don't. I was hoping someone may have experienced this before?
Below is the HTML5 Like option I used:
<div class="votePanel">
<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#appId=262057453824946&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false" data-font="arial"></div>
</div>
Below are my Open Graph tags:
<meta property="og:title" content="My Page Title" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="<% response.write("http://" & Request.ServerVariables("SERVER_NAME") & Request.ServerVariables("URL")) %>" />
<meta property="og:image" content="PATHTOMYIMAGE" />
<meta property="og:site_name" content="Site Title" />
<meta property="og:admins" content="MYADMINID" />
<meta property="og:description" content="DESCRIPTIONHERE" />
Ah, I've got it working with a few resources.
First, I used Facebook's Debugger to check my open graph tags and make sure they were valid. I noticed that my Like button required an admin ID. Also, on the Debugger page you can actually demo your Like button and it will display an error message if necessary.
I received the message:
"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."
What I noticed was that I had my fb:admins tag mixed up with og:admins. I switched the letters up and all was fixed!
However, I'm still not sure why a few of my pages allowed the Like button to work prior to the fix.
I've noticed this happen on my sites before too. There's usually a missing or incorrect open graph tag that's required. It's really strange how it works anyway on some pages but not others. I highly recommend using the debugger tool too. It points out what is wrong.
I am trying to create a share button for links using the Facebook share button:
http://www.facebook.com/facebook-widgets/share.php
http://wiki.developers.facebook.com/index.php/Facebook_Share
However when I try to use the t value in my URL's they don't work.
I even tried using the example on the API page:
http://www.facebook.com/sharer.php?u=http%3A%2F%2Fdevelopers.facebook.com%2F&t=Facebook%20Developers
And it doesn't work... It sets the title as developers.facebook.com not Facebook Developers as specified by the URL
Anyone know how I can make this work correctly?
I want my share links to come up as... 'Title Of what I am sharing' and then... the url directly to that item.
The Facebook share link dynamically fetches the title and images from the page/website to share. The title specified in the link is only used while Facebook loads the page details. Check this link out:
http://www.facebook.com/sharer.php?u=http://www.rackspace.com&t=SOME%20TITLE
My solution to the title parameter is:
as url, add to the page url a variable (lik real_title):
http://www.facebook.com/sharer.php?u=http://mydomain.net/mypage?real_title=MyTitle
Then, in the index.php page:
< title>
<?php if (isset ($_GET['real_title']))
print ($_GET['real_title']);
else
print ("Default page title"); ?>
< /title>
Facebook crawls the given URL in search of Open Graph meta tags. It gives precedence to the contents of those tags, if they're present. Here's a sample of what the Open Graph tags look 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>
More info at http://developers.facebook.com/docs/opengraph/
Try Facebook Feed dialog http://developers.facebook.com/docs/reference/dialogs/feed/
Use direct URL example
I also met this problem, but i have found the problem because i didn't put facebook code in that file http://bannedadsense.com/banned-adsense-list/isbanned, i was very stupid with it and lost time to fix, but now i'm lucky, i have just fixed done now, simple only copy fb code to all pages you want to use fb share like button.
<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/sdk.js#xfbml=1&version=v2.8&appId=put_number_id_here";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>