How to get Facebook Login Button To Display "Logout" - javascript

I apologize ahead of time if this is clearly documented somewhere on the FB developer site - but I can't find it (so please link me if appropriate).
I've implemented the FB login button on a website using GAE + Python. Here is the HTML:
<fb:login-button></fb:login-button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'ad16a806fc10bef5d30881322e73be68', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
</script>
Currently the behavior is - if I click on the "login" button, I am asked to allow the application access to FB. Which I then choose, "OK". But then the login button is still showing "login" and not "logout". How do I implement that? On the server or client side?

Its not documented on the FB SDK login-button page for some reason, but you can add the autologoutlink="true" attribute to the tag and it will show a logout button if you are logged in rather than just making the button invisible.
<fb:login-button autologoutlink="true"></fb:login-button>
Warning: it will ignore that tag if you are using custom text on the login button like
<!-- This will always display the button, whether you are logged in or out -->
<fb:login-button autologoutlink="true">Login To My Service!</fb:login-button>

Thanks to user "haha" the solution is:
1) Grab the Facebook Python SDK: https://github.com/facebook/python-sdk/tree/master/examples/appengine
2) Implement the HTML example: https://github.com/facebook/python-sdk/blob/master/examples/appengine/example.html
3) Update your main request handler and models: https://github.com/facebook/python-sdk/blob/master/examples/appengine/example.py

This has now been documented at https://developers.facebook.com/docs/reference/plugins/login/ . You may also want to check out onlogin for your callback.

Derek did not mentioned the HTML5 alternative which is he recommended way:
<div id="fbloginbut" scope="user_birthday" onlogin="checkLoginState();" class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true"></div>
The following page will generate the code for the login/logout button that you like the most:
https://developers.facebook.com/docs/plugins/login-button

Related

Custom Facebook share button does not work

Can somebody explain why my custom Facebook share button does not work?
Whenever I click the button it the share window just does not show up.
I've tried it as html file on an actual webserver, and I've read everything in the facebook docs regarding the share button.
When using the same code provided by facebook it does work.
I do get this error though when clicking on the button.
This is my code. (Without the CSS because its a bit more, If you need it I can add it.)
<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1"></script>
<div class="page-header">
<h1>Share Dialog</h1>
</div>
<p>Click the button below to trigger a Share Dialog</p>
<button class="fill" id="fb-share-button">Share on Facebook</button>
<script>
document.getElementById('fb-share-button').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: 'https://nureinberg.de',
}, function(response){});
}
</script>
You need to initialize the FB SDK,
This includes the FB.init function and having the <div id="fb-root"></div> element.
Check out this pen - it works just fine minus the App ID of course, but the popup portion works:
https://codepen.io/xhynk/pen/MVKerM
I also added the version ID to the sdk.js script (https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7)
Try adding a version and the App ID to the JS SDK source:
https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=<your-app-id>
Although, i would recommend using the asynchronous way to load the JS SDK:
https://developers.facebook.com/docs/javascript/quickstart
If you do not want to create an App, use sharer.php with a standard anchor-tag:
https://www.facebook.com/sharer/sharer.php?u=<encoded-url>
Thank you for all your answers. It works now with the following code.
I've also created a codepen for it.
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
cookie : true,
xfbml : true,
version : 'v2.7'
});
FB.AppEvents.logPageView();
};
document.getElementById('fb-share-button').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: window.location.href,
}, function(response){});
}

AmazonPay to redirect on the same page once the customer logded in, using php SDK

Edited
I am trying to implement the amazonPay to my website on checkout. Following their documents, I started writing the code. As of now for testing purpose, I redirect the user to another page once they loggedin with their amazon account and on that page the user are able to see the address and payment methods widgets. Now I want the flow like this: Once user clicks on 'Pay with Amazon' button on 'checkout.php', amazon login window will be pop-up and when the user successfully logged in and if access token is generated, they should redirect to the same page(checkout.php) and they should see the address and payment method widgets on that page only after they successfully logged in. I want to do this as my order details are on that page, so will be easy to get the order reference id from that page.
In index.php
<div id="AmazonPayButton"></div>
<!-- <div id="addressBookWidgetDiv"></div> -->
<!-- <div id="walletWidgetDiv"></div> -->
<script type="text/javascript">
var authRequest;
OffAmazonPayments.Button("AmazonPayButton", "<?php echo $amazonpay_config['merchant_id']; ?>", {
type: "PwA",
color: "Gold",
size: "small",
authorization: function() {
loginOptions = {
scope: "profile payments:widget",
popup: "true"
};
authRequest = amazon.Login.authorize(loginOptions, "checkout.php");
},
onError: function(error) {
// your error handling code
}
});
</script
How can I do this ?
Confirm that the domain the button is being rendered on is whitelisted in your Allowed JS Origins. It's also important to make sure that the protocol matches, http, https, etc, and to confirm that the correct client_id is being used. If you continue to have trouble, reach out to Amazon Pay's merchant support, as they can assist with your specific situation.

How to redirect after payment using PayPal's javascript subscribe button

Here's my script tag:
<script src="/data/js/paypal-button.min.js?merchant=MERCHANT_CODE"
data-button="subscribe"
data-name="Product - 1 Year Subscription"
data-amount="49.99"
data-recurrence="1"
data-period="Y"
data-callback="http://url"
data-cancel_return="http://url"
data-env="sandbox"
></script>
I don't know why and how I should properly do it but I tried with several of PayPal's data attributes like notify, return, return_url and more but nothing seems to work.
I pay and then get on this page:
But no redirect to the callback page, what am I doing wrong please?
Thanks and have a nice day!
Try this:
<script src="/data/js/paypal-button.min.js?merchant=MERCHANT_CODE"
data-button="subscribe"
data-name="Product - 1 Year Subscription"
data-amount="49.99"
data-recurrence="1"
data-period="Y"
data-callback="http://url"
data-cancel_return="http://url"
data-callback="http://yourdomain"
data-return="http://yourdomain"
data-env="sandbox"
></script>
You have to enable Auto Return in your PayPal account. Otherwise it will ignore the return field.
From the documentation:
To set up Auto Return:
Log in and click the Profile subtab under My Account.
Click the Website Payment Preferences link under Selling Preferences.
Click the On radio button to enable Auto Return.
Enter the Return URL. Note: You must meet the Return URL requirements
in order to set up Auto Return. Learn
more
about Return URL.
IPN stands for Instant Payment Notification. It will give you more reliable/useful information than what you'll get from auto-return.
Here is the link to the documentation: https://www.paypal.com/cgi-bin/webscr?cmd=p/mer/express_return_summary-outside

javascript popup window loads parent url

I've been working on a web page where they want the person to sign up for something. As a result, they have an alert window on the page, the person hits the "sign up" button, and the alert window loads with a form.
No big deal about that. However, on the browser page underneath, and on the form on the second stage of signup, there are links to standard disclaimer pages. They want these to be pop up windows when the user clicks on them.
When I was testing it out, in generic form (no user signed in - the page and disclaimers are declared "public" so you don't need to be logged in to see them), it worked fine.
However, if the user is logged in, when you hit the disclaimer links, it instead loads that same "signup" page - the parent page!
I'll post my coding, but what I'm looking for is twofold - is there an easy way to keep other content from loading in that popup?
If not, I'm guessing that it has something to do with that omnipresent signup popup/alert, and as this other content gets pulled in, there's coding that tells it to load any subsequent popups with that same page. Is there some kind of language I should be looking for? It's all very modular, with a lot of includes, to tracking things down can be tricky. Less so if someone has some suggestions, I'd guess.
<script language="javascript" type="text/javascript">
// Popup window code
var popupWindow = null;
function popitup(url2,winName,w,h,t,l,scroll){
settings =
'height='+h+',width='+w+',top='+t+',left='+l+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url2,winName,settings)
}
</script>`
<p>© <%=Year(now)%> <%=usr_Company%> All Rights Reserved.
<a style="color: #898787;" href="info_privacy1.asp" onclick="popitup(this.href,'disclose','700','780','100','200','yes');return false">Privacy Policy</a> | <a style="color: #898787;" href="info_terms1.asp" onclick="popitup(this.href,'disclose','700','780','100','200','yes');return false">Terms of Service</a> <br /><br />
<%=brand_name%> legal disclaimer blah blah blah blah blah.<br /><br />
</p>
</div>
</div>
</body>
</html>
`
You have to let the JS know that the user is signed in. Few ways to do this - AJAX, but more so simply on page load -IDK what you are using - php or whatever, but what it should do is this:
if user is signed in, print out a globav variable to javascript "userSignedIn = 1"
then when the user clicks a link, js checks if userSignedIn is set to 1, and if it is, it will not display the signup window, but continue to the next one, if userSignedin is not set (or is not 1), the signup form will be displayed...

How to call LinkedIn authorize javascript from button

This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});

Categories