Set page tab content height - height

How can I set the hight for my page tab content that is from a google site? It works fine, I just want the vertical scroll bars not to be longer than the actual facebook page size.
The code I'm using now
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '576155032405795', // App ID from the app dashboard
});
FB.Canvas.setAutoGrow();
};
// 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>

You may want to look into the setAutoGrow() or setSize() functions of JavaScript SDK. Both may help you but you will have to judge which one to use, from the setAutoGrow()'s documentation
This function is useful if you know your content will change size, but you don't know when. There will be a slight delay, so if you know when your content changes size, you should call setSize yourself (and save your user's CPU cycles).
and from setSize()'s documentation
Call this whenever you need a resize. This usually means, once after pageload, and whenever your content size changes.
So you need to judge accordingly.
Edit
I would like you to use setAutoGrow() function in your code. You will need to put this code in the page that is been rendered within the Page Tab. And as you have mentioned that is your content is retrieved from page within your Google sites, then this is where you would be required to add the code.
You will have to insert the following code within your page just after the body opening tag
<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
});
FB.Canvas.setAutoGrow();
};
// 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>
Here the channel.html will contain just the following line of code
<script src="//connect.facebook.net/en_US/all.js"></script>

Related

adding Facebook Social Plugins

I feel completely silly for asking this question, especially after so many years of designing and building web sites. I have been researching for about a week on how to get Facebook Social Plugins working for my site and I am completely stuck. So, I have stripped away everything I can think of and just have a completely basic page here. I have done exactly what the Facebook Developer Tools have said to do and I am getting nothing. Here is my code below, any suggestions would be great!
Just to go ahead and get this out of the way, where it says 'APP_ID', I did put in my app id and I am still not getting anything coming through.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/JavaScript_v1_9_1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<link href="fonts/OpenSans/stylesheet.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</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/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/DippPicks" data-send="true" data-width="450" data-show-faces="true" data-font="segoe ui"></div>
</body>
</html>
I have successfully used the FB plugins using the code shown here, which is:
<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>
Which slightly differs from the code shown in the FB plugins page when you click the "Get Code" button, by including that FB.init block beforehand and passing in the App Id in there instead of in the js.src property.

Cannot make comments from facebook like button

I get the like button code from https://developers.facebook.com/docs/reference/plugins/like/, and on my page, the like button is rendered correctly...at least it looks like so :P
But when I click on the like button, the comment dialog appear and disappear immediately, and the button becomes a Confirm link; then I click on the like, a popup window ask me to confirm to like it...then, when I back to my page, I can see the comment dialog. But whatever I input, after I clicked on the Post button, the dialog will not close.
In my Chrome console, I see when I click on the Post button, a request is make to https://www.facebook.com/plugins/like/comment, and the return result is:
for (;;);{"__ar":1,"payload":null}
I compared this behavior on other sites, and it is clear the return is different. But I have no idea why.
Usually that problem can be fixed by using an app id in the init 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/de_DE/all.js#xfbml=1&appId=xxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
That´s Facebooks spam protection...
actually what luschn is right. you should create appID. facebook needs to count the LIKES when one clicks on it. you know, it's so simple. perhaps there's something you need to grab from the button :p
Try this stuff:
<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/de_DE/all.js#xfbml=1&appId=null";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<span class="fb-like" data-href="https://www.facebook.com/fb-name" data-layout="button" data-action="like"></span>
appID set into null. This works, but it's spamming. This is just for experiments only.
Here's the sample page:
http://developer.appacyber.net/feed/test.php
It also works on localhost :D

Facebook Comment Box disappear when using it with Backbone.js

I am trying to embedded Facebook comment boxes dynamically generated by Backbone.js in my HTML I have the following code right after the body in my HTML file.
<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=147738045314917";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I dynamically generate the div tags using Backbone template. I embed the following html tag.
<div class="fb-comments" data-href="http://something.com" data-num-posts="2" data-width="470"></div>
The problem is that the comment box don't always show for some reason. I am also using the Facebook SDK in this page too.
I don't really get this, any help would be great. Thank a lot!
After adding new XFBML elements to the DOM (or the HTML5 equivalent in this case), you want to call FB.XFBML.parse on the containing element in order to transform these.

Subscribe FB event

<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=223245147771570";
fjs.parentNode.insertBefore(js, fjs);}
(document, 'script', 'facebook-jssdk'));
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
});</script>
<h1>Lajknout stranku!</h1>
<div class="fb-like" data-href="https://www.facebook.com/Testra22" data-send="false" data-layout="button_count" data-width="10" data-show-faces="false" data-font="trebuchet ms"></div>
I use this code to create FB Like button and I would like to display alert when user click on it. But there is js error Uncaught ReferenceError: FB is not defined.
You start using Facebook JS SDK before it was loaded by browser.
Because you use asynchronous way to load the JS SDK you need to define window.fbAsyncInit (as described in documentation for JavaScript SDK) function and run code that depend on JS SDK from here...
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
}

Like Box HTML Snippet for iWeb

I have had a like box for a while on my website but wanted to upgrade it to one showing recent posts. My site is created in iWeb.
I went to the social plugins section and created the box for my page www.facebook.com/rivieracoaching but when I click 'Get code'the dropdown box where it says "This script uses the app ID of your app:" the dropdown box only shows an old page that I have deleted - I can't see any of my actual current pages to choose from.
This is odd because the preview on FB looks correct and in the code it does seem to say Riviera Coaching but when I copy/paste it into the iWeb HTML snippet nothing shows. I googled and an iWeb specialist says to copy/paste the code from the IFRAME section so i did that but no joy. Am I doing something wrong or is this a glitch in FB/iWeb?
The code FB is generating is:
<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=124751684204020";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Please help, this is most frustrating!
You're not forced to specify an appId to simply include a like box. You can use the following js code :
(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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
And then include your xFBML like box code :
<fb:like-box href="www.facebook.com/rivieracoaching " width="292" show_faces="true" stream="true" header="true"></fb:like-box>