Can I set the Page Tab height on a Facebook app? - facebook

I have created a Facebook Page Tab app using the Heroku hosting option. I see an option for setting the width of the Page Tab to either Normal (810px) or Narrow (520px), but don't see an option to set the height, as there is when creating an 'App on Facebook' app.
I understand I could set this app up as an 'App on Facebook', but am wondering if I might be missing something in the 'Page Tab' app setup.
Here is a screenshot of the 'App on Facebook' and 'Page Tab' app setup page.

Here's what worked, based on https://stackoverflow.com/a/13181388/820113
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function()
{
FB.init({ appId: 'appid',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoGrow();
}
</script>
And a <div id="fb-root"></div> in the body.

Found latest solution # Step 2014
What you need to do
After add this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{Your-mail-App_id}',
xfbml : true,
version : 'v2.0'
});
FB.Canvas.setSize({ width: 770, height: 735 }); // set your own figure
};
(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'));
That is all. It will work for sure.
FB.Canvas.setSize() without parameters means leting FB auto detect page size.

Insert before you close the body tag:
<div id="fb-root"></div>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() {
FB.init();
FB.Canvas.setAutoGrow();
}
</script>

Related

triggering share button with facebooks native button instead of own image html element

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Feed Dialog Page</title>
</head>
<body>
//I can trigger the FB.ui with this image here but thatś not what I want. I want to trigger the FB.ui with the test function with the native facebook-share button with the class fb-share-button below.
<img id="share_button" onclick="test();" src="">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
xfbml : true,
version : 'v2.2'
});
};
(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'));
function test(){
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object:'https://developers.facebook.com/docs/',
})
}, function(response){});
}
</script>
<div class="fb-share-button" data-href="http://testgenerall.webhomeschool.de/test_fb_ui.html" data-redirect="http://testgenerall.webhomeschool.de/test_fb_ui.html" data-layout="button_count"></div>
</body>
</html>
That´s not possible, you can only use the image of the share button, but you can´t use the share button plugin to trigger your own custom function.

Facebook Send Button Works But Doesn't Fire 'message.send' Event

I've embedded the Facebook send button. It works, so I can send messages and a link through it.
However, the message.send event isn't firing.
I tried again but now with a new page, that has nothing in it, except the code which I copy-pasted from here and here and the FB.Event.subscribe documentation.
I don't get any errors in the console.
Any help will be greatly appreciated.
My code:
<!doctype html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'XXXXXXXXXXXXXXXXXXXXX', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
cookie : true, // enable cookies to allow the server to access the session
status : true, // Check Facebook Login status
xfbml : true, // Look for social plugins on the page
oauth : true
});
FB.Event.subscribe('message.send',
function(response) {
alert('You sent the URL: ' + response);
}
);
};
(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/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:send href="http://www.google.com"></fb:send>
Test test
</body>
</html>
Same here too. I created a bug report at https://developers.facebook.com/x/bugs/1425315047692224/ please subscribe.

facebook login-button - registration-url doesn't work

I'm trying to integrate the facebook registration-login plugin in my site.
Following is an example that is trying just to implement the login button.
According to documentation:
"If the user has not registered for your site, they will be redirected to the URL you specify in the registration-url parameter."
However this doesn't happen. When the user clicks on the login button and he isn't registered in my site yet, the same page, with the login button, reloads.
<?php
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
<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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APP ID',
channelUrl : 'MY CHANNEL URL',
status : true,
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
</script>
<fb:login-button
registration-url="...my site's address/test.php"
on-login="console.log(arguments)"
/>
</body>
Go to this site: https://www.facebook.com/appcenter/my and remove your app and try again! You will see, it works! ;)

Detecting if a user clicked on Facebook Like button

It looks like:
FB.Event.subscribe('edge.create', function(href, widget) {
alert("Hi");
});
works for everybody except me!
Here is my code:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
.
.
.
<body>
<div id="section1">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId :'xxx',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
FB.Event.subscribe('edge.create', function(href, widget) {
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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="mysite" send="false" width="450" show_faces="false" font="tahoma"></fb:like>
</div>
I just need a simple way to check if the like button was clicked to show a form on the page! Any Suggestions? Thanks
You can even detect multiple likes on the same page. We use this quite often, check the below snippet.
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_FACEBOOK_APP_ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
// START: LOGIC For detecting multiple likes on the same page
if(href == "LINK_1_ON_THEPAGE') {
alert('User Like is for Link1');
} else if (href == "LINK_2_ON_THEPAGE') {
alert('User Like is for Link2');
}
// END: LOGIC For detecting multiple likes on the same page
});
};

Facebook Comments, can't get moderator status

I've got a facebook iframe page with the following (cut out irrelevant) code. I can't seem to become moderator of the comments. Any idea where i messed up?
(debugging link: https://developers.facebook.com/tools/debug/og/object?q=brandpreview.nl%2Ffbkerst%2Fwhitewishingboard.php)
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta property="fb:admins" content="737418775" />
<meta property="fb:app_id" content="240672092656980"/>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '240672092656980', // App ID
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
});
FB.Canvas.setSize({ width: 520, height: 2000 });
// Additional initialization code 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_GB/all.js#xfbml=1&appId=240672092656980";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<div class="fb-comments" data-href="http://www.facebook.com/brandrepublic.nl" data-num-posts="5" data-width="520"></div>
</body>
First off, you shouldn't place your profile id inside those brackets. You should provide it without:
<meta property="fb:admins" content="737418775" />
Secondly, a requirement from Facebook has to be met; the facebook user who should get moderator priviliges needs to 'Like' your application.
Propably needless to say, but make sure you are logged in to Facebook when looking at your comment plugin.