Detecting if a user clicked on Facebook Like button - facebook

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
});
};

Related

open graph and tpl file

i want to integrate open graph using sdk and facebook login button (token action)
the probleme is with the smarty template tpl file
in fact i tested all my code on simple html file, and it work like a charme : http://zdig1.biz/1.htm
the same code when i report it to tpl file don't work
of corse by adding {literal}
you can compare the other link with this
http://zdig1.biz/video/naruto-shippuden/317-video_7605be4c2.html
the facebook boutton called time line dont exit
and the publich one dont work
<div id="fb-root"></div>
{literal}<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '48439698629',
channelUrl : '//zdig1.biz/channel.html',
status : true,
cookie : true,
xfbml : 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/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>{/literal}
{literal}<script type="text/javascript">
function postArticle()
{
FB.api(
'me/video.watches',
'post',
{
video: "http://zdig1.biz/video/naruto-shippuuden/321-video_f69d2a355.html"
},
function(response) {
if (!response || response.error) {
alert('Post was not published.');
} else {
alert('Post was published. Action ID: ' + response.id);
}
});
}
</script>{/literal}
and the action one
<fb:login-button onlogin = 'postArticle()' perms="email,publish_actions,user_actions.video">
Timeline
</fb:login-button>
or
<fb:add-to-timeline></fb:add-to-timeline>
<form>
<input type="button" value="Publish" onclick="postArticle()" />
</form>
the solution was :
<fb:login-button onlogin='postlike()' perms="email,publish_actions,user_actions.video">Timeline</fb:login-button>

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! ;)

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

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>

How to access the user data in redirected page in Facebook

I have added facebook login button for my website. Code is given bellow,
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
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" data-show-faces="false" data-width="200" data-max-rows="1" scope="user_about_me,user_activities,user_birthday,email" on-login="top.location = 'http://localhost/index.php/';">Login with Facebook</div>
</body>
</html>
When the user click 'login with facebook' button, authentication window is displayed with extended permission. When the user allow to access the details, user is directed to index.php file using
on-login="top.location = 'http://localhost/index.php/';"
Now I want to print all access allowed details such as user name,birthday,etc. in the index.php file
Can anyone please tell me how to do that?
I don't know where you got this on-login attribute for the login button (I couldn't find it), but here's an example of how you can do what you want.
It's not tested, I just created this for you to get the point.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'MY_APP_ID',
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
};
FB.Event.subscribe("auth.login", function (response) {
if (response.status == "connected") {
var userid = response.authResponse.userID;
var signedRequest = response.authResponse.signedRequest;
var expiresIn = response.authResponse.expiresIn;
var accessToken = response.authResponse.accessToken;
// do something with the data.
window.location = "index.php";
}
});
(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" data-show-faces="false" data-width="200" data-max-rows="1" scope="user_about_me,user_activities,user_birthday,email">Login with Facebook</div>
You can read more about subscribing to events here: FB.Event.subscribe, and this thread you might find useful: Get user basic information using facebook Login button plugin?

Facebook Comments Plugin: comment.create and comment.remove don't work for logged in users

When the user is not already logged into Facebook or the page already has a comment, the code executes correctly; however when the user is already logged in and is adding the first comment, comment.create and comment.remove usually don't fire:
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
FB.init({appId: 'FACBOOKAPPID', oauth: true, status: true, cookie: true, xfbml: true});
FB.Event.subscribe('comment.create', function(response) {
alert(response.commentID);
});
FB.Event.subscribe('comment.remove', function(response) {
alert(response.commentID);
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//-->
</script>
<fb:comments href="URL" num_posts="1" width="500"></fb:comments>
Suggestions?
<script>
//INCLUDE THE SCRIPT FIRST
(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/it_IT/all.js#xfbml=1&appId=APP ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//INITIALIZE THE OBJECTS
window.fbAsyncInit = function() {
FB.init({
appId: 'APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//AND THOSE WILL FIRE THE EVENTS :)
FB.Event.subscribe('comment.create',
function (response) {
console.log('create', response);
});
FB.Event.subscribe('comment.remove',
function (response) {
console.log('remove', response);
});
};
</script>
<fb:comments class="fb-comments" href="URL" data-num-posts="2" data-width="630" notify="true" migrated="1"></fb:comments>