Here is my simple html:
fb_driver.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Facebook Driver</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="fb_driver.css">
</head>
<body>
<script>
window.fbAsyncInit = function() {
alert("why can i not see this?");
FB.init({
appId: 'my-app-id',
xfbml: true,
version: 'v2.0'
});
FB.ui({
method: 'feed',
name: 'The Facebook SDK for Javascript'
});
alert("hi");
};
(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'));
alert("hello");
</script>
<div id="fb-something" class="fb-like" data-send="true" data-width="450" data-show-faces="true">
</div>
</body>
</html>
It is essentially copied directly from https://developers.facebook.com/docs/javascript/quickstart/v2.0. The "hello" alert at the end of the script shows, but the "why can i not see this?" and the "hi" do not (they are inside window.fbAsyncInit = function() {...}). "why can i not see this?" is literally the first thing inside the fbAsyncInit block but still fails to show. Can someone help me with why this is not working?
One thing I can think of is that, even though the above link says nothing needs to be imported or downloaded and just need regular javascript, perhaps there is something in earlier instructions that I missed.
It ended up being that the '//' before 'connect.facebook.net/en_US/sdk.js' is no good for just opening the html file locally (which is what I'm doing just for playing around right now). I added 'http:' so it reads 'http://connect.facebook.net/en_US/sdk.js' and that got me to a different bug, which is progress.
Related
I cut and paste the code generated by FB into my app as directed.
</head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyId',
xfbml : true,
version : 'v2.5'
});
};
(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_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-share-button" data-href={{webAddress}} data-layout="button_count"></div>
<div class="fb-comments" data-href={{webAddress}} data-numposts="10"></div>
I tried putting the JS in the head as well as in different parts of my index.html but the share button and comments would appear without an additional refresh.
I had a similar problem with my LinkedIn button not showing up until after a refresh and I switched
<script src="https://platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
to
<script>
delete IN;
$.getScript("https://platform.linkedin.com/in.js")
</script>
and the problem is solved. Would a similar thing work for FB? If so how do I implement it?
I looked at this post, http://stackoverflow.com/questions/29133563/facebook-social-plug-in-not-showing-up-when-added-dynamically
focused on FB.XFBML.parse() but given the info on
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
I don't know how to implement it and I don't think it's what will fix my problem because no information is coming from my server.
The code generated from the Twitter and FB share buttons belongs in the index.js file at the top of the <body> in an Angular Fullstack application. Then in the appropriate controller.js file put:
angular.element(document).ready(function() {
twttr.widgets.load();
FB.XFBML.parse();
});
I am trying to make a custom Facebook Share button, by providing my own img and applying FB.ui() to it, but the method opens the dialogue stating:
Given URL is not permitted by the Application configuration: One or more of the given URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
Can anyone tell me what I am doing wrong?
index.php:
<head>
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Why can't I" />
<meta property="og:description" content="get this thing to work" />
<meta property="og:image" content="http://www.example.com/images/whyaretherenoexamplesanywhere.jpg" />
</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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
// more div's
</body>
in a div on index.php, the file ajaxPage.php is loaded, by means of an ajax call. this in itself and everything in it works perfectly.
In this file an image exists as a button, bound by a .click() method, which together prompt the dialogue for sharing:
ajaxPage.php:
// In de DOM:
<img class="customFacebookIcon" src="enoughwiththefunnynames.jpg"/>
// In the <script>:
$('.customFacebookIcon').click(function(){
FB.ui({
method: 'share',
appId: '12345678901234567890',
href: 'http://www.example.com',
}, function(response){});
});
I'm new on facebook developer and i have created a page tab which contains a login using facebook php sdk (works on all browsers), and like button + feed dialog using facebook javascript sdk (works on all browsers -chrome, FF, safari- except IE).
After 4h of research and tests, I have created a simple page test.html which displays a like button. When I opened it directly outside facebook it worked on all browsers except IE. The IE console shows no error message in this page test.
I use IE 11 but when i emulated IE11- the problem is still here.
Note 1 : in the code, i call window.fbAsyncInit and IE doesn't show the alert.
Note 2 : the domain is in https
The entire code of the page test.html :
<!DOCTYPE html>
<html>
<head lang="fr" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
test<br /> <!-- just shortcut to reload -->
<div id="fb-root"></div>
<script language="javascript" type="application/javascript">
window.fbAsyncInit = function() {
alert(1); // IE only doesn't shwo this alert
FB.init({
appId : 'XXXXXXXXXX', // my api ID
xfbml : true,
version : 'v2.2',
cookie : true
});
};
(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";
//js.src = "//connect.facebook.net/fr_FR/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="https://www.facebook.com/naintrepides" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</body>
</html>
There were online discussions that IE doesn't support the MIME type value of "application/javascript". I was hoping that at this time and age it should especially with the recent version of IE you are using.
Try changing it to:
<script language="javascript" type="text/javascript">
instead.
I have the following code that logs the user in and displays the "Select Friends for Request" dialog ("apprequests"):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Test</title>
<script type="text/javascript">
function facebook(){
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
FB.ui({
method: 'apprequests',
message: 'Sample Title',
max_recipients:1
}, function(response){
console.log('OK');
});
}
}, {scope: 'publish_stream'});
}
</script>
</head>
<body>
<p>Test</p>
<div id="fb-root"></div>
<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/es_LA/all.js#xfbml=0&appId=XXXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
The code is working with all major browsers (Firefox, Chrome, Opera, IE11, Safari for IOS, Android browser). Safari (for Mac/PC) is the exception: it's opening the "apprequests" dialog but the dialog comes up empty. If you change the dropdown options (to "Friends to Invite" and then to "All Friends" again) the friend list finally appears.
Any idea how to fix this bug?
Thank you!
It is reported bug of Facebook-API. As mark wiltse stated here:
We have managed to reproduce this issue and it appears to be a valid bug. We are assigning this to the appropriate team.
There is no need to handle separately for safari. You just need to on-hold this task until this bug get resolved by facebook developer.
I have this basic HTML page with a Facebook login button. The ID below is the ID of an app I created in my developer portal. When I run this page, it only shows the text “Login with Facebook” and not the actual button. I know it’s not succeeding to initialize the SDK but I can’t tell what is going on. Any ideas?
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '232894623452511',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
Your code seems to work. See example of your code running here: http://jsfiddle.net/dmcs/HXRUv/3/
You might want to check your browser plugins. My Chrome is only displaying text, but it has do not track me plugin, Firefox works fine.