I have been building a facebook tab using html and css and facebooks javascript SDK.
I having problems with the iframe resizing to the size of the content.
I've managed to get it to work on initial load which is cool, using this below script...
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
-
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '00000000000000', // App ID
channelUrl : '//www.mywebsite.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
});
FB.Canvas.setAutoGrow();
};
// 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 = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
and my channel.html looks like this...
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
Like I said the initial page load resizing is perfect, but as I navigate around the iframe, it does not autogrow to my content.
Can anyone advise as I'm very new to this facebook iframe biz.
Thanks in advance
Please check these:
A, Do you have <!DOCTYPE html> at the top of the HTML?
B, Do your app generates valid HTML? Here is the validator tool: http://validator.w3.org/
Related
I implemented facebook login in my website using 'react-facebook-login' module
and I used this code in CompentDidMount
`// Facebook Authentication
window.fbAsyncInit = function() {
FB.init({
appId : '***********',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : false, // parse social plugins on this page
version : 'v2.1' // use version 2.1
});
}.bind(this);
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));`
In render function my code is
` <FacebookLogin
appId="344596562557645"
autoLoad={true}
fields="name,email,picture.height(2048)"
scope="public_profile, email"
callback={this.responseFacebook.bind(this)}
cssClass="fbbutton"
icon="fa-facebook"
textButton=" FACEBOOK"
redirectUri={window.location.href}
/>`
Now login with facebook is perfectly working in desktop but not working in mobile browsers (both android and ios).In mobile browsers the callback function is not called because the the page is reloaded while in mobile. Please help me fix it , how to get data from that callback function.
I was able to fixed this issue. Added isMobile={false}
are you using the redirect or the popup method? On mobile sometimes I've only had luck with the popup method. maybe that will help? not sure.
I fixed this by using this module - react-facebook-login-component
I am trying to do login with facebook but their is an error and is not allowing users to login and the error is ERROR: Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.
<html>
<head>
<title>Login with Facebook</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '555437747988297',
channelUrl : '//booknow.drbatras.ae/channel.html', // Channel File
xfbml : true,
version : 'v2.7'
});
};
(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>
<div class="fb-login-button">Login with Facebook</div>
</body>
Go to developers site of facebook -> login with the admin account of your app and select your app from the menu, In the Advanced settings tab of the app add your domains then the error will not show up
Remove the channelUrl parameter (it is not needed anymore)
Add the "Website" Platform in your App settings, with your URL
Add the domain at "App Domains" in your App settings
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 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.
I'm trying to use SDK Facebook to detect the click on the button "like" of the likebox and call a function , but it not working .
Here's my code :
<!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://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxx', // App ID
channelURL : 'xxxx/facebook/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// 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 = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<script type="text/javascript">
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
</script>
<fb:like-box href="http://www.facebook.com/MarwenClubiiste" width="292" show_faces="false" stream="false" header="false"></fb:like-box>
</html>
Please Help , I really need this
Like box has a known bug, where the edge.create event doesn't work if the user is logged out of facebook and has to login to LIKE the page.
However it works fine if the user is already logged in.
Here is a mention of this bug :
https://github.com/facebook/connect-js/issues/82
http://forum.developers.facebook.net/viewtopic.php?id=75166
The Like button does not have this bug, and fires the event in both cases.
You may have to replace the LikeBox with a Like button + some custom HTML of your own.
Try using non-async loading of facebook JS as well . Here is more help :
http://forum.developers.facebook.net/viewtopic.php?id=87926