I saw a website today that stated: "Share/Like this site and get 10% discount". I was wondering: is there any way to track when someone shares/likes my site? Can I store some data of that user in my app?
I know those events have some callbacks, and maybe I can trigger some jQuery magic to send some data vía ajax when the user clicks on the button.
Any ideas?
Thanks!
Similar question was discussed here
FB.Event.subscribe('edge.create', function(href)
{
});
From the above code you can get only href not any User details. So I tired the following code
FB.Event.subscribe('edge.create', function (href) {
FB.login(function (response) {
if (response.session) {
//session object has uid & access token.
}
});
});
The Problem you will have from above code is: Since FB.login will open a pop up window for log in, some browsers will block the pop up or warns the user.
I tried the above code. LIKE functionality works and is posted to user's wall, but regarding getting user info:
Firefox (4.0) - did not warn but it asked the user to authorize APP and access basic information. IE 9 - Gave a warning message about POP UP. Google Chrome : Blocked the log in pop up.
It seems the only way to achieve this is let the user login to website using Facebook Connect first and then get user info using
FB.Event.subscribe('edge.create', function (href) {
// href is the URL of the object that got liked
var x;
FB.getLoginStatus(function (response) {
alert(response);
if (response.session) {
}
});
Check out the Facebook developers site. It contains heaps of information.
http://developers.facebook.com/search?q=Events.create
and
http://developers.facebook.com/blog/post/149/
Something like this should do what you need:
<fb:like href="http://www.google.com"></fb:like>
<!-- Like button to whatever object you want^^ -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"
type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
FB.init({
appId: 'APP_ID',
status: true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create', function(href)
{
// href is the URL of the object that got liked
// do whatever magic ajax you want
});
</script>
Related
Is there a way to embed a SoundCloud Follow button on my website so users can Follow the page/channel from the website it self?
Is it possible to have something similar with Vimeo too?
Looks like SoundCloud opened up functionality for "following" via their API
Unfortunately, for the time being, they have closed off new apps from registering with their API... not sure when/if that will open back up.
Thanks to #davidpm4 - got it working with the updated API here
Here is the auth. code for popup:
<script src="https://connect.soundcloud.com/sdk/sdk-3.3.0.js"></script>
<script>
SC.initialize({
client_id: 'YOUR_CLIENT_ID',
redirect_uri: 'http://example.com/callback'
});
// initiate auth popup
SC.connect().then(function() {
return SC.get('/me');
}).then(function(me) {
alert('Hello, ' + me.username);
});
</script>
This is for the callback:
<script src="https://connect.soundcloud.com/sdk/sdk-3.3.0.js"></script>
<script>
SC.initialize({
client_id: 'YOUR_CLIENT_ID',
redirect_uri: 'http://example.com/callback'
});
SC.connect().then(function() {
// Follow user with ID 3207
SC.put('/me/followings/3207').then(function(){
// Unfollow the same user
SC.delete('/me/followings/3207');
});
});
</script>
For SoundCloud, you can customise an icon here – https://soundcloud.com/pages/embed
I was searching all possible topics but now solution works for me.
There is my code, which works in all browsers except Chrome. There is just window with An error occurred. Please try again later..
It is identical code from FB documentation.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : {$appId},
frictionlessRequests: true
});
function sendRequestViaMultiFriendSelector() {
FB.ui({ method: 'apprequests',
message: '{_"FACEBOOK_INVITE_WINDOW_MESSAGE"}'
}, requestCallback);
}
function requestCallback(response) {
//callback code
}
</script>
<a onclick="sendRequestViaMultiFriendSelector(); return false;">
This might be because your application is still in sandbox mode.
You have to specify the display option for the dialog ('popup, 'iframe'...)
For example:
FB.init({
appId : {$appId},
frictionlessRequests: true,
display: 'popup'
});
You have not stated if your application is on Facebook or not. The reason this is important is because of the canvas_url parameter of your application settings. If you are on apps.facebook.com/app_namespace, then you'll already have this field filled out. However some projects simply do not operate on Facebook itself. In such cases people don't really "need" to fill in this parameter. It is however necessary for app requests to work.
When a user acts on an application request (IE accepts it), they are redirected to the canvas url of that application. Not specifying the canvas url can nullify the request. This might also be the reason for the error.
Try setting your canvas url. You can even have it redirect to your proper URL, it doesn't have to "do" anything else.
This is the info on Facebook Login button
http://developers.facebook.com/docs/guides/web/
So it will render a Login button, and a user can click on it to log in on Facebook (a log in window will pop up)
But after the user logs in, even though the Like or Share buttons work now, but the Log in button still shows.
1) Is there a way to redirect to a URL after the user successfully logs in?
2) Another way is to dynamically change the Log in button to invisible or better yet,
show it as "Logged in as [Peter (username)]"
How can (1) and/or (2) be done? (I don't see a callback URL in the Facebook app setting and also the redirection may need to go to different URL from page A or page B on the website)
Update: I found some info about <fb:login-button on-login="top.location = '...'; "> but I see some website doing the redirect but there is no on-login='...'
1) You can also redirect on login using some code like this (note the auth.login event):
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId: '??????????????', cookie: true,
status: true, xfbml: true
});
FB.Event.subscribe('auth.login', function () {
window.location = "http://example.com";
});
</script>
<fb:login-button>
Login with Facebook
</fb:login-button>
2) To determine whether to show or hide the login button, you can use FB.getLoginStatus to discover whether the user is logged in. The following page might be of use: http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
FBML option: This should give you the functionality you want (with xfbml:true in FB.init):
<fb:login-button autologoutlink="true" onlogin="OnRequestPermission();">
</fb:login-button>
When the user is logged in, it changes to "Log Out." Also, if the user has not granted permissions to the app, it pops-up the request permission dialog.
Custom option: If you don't like using FBML, you can make your own Facebook login button like this:
HTML:
<button id="THE_BUTTON">Login</button>
Javascript:
FB.init({appId: 'YourAPPID', status: true, cookie: true, xfbml: true, oauth : true});
FB.getLoginStatus(function(response) {
if (response.status.toString().indexOf("connected")>-1) {
initAll(); //User is connected and granted permissions
FB.api("/me", function (response) {
document.getElementbyId("THE_BUTTON").value =
"Logged in as " + response.name;
});
} else {
// This URL is specially formed to ask permissions for your app. You change the
// permissions and your appID
//redirect_uri = Change this to your desired callback URL
top.location=window.location="http://www.facebook.com/dialog/oauth/?scope=read_stream,publish_stream,friends_photos,friends_activities&client_id="yourAPPID(nobrackets)"&redirect_uri=http://apps.facebook.com/filtered_feed/&response_type=code";
}
});
So if the user is logged in, the button will be replaced with "Logged in as user's name." Otherwise, the OAuth Dialog will appear.
I've integrated facebook login with my application and I want to logout the user from facebook when he logs out of my application. So I did the following:
Logout
This works on Firefox and Chrome but doesn't work on IE8. In IE8 the user is logged out of the application but is not logged out of Facebook.
Anyone else experiencing this?
Please try this one
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script language="javascript" type="text/javascript">
FB.init({
appId: '205734987138498',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
oauth: true // enable OAuth 2.0
});
function handleSessionResponse(response) {
// FB.XFBML.parse();
}
FB.getLoginStatus(handleSessionResponse);
//////you can optionally put the following in a seprate js file/////////
var Facebook = {}
Facebook.signout = function (url) {
FB.logout();
setTimeout('top.location.href = "' + url + '"', 2000);
}
</script>
<div onclick="Facebook.signout('http://www.uamplify.com');">Call your logout function now, click here</div>
I found the exact same thing and also with the Android browser. Shahid's fix worked for me and then I realized another approach would be to put the redirect within the callback function like this:
function mysignout(url)
{
FB.logout(function()
{
top.location.href = 'url'
});
}
If you're like me, you probably figured FB.logout is just destroying a cookie or something but it appears to make some ajax calls (I guess to revoke authentication on the server) and has different execution times, especially on mobile devices using wireless networks.
2000 ms might not necessarily be enough time for the function to complete, or it could be more than necessary. The callback function executes once FB.logout has completed in every case.
I'm trying to integrate Facebook connect to my website. The login button appears and i'm able to login. The profile picture and the name is displayed properly. However when I try adding the code FB.Connect.ifUserConnected, I get a error message saying FB.Connect is not defined.
This is what I'm doing
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({ appId: 'my app id', status: true, cookie: true, xfbml: true });
</script>
<fb:login-button onlogin="fb_login()"></fb:login-button>
<script>
function fb_login() {
$("#SocialConnectButtons").hide();
$("#UserProfile").show();
FB.XFBML.Host.parseDomTree();
}
//ALL UNTIL HERE WORKS AS EXPECTED, BUT THE FOLLOWING LINE FAILS
FB.Connect.ifUserConnected(fb_login);
</script>
Thanks for the help
Here is a good tutorial to get started with new API for facebook connect.
You are using the new Graph API (http://connect.facebook.net/en_US/all.js)
The code you wrote will not work. Check the Graph API javascript SDK here: http://developers.facebook.com/docs/reference/javascript/
and for the API itself:
http://developers.facebook.com/docs/reference/api/