I have code like this.
$(document).ready(function() {
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
});
But this doesn't work when I have Like box in some column. It seems this called before Facebook like box called.
How to fix this problem?
Basically I need to call this process after facebook loads Like box and Recommendations blocks (both).
To execute code after the facebook plugin has rendered, you can subscribe to xfbml.render. Here is my working code:
window.fbAsyncInit = function () {
FB.init({ status: true, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function () {
fbexecute();
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
var fbexecute = function () {
//-- re-calculate heights here
}
I think you can just put the like-button in a fix-height container.
For example:
<div style="height: 62px;">
<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="false" stream="false" header="false"></fb:like-box>
</div>
Then you won't worried about exactly how height it will be.
Another possible solution.
I suppose that you using the method of load facebook javascrpt sdk asynchronously. Then you can execute your code after FB.init()
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
if (jQuery.isFunction(window.fbexecute)) {
window.fbexecute();
}
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
var fbexecute = function() {
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
}
As per the FB.Event.subscribe, there is a loading event which will be triggered automatically when the page will finish rendering plugins
Step-1: In the HTML (put it where you want the social box to be shown):
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
Step-2: In the footer (just before ending the <body> tag):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
//FB.init({ status: false, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function(){
columnHeightFixer();
});
};
(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#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function columnHeightFixer(){
//...Height Fixing Code...
}
</script>
$(document).ready(function()
{
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
});
Related
I need to embed a Facebook video on a website, and my aim is to load a thumbnail and to only load the embed when the visitor clicks the thumbnail. This reduces up-front load time which is better for overall site performance.
I tried using a script that detects when parent element (“.bbfb-video”) is clicked and inserts the embedded video.
Note: jQuery is in use.
<div class="video bbfb-video" id="10154009776186729" data-link="https://www.facebook.com/facebook/videos/10154009776186729/">
<img class="bbfb-thumb" src="https://via.placeholder.com/640x360?text=video" alt="thumbnail"/>
</div>
<script>
(function() {
if ($('.bbfb-video').length === 0) return;
$('.bbfb-video').each(function() {
var fb = this,
id = this.id;
$(fb).click( function() {
var href = $(this).attr('data-link');
$(this).empty();
$(this).append('<div class="fb-video" data-allowfullscreen="true" data-href="'+href+'" data-width="500" data-show-text="false"></div>');
//Re-parse the parent
FB.XFBML.parse(document.getElementById(id));
//Autoplay
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
msg.instance.play();
}
});
});
});
})();
</script>
This creates new div <div class="fb-video" data-allowfullscreen="true" data-href="https://www.facebook.com/facebook/videos/10154009776186729/" data-width="500" data-show-text="false"></div> , no video is shown.
Error is Uncaught ReferenceError: FB is not defined
Your code works for me: link.
Maybe you are not initializing the facebook API correctly?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
};
(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>
I have configured Facebook comment in website.
<script>
window.fbAsyncInit = function() {
FB.init({appId: '****************', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div id="fb-root"></div>
<div class="fb-comment"><fb:comments href="http://XX.YY.ZZ/website" num_posts="8" width="610"></fb:comments>/div>
Whenever someone login and comment, they got error
Sorry, this feature isn't available right now.
Please let me know if it is because I have used IP address rather domain name, or there are settings in Facebook app for comment or anything else.
include js-sdk
<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_GB/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-numposts="5"></div>
I want to post the value of an HTML id as the message on my Facebook wall. Posting to Facebook works but FB ends up writing undefined as the value pass in for message:. I am using var word = document.getElementById("fb-root").value; to get the value but fb.api is turning the value into undefined.
Please see code below:
<html>
<head>
<title>My Facebook Login Page</title>
<script type="text/javascript">
function postToWall() {
var word = document.getElementById("fb-root").value;
var params = {};
params['message'] = word;
params['name'] = 'test';
params['description'] = 'test';
params['link'] = 'asas.com';
params['picture'] = 'http://3.bp.blogspot.com/--jbgq-gytJQ/URaJHK_93LI/AAAAAAAAAF0/SkyoK7H3r7U/s1600/Simple+Apple.png';
params['caption'] = 'test';
FB.api('/me/feed', 'post', params, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert(word);
}
});
}
</script>
<div id="fb-root">test</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'test',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
};
// 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>
</head>
<body>
<div id="fb-root">tests</div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:<fbapp-id>, cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button perms="publish_stream">Login with Facebook</fb:login-button>
Post To Wall
</body>
</html>
After checking the code (it's messed up) you need to pay attention to these points,
Everything is duplicated
In HTML, you can't have more than one element with an id, here you have 2 elements with id fb-root
<div id="fb-root">test</div>
You're loading the JS-SDK 2 times, once in asynchronous;
// 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));
and other in synchronous (using <script>)
<script src="http://connect.facebook.net/en_US/all.js"></script>
You calling FB.init() twice
You put one of fb-root element in head tag, it's a sin in HTML ;)
<div id="fb-root"></div> is removed from the DOM when you instance the Facebook app, it's like a dummy element but important for Facebook, not you or me, you should always leave it and not use it, instead create a new element with a different id like myWord
<div id="myWord">my word</div> though div are not inline element which makes a bad practice.
Here's your cleaned code;
<html>
<head>
<title>My Facebook Login Page</title>
<script type="text/javascript">
function postToWall() {
var word = document.getElementById("myWord").value;
var params = {};
params['message'] = word;
params['name'] = 'test';
params['description'] = 'test';
params['link'] = 'asas.com';
params['picture'] = 'http://3.bp.blogspot.com/--jbgq-gytJQ/URaJHK_93LI/AAAAAAAAAF0/SkyoK7H3r7U/s1600/Simple+Apple.png';
params['caption'] = 'test';
FB.api('/me/feed', 'post', params, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert(word);
}
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{App_id}',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
};
// 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>
</head>
<body>
<div id="fb-root"></div>
<fb:login-button perms="publish_stream">Login with Facebook</fb:login-button>
Post To Wall
</body>
</html>
document.getElementById("myWord").value
needs to be changed to
document.getElementById("myWord").innerHTML
i am working on a web application and i have added fb like button and share button. like button is woring fine but i have read the hyperarts tutorial from this SE question http://www.hyperarts.com/blog/tutorial-add-share-button-iframe-tab-applications/ . but i have done the same procedure for sharing a particular div but i dono where i make a mistake . can anybody help me or can give suggestions. i have even fiddle it but does not work in my app . http://jsfiddle.net/EZyaF/
Here is the like 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_GB/all.js#xfbml=1&appId=425369200906567";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like"
data-href="https://www.facebook.com/weatherappproj" data-width="450"
data-show-faces="false" data-send="false"></div>
and here is the Share a particular div code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '4x5x6x2x0x0x5x7',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript">>
$(document).load(function(){
$('#shareonfb').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Weather App',
picture: 'images/weatherapp.jpg',
caption: 'My current position and its weather',
description: 'Weather App Facebook',
message: ''
});
});
});
</script>
<img src="images/share-on-facebook-button.gif" id="shareonfb">
I'm trying to login on my website with Facebook JS API from my iPhone. The login works fine on computer as well as iPad.
Here's the login screen:
On iPhone however, I get to a screen which looks like this:
When I close the Facebook screen with the "Back to previous page" message and reload the login page, I'm logged in successfully. It looks like the problem is, that iPhone is unable to close the login pop-up screen.
Here's my JavaScript code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '', // the app id
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
// do something
}
});
FB.Event.subscribe("auth.login", function(response) {
if (response.status == "connected") {
// do something
}
});
};
function facebookRedirectLogin(redirect) {
// do something
}
function logout() {
FB.logout(function(response) {
// do something
});
}
(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" style="margin-bottom: 20px;">Forbind med Facebook</div>
How can I fix this problem?
Checkout this URL,
please do the settings as mentioned in the above URL, this code is working in mobile devices.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<div id="login">
<p><button onClick="loginUser();">Login</button></p>
</div>
<div id="logout">
<p><button onClick="FB.logout();">Logout</button></p>
</div>
<script>
function loginUser() {
FB.login(function(response) { }, {scope:'email'});
}
</script>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'xxxxxxxxxxxx',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Event.subscribe('auth.authResponseChange', handleResponseChange);
};
</script>
<script>
function handleReponseChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse) {
alert(response);
}
}
</script>
</body>
I have the exact same problem. This may (or may not) be an open Facebook bug: https://developers.facebook.com/bugs/280811108698311