How can I add a "Connect with Facebook" link to the header ?

Question

I would like to add a link to Facebook authentication to the header links (to the left of the "login" link, and only visible when the user is not authenticated).

The behavior of the link should be the same as the Facebook button with is currently included in the signin page (together with the Google, Yahoo, etc. buttons).

How can I do that ? Thanks!

Answer 1

You can add the Facebook login button just going to the account login page (for example: http://meta.osqa.net/account/signin/) and copying the javascript code that starts with:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>

And ends with:

<fb:login-button v="2" size="medium" onlogin="FB_ConnectPostAuthorization()">Facebook</fb:login-button>

Then paste it into header.html below this code:

<div id="top">

And surrounded by:

{% if not request.user.is_authenticated %}

and:

{% endif %}

Answer 2

Hi,

thanks for the reply, the problem is that I would like to use my custom buttons. You can see here. And with the facebook label fb:login-button I can not use them.

Right now, I have in header.html:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
<script type="text/javascript">
function Login() {
    var FB_API_KEY = "399ed18491cfdcd6b4cc3a1ec700f200";
    var FB_CHANNEL_PATH = "/xd_receiver.htm";

FB.init(FB_API_KEY, FB_CHANNEL_PATH, {permsToRequestOnConnect : "email"});
    window.location = "/cuenta/facebook/hecho/";
};
</script>

<a id="fb-login" class="fbloginbutton button facebook" title="Entrar con Facebook" onClick="Login();"><strong>Entrar</strong></a>

But It does not work, I get this error in /count/login:

The authentication with Facebook connect failed, cannot find authentication tokens

How can I add a "Connect with Facebook" link to the header ?

Follow this question

Learn more about OSQA

Related questions