Having never dealt with Facebook at a developer level, I'm sure that I'm doing something very obviously wrong here. Anyway, here's the problem:
I generate the like button code from https://developers.facebook.com/docs/reference/plugins/like/ and then copy it into my page. When I try to view the site I get nothing displaying.
I noticed that the url in the script section fails to include the protocol (it comes out with: "//connect.facebook.net/en_US/all.js#appId=207642302633270&xfbml=1"). When I have a look what's happening using Firebug I can see that it's inserting the script tag into the head section - but the URL doesn't work. I've tried modifying it to include "https:" as the protocol and I then see that the script gets loaded and that also it inserts a bunch of CSS into the head section.
But still nothing displays on the site.
The only thing I can think of that could be problematic is that I (or, more specifically, my client) doesn't have a Facebook company profile of any sort - I can ask them to set one up if required but this would not be the preferred option as they don't want to maintain a Facebook profile for the business.
Here's a stripped down sample I'm working with:
<html>
<head>
<title>Testing the Like Button</title>
<meta property="og:title" content="Company FB Test" />
<meta property="og:type" content="company" />
<meta property="og:url" content="http://www.domain.com/fb-test.html" />
<meta property="og:image" content="http://www.domain.com/logo.png" />
<meta property="og:site_name" content="Site Name" />
<meta property="fb:admins" content="__MY_FB_ID__" />
</head>
<body>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "https://connect.facebook.net/en_US/all.js#appId=207642302633270&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="67" data-show-faces="false" data-font="arial"></div>
</body>
</html>
A couple of notes:
The sample includes the protocol "https:" - as mentioned, I've tried without as well.
This has been tested in the latest versions of Chrome 13, Firefox 6 and IE 9
I've tested this in Facebook Lint and it gives me no errors.
Thanks in advance to whoever succeeds in pointing out the obvious to me - and to anyone else who chimes in with any friendly advice.
Cheers,
Zac
You need to make sure to add this code somewhere in your page:
<div id="fb-root"></div>
You will see in the chrome debugger tool that there is an error saying it can't find that div.
Related
I am trying to use the Facebook Like Button at its maximum. I am a webmaster in charge of many websites. I read a lot of answers and question, but I still reach the problem. When somebody use the like button on my Website, and let a comment, it will not publish to its profile.
First I tried to use the simple way:
(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/fr_FR/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.example.com" data-width="100" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
I have the common message in debug "Invalid App Id: Must be a number or numeric string representing the application id.", because I did not use an app_id.
I setup the OpenGraph meta and crawl them with Facebook debug, OK, no error. I use the Domain insight on this domain to get a fb:admins.
<meta property="og:site_name" content="IT IS IT" />
<meta property="og:title" content="Name of page" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="blablab" />
<meta property="fb:admins" content="10000000xxxxxx" />
<meta property="og:image" content="http://www.example.com/og-image-fb.jpg?v=14170000000" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="945" />
<meta property="og:locale" content="fr_FR" />
And using also in HTML declaration:
prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml"
In a very few websites, I get the feed published on the wall. But on all the others, I get nothing.
After that, I tried to make a WWW Facebook App per website, using "Information" for the type of the app (Using the App_id in OpenGraph meta + the load of the FB SDK, in addition of my fb:admins). It was working well, except I need to create 1 App for 1 site, because on every feed, it will sho MrX like a link on "Name of my App", linked to the url of the website, so I can not use a general app for all my websites.
But after 5 App, Facebook hang my account.... So I am opening a new FB personnal account at my name (I don't want to use FB for anything else then this work), so I am able to provide an ID if they block my account again.
My first question: Is creating 1 app for 1 website is a normal and legal way for Facebook ?
My second question: No way to publish on wall without app_id ? It works on 2 website I have, without it, so I am a little confused ...
Thanks !
Usually, Facebook blocks an account for a very good reason. So you must have done something wrong, usually you do get a reason why they blocked it. Take a look if you can appeal and if there is more information in here: https://developers.facebook.com/appeal
In general, 1 app for 1 Website/Domain is normal and you should ALWAYS use an App ID. Facebook decides about publishing it into the stream of user friends, you can´t really "force" this. It depends on many factors (popularity of the website, spam reports, ...). It will most likely get posted if the user adds a comment though - but of course you can´t force that.
TL;DR, the direct answers to your questions:
Yes.
You should ALWAYS use an App. It may work without one, but it´s not recommended.
Are there any best practices for offering like buttons within canvas applications? We've got an app which has lots of content, when I specify the OG:URL of some piece of content as a page within apps.facebook.com/myapp, the "like" share shows up as pointing at apps.facebook.com. Is this the best way to do this, or how are other people handling this? Thanks!
The OG tags for my content look roughly something like this:
<meta property="og:title" content="some cool title" />
<meta property="og:image" content="some cool image"/>
<meta property="og:site_name" content="my site name" />
<meta property="fb:admins" content="my id" />
<meta property="og:description" content="Hey neat wow this is content."/>
<meta property="og:url" content="http://apps.facebook.com/myapp/somecontent.aspx">
<meta property="fb:app_id" content="my_appid" />
Short answer: Common practice seems to be that the og:url property points to the content's address on your server (not the Facebook Canvas iFrame wrapper's URL at apps.facebook.com), and in most cases this URL immediately redirects to apps.facebook.com/your-game.
You can see how many of the top games are doing this by just playing the games enough to earn an achievement or fire off an OG action, then viewing your Activity Log for some such story, right-clicking a link to an object (like an achievement), and pasting it into Facebook's Object Debugger. Here are some URLs of objects from some top games:
Words with Friends:
https://wwf-fb.zyngawithfriends.com/opengraph/word.php?word=sheet
SongPop:
https://wam-mobile.appspot.com/facebook/canvas/opengraph/achievement/sweetStreak1/
Candy Crush Saga:
http://candycrush.king.com/FacebookServlet/opengraph/candycrush:level?episode=http%3A%2F%2Fcandycrush.king.com%2FFacebookServ...etc.
For reference, the Facebook Object Debugger is here: http://developers.facebook.com/tools/debug
According to user Igy:
There's no limitation on pointing to the apps.facebook.com url instead
- the request is rewritten to silently be a request to your app's callback URL, plus the same path supplied to the apps.facebook.com URL
- one reason not to do this is that this behaviour leaves some of your app's functionality out of your direct control,
... for example if a bug goes live on FB which causes all such URLs failed to parse correctly (which has happened recently).
Need help understanding how opengraph works and how it relates to the "FB Like" button.
We do have opengraph meta tags deployed on all of the pages for our content. However
it looks like the only way to get "FB Like" button to work, is to run the URL thru the facebook linter.
If a user attempts to "Like" the page, that was never liked before, only the URL will be posted to the wall.
If the url is ran thru the linter, all the consecutive likes will work properly, by image, title and description will be pulled.
is it possible that the app_id is not linking properly with the pages?
having our FB Admin go and like all the content that is produced is not an option
http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782
<meta property="fb:app_id" content="366487756153">
<meta property="fb:admins" content="1594068001">
<meta property="og:site_name" content="NY Daily News">
<meta property="og:title" content="Mark Tipple's Underwater Project - Underwater photos: Amazing shots from under the sea">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782">
<meta property="og:image" content="http://assets.nydailynews.com/polopoly_fs/1.1078770!/img/httpImage/image.jpg_gen/derivatives/searchthumbnail_75/image.jpg">
<meta property="og:description" content="Talented underwater photographer Mark Tipple, from Sydney, Australia, lies in wait for unsuspecting swimmers and surfers before snapping a perfect picture of them from beneath the waves.">
http://www.nydailynews.com/gossip/john-travolta-experienced-bed-passionate-hotel-romp-claims-masseur-luis-gonzalez-article-1.1079272
<meta property="fb:app_id" content="366487756153">
<meta property="fb:admins" content="1594068001">
<meta property="og:site_name" content="NY Daily News">
<meta property="og:title" content="John Travolta was 'a great kisser' and ‘very experienced’ in bed during passionate hotel romp, claims masseur Luis Gonzalez ">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.nydailynews.com/gossip/john-travolta-experienced-bed-passionate-hotel-romp-claims-masseur-luis-gonzalez-article-1.1079272">
<meta property="og:image" content="http://assets.nydailynews.com/polopoly_fs/1.1079279!/img/httpImage/image.jpg_gen/derivatives/searchthumbnail_75/image.jpg">
<meta property="og:description" content="Another hotel masseur is claiming sexual shenanigans on the part of John Travolta -- only this accuser says he welcomed the actor's horny horseplay and found him "very experienced" in bed.">
In order to get your page recognized as a custom open graph object you'll need to follow these steps.
Create a facebook app
Setup site domain, namespace etc...
Create a custom action and a custom object under app settings >> Open Graph: Getting Started (see this link for help)
After creating it, you'll see your object under object types in Open Graph Settings
Click on "Get Code" button to get the html tags
Update your page to show up the same html head & meta tags
Go to http://developers.facebook.com/tools/debug to test if you have setup everything right
P.S. Don't forget to hit correct answer if it works, or PM me for more help
Your URL isn't set to the application as noted in the linter,
Object at URL 'http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782' of type 'article' is invalid because the domain 'www.nydailynews.com' is not allowed for the specified application id '366487756153'. You can verify your configured 'App Domain' at https://developers.facebook.com/apps/366487756153.
Add the proper domain to your settings and it should work.
I am trying to add the Facebook “Like” or “Recommend” button to the bottom of some of the content pages on our website, so that when someone clicks it, it is immediately posted on their FB wall - spreading the word about the page etc.
I found this code to do it:
<div id="fb-root"> </div>
<script src="http://connect.facebook.net/en_US/all.js#appId=174289559298553&xfbml=1"></script>
<p><fb:like send="true" show_faces="true" action="recommend" font="arial" href="http://amathus.staging.screenpages.net/moillardproducerpage" width="450"></fb:like></p>
But when I put it on the page and test it by "liking/ recommending" it, when it feeds through to my facebook the image picked up to represent the page with the link is not good at all.
I then tried putting meta tags in the coding so that it picked up the right image, like this:
<meta property="og:title" content="Domaine Moillard" />
<meta property="og:type" content="drink" />
<meta property="og:url" content="http://amathus.staging.screenpages.net/moillardproducerpage" />
<meta property="og:image" content="http://www.amathusdrinks.com/skin/frontend/default/default/Agro-de-Bazanc.jpg" />
<meta property="og:site_name" content="Amathus Drinks" />
<meta property="fb:admins" content="61406146" />
But again the only images it picked up on were the small payment logo at the bottom (sagepay logo - not ideal!).
Anyone know how I can get it to show a relevant image next to the link when someone likes the page?
Thanks,
Clare
I tried running http://amathus.staging.screenpages.net/moillardproducerpage thru the linter tool (https://developers.facebook.com/tools/debug) and nothing came up. Is this the correct URL?
From the image url you gave above, I see it's from http://www.amathusdrinks.com/, so I ran http://www.amathusdrinks.com/moillardproducerpage thru the linter tool as well. Got some results, but it has some issues to be fixed:
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.
Inferred Property: The og:image property should be explicitly provided, even if a value can be inferred from other tags.
I'd say, fix the og: tags on that page, and you'll be back in business :)
There are lots of questions about how to get a Facebook Like button working, but I would like to know: does anyone know of an example of the Facebook Like button, coded in XFBML and Javascript, where clicking on it makes the comments box show up, in Internet Explorer? Specifically, I'm trying to figure out if this behavior is broken on IE. I know that particular behavior works under Firefox and Safari.
I see examples of the iframe version of the Like button that pops the comments box in IE when you click "Like". But that's the iframe version, not the xfbml / javascript version. Also, (weirdly enough) the iframe version of the Like button doesn't display the comments box if you don't have show_faces turned on.
The Levi's site is sort of the gold standard in Like usage. Check out http://us.levi.com/family/index.jsp?categoryId=4305605&cp=3146842.3146844.3146854 -- the Like button with comments works in Firefox and Safari, but not IE.
There are lots of different moving pieces here to track down -- for example, namespaces, app_ids, xhtml doctype, etc, etc. But before I get that far, I'm just wondering if the javascript / FBML version of the Like button with comments ever works under IE? And if does, is there an example somewhere? I have never seen one.
Thanks!
Yes, I have this working in IE on http://www.WasupPalmSprings.com. If you click on any of the stories from the home page, there is a like button at the bottom that shows the comments box in IE.
I have had issues with the comment box not showing in IE on other sites. Here is the checklist I use:
Make sure you have the right xmlns attrs in the HTML tag on your page.
<!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:// www.facebook.com/2008/fbml" xmlns:og="http:// opengraphprotocol.org/schema/">
Make sure you have <div id="fb-root"></div> somewhere on your page.
Make sure you have set up an app for your webpage because you need an app id. If you don't have an app, create one here: http:// www.facebook.com/developers/
Use javascript to load the Facebook connect javascript file. Do not just drop a <script src="..."> tag on the page. If you use jquery or similar, ideally this would go in the onReady handler. Otherwise, put it in <script> tag at bottom of the page.
Be sure to substitute your actual app id from the Facebook app you create where it says 'INSERT YOUR APP ID HERE'
window.fbAsyncInit = function() {
FB.init({appId: 'INSERT YOUR APP ID HERE', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Add meta tags with open graph information for your page.
<meta property="og:title" content="YOUR PAGE TITLE HERE"/>
<meta property="og:site_name" content="YOUR WEBSITE NAME HERE"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="URL OF PAGE HERE"/>
<meta property="og:image" content="URL OF IMAGE YOU WANT TO SHARE"/>
<meta property="og:description" content="YOUR PAGE DESCRIPTION HERE"/>
<meta property="fb:app_id" content="YOUR FB APP ID HERE"/>
Finally add the like button wherever you want it to appear on the page. Be sure to substitute your own page URL.
<fb:like href="INSERT YOUR PAGE URL HERE" layout="button_count" show_faces="false" width="570" font="arial"></fb:like>