I've implemented the JavaScript SDK in my website as stated on the facebook JavaScript SDK site.:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
But in the like plugin code section it gives me this code:
<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=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
My 1st question: What is the better code? and are their any differences?
My second question is about the HTML5 or XFBML rendering of the buttons or comment boxes. I run a wordpress blog, that's not html5.
My 2nd question: What is the best code to use, the HTML5 or the XFBML? and is one faster that the other, or one less supported than the other?
Thanks!
The first solution loads the Facebook JavaScript library asynchronously, and would provide faster page rendering for your visitors if arranged correctly. Place the <div id=fb-root"> and window.fbAsyncInit definition just after your <body> tag so they are defined up front before the Facebook JavaScript library loads.
In contrast, the function(d) definition should be located at the bottom of your page before the </body> tag thereby delaying Facebook library loading until all your other page elements have loaded above. This ensures your own salient page elements render first.
The function(d,s,id) code snippet looks newer (more parameters), but I don't think its asynchronously loading like the first. Therefore, for the time being, I would use the older (first) version for now until Facebook posts an asynchronous version of the newer function(d,s,id) code snippet.
On your second question, I would continue using the XFBML code implementation until very few of your website visitors are using IE7 or IE8 any longer. Once they have moved on to IE9+, then I would switch to the HTML5 implementation, which has many semantic advantages for search engines, screen readers, and scrapers.
Related
I want to have a "facebook share" link or button on a web page. The idea is to to share a link and a brief description, identical to twiter. No image or title of page is needed
In the past, the following link worked:-
"http://www.facebook.com/sharer.php?u=" + complete_url + message
Now, facebook ignores the message and it discards the complete url link. Instead it only displays the title of the homepage.
I found this answer on stack overflow:-
Make my own custom Facebook share button.
Having tried it (the script below) - I get the error: 'FB' is undefined
I'd be grateful if you could tell me:-
1. what am I doing wrong?
2. do we have to download the sdk.js from facebook server everytime?
The script is like this:
<html><head>
<script>
function onClick() {
FB.ui({
method: 'share',
href: 'the_complete_url_to_specific_page'
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'my_facebook_id',
xfbml : true,
version : 'v2.3'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</head>
<body>
<a href='#' onclick='onClick() ;return false;'> share on FacebookR</a>
</body>
</html>
First of all: No, you do not need to change the API version. Only if you need to use something that is only available in newer versions, check out the changelog once in a while: https://developers.facebook.com/docs/apps/changelog
You get the "FB is undefined" error if the JavaScript is not loaded (yet). Most likely you are not trying your code on a real server (it can also be localhost) but from your file system. You can try adding "https" to the source like this, or (better) test the code on a real server:
js.src = "https://connect.facebook.net/en_US/sdk.js";
The App ID is NOT your User ID, it´s an ID you get after creating an App here: https://developers.facebook.com/apps
Btw, the user can enter the message right when the Share Dialog pops up.
I'm running an error very similar with this one: Facebook Login API HTTPS Issue.
I have a website use facebook authentication, the Facebook login is no problem. But the Facebook like-button get troubled when been clicked (test fail on Chrome, Safari, Firefox, in OSX), the error message is:
Blocked a frame with origin "https://www.facebook.com" from accessing a
frame with origin "http://static.ak.facebook.com". The frame requesting
access has a protocol of "https", the frame being accessed has a protocol
of "http". Protocols must match.
I've searched all over and find no solutions.
It seems like that when the like-button is clicked, it pop out a frame from https://facebook.com callback and trying to request http://static.ak.facebook.com thus cause protocol mismatch?!
Here's what I put right after <body> tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'appid', // App ID from the app dashboard
channelUrl : '//mydomain/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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/zh_TW/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and the channel file at http://mydomain/channel
<script src="//connect.facebook.net/zh_TW/all.js"></script>
and here's how I use the like-button
<div class="fb-like" data-href=url data-send="true" data-width="450"
data-show-faces="true"></div>
Really needs help, please!
In your first script tag you can tell Facebook explicitly to use HTTPS...
Add the line:
FB._https = (window.location.protocol == "https:");
Add it before the FB.init function call, just below or in place of the comment:
// init the FB JS SDK
This will ensure that Facebook's servers load any required libraries their end over https.
Hope this helps.
Reviewing the js code on Facebook there are multiple urls containing hard coded strings for
http://static .../rsrc.php
it's possible those are the files triggering the error.
This may be something Facebook needs to update.
On a side note, it may be possible to download that js file from Facebook and store it on your server and remove the hard coded http string. I would test this further but I am on my phone at the moment.
I'm using the module "facebook like box" in my homepage:
<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/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I put this code immediately after body tag and I put this in left side:
<div class="fb-like-box fb-box-laterale" href="http://www.facebook.com/RistorantiRomaRisto.it" data-href="http://www.facebook.com/platform" data-width="190" data-height="380" data-show-faces="true" data-stream="false" data-header="true"></div>
All works done, but I receive this error in console: FB.getLoginStatus() called before calling FB.init()
I've just read other conversation where i read that "You need to load the api asynchronously" and I followed their instructions with no result.
How can I solve it?
This happen because you don't add an appId to the url you set for facebook.
See the complete code Facebook generate here: https://developers.facebook.com/docs/reference/plugins/like/
As you'll see, the url is written like this: //connect.facebook.net/fr_CA/all.js#xfbml=1&appId=YOUR_APP_ID
The presence of this appId, will automatically call FB.init() with basic app settings. But as you removed it, FB isn't calling it's init function, and call .getLoginStatus() directly.
So, go create a app for your website, and add the app Id to the code snippet in order to remove this error.
Hope this help !
my site is alonsart.com... when clicking the send button on my site..it opens a blank box...
this is what my code looks like:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my_id', // App ID
channelUrl : '//alonsart.com/index.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
and of course the div
<div style="margin-top:20px" class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
any idea why it wouldnt show anything when clicked??
thanks
Don't know if you already solved the problem or not, but for future reference, I found that the Debug tool offered by Facebook [ https://developers.facebook.com/tools/debug ] was a lifesaver in troubleshooting this exact same issue on a site I was working on.
You give it a URL, it will scrape it, and give you a breakdown of exactly what is wrong with it (From an Open Graph perspective)
Although this question has been asked quite some time back but it might help someone looking for occasional problems with like and send plugin.
Yesterday the like and send plugin stopped working for my site too and there was nothing wrong with the implementation. Even the send button on http://developers.facebook.com had stopped working yesterday and today it is working back again.
So check if the plugin is working on others sites too or not. If not then most likely the problem is at Facebook's end and not your end.
I'm really confused.
I'm trying to use some of the very simple Facebook plugins on my site, specifically the basic "Like" button.
I already know how to use the limited version with an iFrame.
However, now I'm trying to figure out the XFBML method and the online documentation seems to make a lot of assumptions about what you already know and really short on working examples. For example, they show you how to call the JavaScript Init and give you the single line of HTML code for element fb:like... but I could not see any examples of how to show/hide faces, set the default font, etc. like in the iFrame code.
I've since figured out that you need to add them as attributes to the element but that was thanks to StackOverlfow and no thanks to the Facebook documentation which simply takes you in circles.
<fb:like href="http://mydomain.com" show_faces="true" action="recommend" colorscheme="light" width="400" height="35" />
Ok, so now when using the XFBML code, it's height should expand/contract automatically depending on being logged in or not I assume.
I do not know if I'm supposed to initially set the height to "80" or if that happens automatically.
And I have no idea what I'm supposed to use for 'your app id' in the Init script. There is no App... just a Facebook Company Page... so why would I need an App Id when I'm just putting a Like button on a website?
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'your app id',
status: true,
cookie: true,
xfbml: true
});
};
Any enlightenment on these issues would be appreciated.
Thank-you!
Answering my own question, after pulling out all my hair...
http://developers.facebook.com/docs/guides/web/
"The JavaScript SDK requires that you register your website with Facebook to get an App ID (or appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. The following example shows how to load the JavaScript SDK once you have your appId:"
http://developers.facebook.com/setup/
The title of that page/form is Create an App. I still don't understand why they don't use more generic terminology. I'm not "creating an app" and I don't consider my website to be an app.
I don't have an appId but just got this code from the like code generator and it seems to work in my local environment (which uses localhost:8000 yet still has 136 likes). When I press the buttons I get the facebook login popup as expected.
<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>
<fb:like href="url here (optional)" send="true" width="450" show_faces="true"></fb:like>
you can do...
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" >
...
window.fbAsyncInit = function() {
FB.init({
// appId : 'none', // App ID
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('edge.create', function(href, widget) {
var ss=href;
if (ss.match(/myWebSite/i)) {
alert('You just liked 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 = "https://connect.facebook.net/en_GB/all.js#xfbml=1";
//js.src = "https://connect.facebook.net/en_GB/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
...
<fb:like ref="core" class="fb-like" data-href="http://www.mySite.com"
data-send="false" data-layout="button_count"
data-width="50" data-show-faces="false" data-colorscheme="dark"></fb:like>
the above works, but Like yourself, and and note how Facebook divides up real Likes with Facebook registered sites (giving a spash page, #followers, #talking, etc), from Liked urls it does not know. (the site does, at least, get a increasing counter). It kinda defeats the purpose of being Liked at all. I might be wrong, but I think it does not even post messages about the latter.
this is too bad, because I am running out of phone numbers for Facebook :)
Then, for me at least, there is a bigger problem. If you are going to reward someone for Liking you, you can't really be sure they did, because this is js. If you try to js redirect to a reward page, a user can just cut paste that url. You could set a rnd session var, pass it to js, and redirect js to a php page with it, but a user could figure that out too.
You cant seem to (or commented out appId) ...
require 'face_sdk/face/src/facebook.php';
$facebook = new Facebook(array(
'appId' => '',
'secret' => '',
));
$user = $facebook->getUser();
so there seems no direct php way. I was playing with passing the iframed Like button url to php, parsing it with simple_html_dom.php, and finding which of the two main divs has the class 'hidden_elem'. But in the end, it just isn't worth it because Facebook will treat you like a second class citizen.