I'm creating a facebook app that should show content only to fans of a certain page. I can easily get the info whether the user is a fan of the page or not using FQL and want to display a Like Box or a Like Button if the user is not already a fan. After the user clicked onto Like, I'd like to display the content that is visible for fans only.
So here's my question: Is it possible to react when the user clicks "Like"? I've tried onclick, but it didn't work.
Here's the code of my Like Box:
<div class="fb-like-box" data-href="https://www.facebook.com/myFanPage" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false" onclick="alert('TEST');"></div>
And the one for the Like Button:
<div class="fb-like" data-href="https://www.facebook.com/myFanPage" data-layout="standard" data-action="like" data-show-faces="true" data-share="false" onclick="alert('TEST2');"></div>
Thanks very much!
Yes, possible using FB.Event.subscribe() and XFBML
HTML:
<fb:like href="{Herf}" width="450"></fb:like>
JS:
window.fbAsyncInit = function() {
FB.init({
appId: '{appID}',
status: true,
xfbml: true
});
// FB event listener
FB.Event.subscribe('edge.create', function (url) {
console.log('You liked the URL: ' + url);
});
};
DEMO
Related
I have a https website with a facebook like button on it. I'm already tracking events and integrating them into google analytics. I would like to be able to add a redirect as well once someone clicks on the like button and posts to facebook. My facebook button is set up with the following:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
And the facebook like button code is as follows:
<fb:like style="float: left; margin: 1px 10px 0 0;" href="<?php echo $share_url;?>" send="false" layout="box_count" width="65" show_faces="false" font="verdana"></fb:like>
<script type="text/javascript">
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackSocial', 'Facebook', 'Like', href]);
_gaq.push(['_trackEvent', 'Social Shares', 'Facebook Like', href]);});
FB.Event.subscribe('edge.remove', function(href, widget) { _gaq.push(['_trackSocial', 'Facebook', 'Unike', href]); });
</script>`
Is there anyway I can add a redirect to this and still be able to track clicks with google analytics?
Just add window.location = 'URL YOU WANT' after your GA code in the subscribe callback.
Example:
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackSocial', 'Facebook', 'Like', href]);
_gaq.push(['_trackEvent', 'Social Shares', 'Facebook Like', href]);
window.location = 'URL HERE';
});
Sorry about that, I assumed that the callback was after completion.
Much more complicated but working solution:
The regular 'like' button does not have a callback function for when the person actually finishes in the dialog box. Luckily you can create a custom dialog using FB.ui. You will have to create a FB app for your domain.
I modified and tested their example code to use a redirect instead of an alert box.
<div id='fb-root'></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<a id="link" href="#">Post to Feed</a>
<script>
FB.init({appId: "000000000000000", status: true, cookie: true}); //You'll need to insert your appId.
$('#link').click(function(){
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
window.location = "http://www.google.com"
} else {
// Do something else here if they do not post.
}
});
return false;
});
</script>
Well after plucking away at this for a while now and much frustration I was able to get a solution that worked. I ended up creating my own app and using the direct url feed dialog method
https://developers.facebook.com/docs/reference/dialogs/feed/
to create a dialog app and added an onClick event for GA tracking and redirecting. In the end my facebook buttons link looks something like
Post This
Wasn't exactly what I had originally planned on and this is not using "Likes", but instead "Posts" or "Shares". However, it does work great. I would like to thank Marcelo for pointing me in the right direction.
I have "simple facebook connect" plugin on a wordpress blog and have integrated the comments and like button onto my website about a month ago. I noticed today however that neither the like button nor the comments load anymore, the last time I know for sure I saw them was 3 days ago.
I haven't changed anything and it doesn't seem like the site it banned (no reason to, it shows up in my developer page on facebook, and doesn't say this site is blocked).
Here is the code for the like button:
<fb:like href="http://extremesnowboardingvideos.com/2011/11/24/video-compilation-of-extreme-snowboarding/" send="false" layout="standard" show_faces="true" width="450" height="65" action="like" colorscheme="light" font="lucida+grande"></fb:like>
You need to add the Facebook Javascript library to your pages and call FB.init
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
if ( FB && FB.init ){
FB.init( {
appId: '<your-app-id>',
status: true,
cookie: true,
xfbml: true
});
}
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = "http://connect.facebook.net/en_US/all.js";
document.getElementById('fb-root').appendChild(e);
}());
</script>
Or use plugins such as WordPress Connect - http://wordpress.org/extend/plugins/wordpress-connect/
Currently I have the following button, when using facebook javascript:
and I want to get this one:
What should I change?
Currently the way I did this is using the following code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
With Facebook PHP-sdk you can replace it with any button or icon
<?php if ($me) { ?>
<img src="logout-image.png">
<?php } else { ?>
<img src="login-image.png">
<?php } ?>
Or http://fbrell.com/xfbml/fb:login-button
For that particular button, you will have to include the image yourself and bind the functionality with one of the SDKs available:
http://developers.facebook.com/docs/sdks/
I personally prefer using the JS SDK to open the login prompt.
You can use regular login button, which is the approach that #MNVR has described in his answer.
Just replace the text "Login With Facebook" with "Connect With Facebook" in your login button code. Or use the below code.
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<fb:login-button>Connect with Facebook</fb:login-button>
<script>
FB.init({
appId: '123456',
cookie: true,
status: true,
xfbml: true
});
</script>
Customer can sign in to my web app via normal login and facebook connect. So far so good.
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button> <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<xsl:value-of select="$FACEBOOK_APP_ID" />', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
But when they come to logout, I want the customer to click on the logoff link at my website. How can I programmatically logout facebook connect? Possibly via json backend?
I don't want customer to click facebook button to logoff.
I did try out with some ways, example: to reset the facebook connect cookie created at my website and it works, but when I try to login to facebook again at second time, it fails.
I know delete cookie logout is simply not clean (fb autologoutlink=true is still showing I haven't logout.)
I can't let customer to click logout twice, I want them to use my web app logout link as a single logout controller.
I am using ASP classic. Any solution?
If the user has logged in via Facebook, call this JS snippet when the user logs out of your site (depending on how you implement logout, one possible way is to use onclick="", or if you redirect to the "logged out" template, include it there):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true});
FB.logout(function(response) {});
};
(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>
You can use this simple code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APPID HERE', cookie:true,
status:true, xfbml:true
});
</script>
and this:
<fb:login-button autologoutlink="true" length="short" background="white" size="large" data-show-faces="true" perms="email,user_birthday,status_update,publish_stream">Login with Facebook</fb:login-button>
I have an iframe Facebook application (using Facebook's new JavaScript API) that needs to allow the user to invite their friends to the app after entering a contest. I have the following markup in a div on the page (application name and Canvas Url redacted):
<fb:serverFbml>
<fb:request-form
method="POST"
invite="true"
type="{Name of My Application}"
content='Your text goes here. %3Cfb%3Areq-choice%20url%3D%{a url-encoded link to my Canvas URL}"/>'
label="Authorize My Application">
<fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use My Application.">
</fb:multi-friend-selector>
</fb:request-form>
</fb:serverFbml>
From what I understand, if you need to use FBML tags in an XFBML/iframe app, you just drop them into an fb:serverFbml element and Facebook takes care of it. Sure enough, my first impressions seem to be false. Instead of dropping in the form, I just get an empty white box, with the fbml seemingly untouched.
The design of this application assumes (probably incorrectly) that I don't need to authenticate the user to let them invite their friends. Is there a way to accomplish this, or do I need to require them to log in first? Facebook's documentation is (of course) vague on this.
EDIT: My FB.init() as requested:
$("body").prepend("<div id=\"fb-root\"></div>");
FB.init({
apiKey: "{My apiKey is here}",
appId: "{My appId is here}",
status: true,
cookie: true,
xfbml: true
});
Ok, I got it to work. Here is how it looks for me :
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action='my_url' method='POST'
invite='true'
type='Poll'
content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" /> '>
<fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
and the JS injection code looks like this :
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR APP ID HERE',
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>
So,
1) You dont need your APP KEY, only your APP ID in the JS code.
2) The XFBML needs to be wrapped inside a SCRIPT tag.
This example works too:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action='my_url' method='POST'
invite='true'
type='Poll'
content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" /> '>
<fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Set APP_ID in http://connect.facebook.net/en_US/all.js#appId=[APP_ID]&xfbml=1