I have used Facebooks Javacript SDK to add a sharebutton and a like button on my website, but it only works on a desktop computer browsers, not on mobile browsers..
For example I added the parts provided by FB:
<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 = 'https://connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v3.1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://kanzan.se/interviews?id=" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
and the button shows up on my computer (even using chrome responsive design mode with mobile sizes.), but not when I use my phone (any phone) to access it. There the button is gone!
Have Facebook made it impossible to show like buttons on mobiles?
The problem is that I was in development mode all the time! This should be emphasized more clearly on different sites describing how "simple" it is to add a Facebook like button. I didn't even recognize it while making my Facebook account a development account.. only recently, when thinking about it I came to the conclusion that the problem has to do with the app id and all that comes with that.
Related
Here I have a very, very noob question. I'm trying to create a web facebook app, using Javascript SDK. I have never done any website, any app, etc. So very basic, excuse me in advance..
Basically, I'm following the steps decribed in the quickstart: https://developers.facebook.com/docs/javascript/quickstart
I created a html file, and copy-pasted exactly what is described on this page:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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>
I changed "your-app-id" with the id I was provided.
Then I just open my html file with my web browser, which is showing a blank page, I guess it's normal at that point.
Then, I go to the next step, that is supposed to "trigger a share dialog" (see: https://developers.facebook.com/docs/javascript/examples). Again, I copy-paste the provided snipped starting with FB.UI(... and paste it after the FB.init() call, which is just before the "FB.AppEvents.logPageView();" line, if I'm not mistaken (?).
And then I reload my html file with my browser.
According to the "examples" page, "Now when you reload your page, you'll see a Share dialog appear over the top of the page."
Well, it's still a blank page.
So, I guess my approach is very naive.. is it supposed to work just like that? Or if not, what am I doing wrong? Am I supposed to download something before?
Thanks in advance for any help! :)
You have to test this on a real server, not just by opening the html file in a browser. Either upload it to an external server or start one on localhost. You can also try adding the protocol:
js.src = "https://connect.facebook.net/en_US/sdk.js";
...but i would recommend using a server on localhost and NOT adding the protocol.
Hi friends i am making my website in PHP and i want to put login buttons of Facebook, Twitter and Google+. I am totally new to APIs.
For Facebook I go through https://developers.facebook.com/ but this code is not running. I mean there is no any output.I just copy following code paste it in my website.
code
<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-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="false" data-auto-logout-link="true"></div>
Give me some guideline. How to use APIs of all three
The website I'm working on has a Facebook login option, but recently a user reported it wasn't working for them. I disabled my extensions etc, I got this error in my console:
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.
Is there an option I can feed to the API that will get it to work on the same protocols? FYI, the primary website runs on HTTP (no S).
It is especially odd because it seems like it stopped working all of a sudden (but it is possible this was always a problem as I am new and am learning this system).
I have this code at the foot of my page:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ..., // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channel: '//...mychannel.../channel'
});
FB.Event.subscribe('auth.authResponseChange', function(fbResponse) {
// function that logs in user
});
};
// 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>
If you are not loading the javascript sdk async, you could see this error a lot.
refer to: https://developers.facebook.com/docs/javascript/quickstart
in addition, if you are using any Facebook plugins via the iframe code, be sure the src url protocol matches.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/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/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I had the same issue on my development environment.
Steps to solve (not sure which one did it):
Log out of the application.
Delete all cookies from the browser.
Log in to FB as the intended user (not to the developer page but to the user app permissions page).
Delete the app permission from the FB permissions page.
Log out of FB.
Reload the app and try to log in.
I would not have answered in such a voodoo answer unless I had spent some hours on it, and would value any sort of witchcraft to get me out of it.
i've been with this problem...
my solution:
move your facebook call to static page...
(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&appId=IDDDD";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
set a ajax callback:
try{setTimeout(FB.XFBML.parse);}catch(e){}
happy :)
jquery example:
$(document).ajaxComplete(function(){
try{
setTimeout(FB.XFBML.parse);
}catch(ex){}
});
For what it's worth, I managed to fix this issue by converting to HTTPS (which is what I should have been doing anyway).
I have a page tab app. The site that has my app hosted has SSL enabled. When I view the page tab using IE9 I get an insecure content error and in my console I can see:
HTTPS security is compromised by http://static.ak.facebook.com/connect/xd_arbiter.php?version=11
this is only when I view the page tab using regular http protocol e.g:
http://www.facebook.com/mypage/myapp
if I am viewing Facebook securely it does not happen, e.g:
https://www.facebook.com/mypage/myapp
The app uses the JavaScript SDK but I am doing things to ensure it uses the secure version such as:
FB._https = true;
before
FB.init()
when I link to the SDK I am sure I am using the secure connection:
(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 = "https://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
} (document));
I do not get these errors if I view the pages directly on my server , it only happens when viewed inside of the page tab. I'm thinking that Facebook is generating this call to unsecure resources. I've done allot of searching but can't find a way to fix this. Could anyone recommend a way to deal with this? Any help would be very much appreciated. Thanks!
I have the following simple test page and trying to add a FB login button. This will be part of a stand along web site and not a canvas application. If the current user is already logged in on FB, then the list of friends using the application is displayed, but there is no login button. If the current user is not logged in on FB then I get nothing.
Any ideas?
Here is my page... I'm currently running it under localhost.
<body>
<div id="fb-root">
</div>
<!-- Loading of FB SDK -->
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '319067848117743', // App ID
channelUrl: 'http://localhost/TestApp/channel.aspx', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
<!-- Display FB Login Button -->
<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=319067848117743";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-show-faces="true" data-max-rows="2" data-scope="user_about_me,publish_stream,read_stream">
</div>
</body>
first you don't really need to put in the async js loader twice, just redundant code is all. Secondly, I don't know how that code could list friends, I don't see the code for it.
1) You say you're expecting a log-in button even though the person is already logged in? The login button plugin you're using doesn't work that way. It will only show login if the user is not logged into your application. See the note saying "Note: If the user is already logged in, no login button is shown." on https://developers.facebook.com/docs/reference/plugins/login/
2) You also say you cannot see any login button when the user is logged out of Facebook. This is odd, but without seeing all the code I don't know what to help with that part of your question.
Is your app on sandbox mode? Try disabling sandbox mode from app facebook config.