在服务器端实现Facebook登录图像

我怀疑这有一个简单的答案，但是因为我被困住了，让我把它扔到那里。在服务器端实现Facebook登录图像

我正在为网站实施“使用Facebook登录”功能。 Facebook允许在服务器或客户端执行大部分工作。我们选择了前者。

所以，一个用户点击发起的登录链接看起来像：

https://www.facebook.com/dialog/oauth? 
    client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream

我简单的问题：我希望用户点击图片熟悉的“与Facebook登录”即可针对此URL。自启动基于JavaScript的身份验证和登录后，我无法使用<fb:login-button>。所以，基本上，我希望有一个链接，看起来像：

<a href="https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream"><img Login with Facebook image goes here /></a>

如何获得的图像在我的服务器端实现的链接？或者，如果我希望Facebook自动生成图像，我是否需要使用<fb:login-button>来处理客户端上的登录？（顺便说一句，我使用Ruby on Rails 2.3.5。）

来源

2011-02-16 Bobby Mohan

有没有人发现同时解决方案？ – 2011-09-26 13:17:56

这是一个合理而合乎逻辑的问题，但Facebook不提供解决方案:( – Burjua 2011-09-29 14:28:32

我使用一个简单的href链接来登录Facebook，然后我使用一些CSS来放置图像按钮，我喜欢或者也许你可以使用图像链接为allways。

<div class="signupBtn"><a href="<?php echo $loginUrl; ?>"><span>Enter</span></a></div> 

<a href="<?php echo $loginUrl; ?>"> <img src="your image here"> </a>

$ loginUrl它会为你建立网址，如果你使用facebook php sdk。

来源

2011-02-26 03:59:44

你必须手动输入Facebook登录按钮。 Facebook不提供用于手动登录按钮的图像按钮。您可以从该网站获得的Facebook登录按钮：

- login_button

他们有一个像你一样的功能。

<a href="https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID& 
redirect_uri=YOUR_URL&scope=email,read_stream"><img class='facebookLoginBtn'/></a>

并复制它们的CSS和图像。

来源

2012-01-08 06:27:33

您应该使用自己的图像（或其他标记）来表示登录按钮或使用Facebook logos from "Brand Permissions Center"之一。

还有另一种选择太......如果包括网页JS-SDK，可以用下面的标记来获得一个按钮，看起来完全像在Login Button社交插件：

<a class="fb_button fb_button_small"> 
    <span class="fb_button_text">Log In</span> 
</a>

更新： 使用自定义标记而不是fb:login-button肯定会需要额外的工作。

有关按钮文本的翻译，你可以使用Facebook internationalization，gettext或任何其他技术/技术，你熟悉...

关于验证你所需要的肯定添加href属性指向OAuth Dialog（对于服务器端流程，你已经有了这个问题本身）或者绑定将会调用FB.login（用于客户端流程）的JavaScript单击事件。

来源

2012-01-08 06:46:17

这是一个很好的答案，但它不允许将按钮文本翻译成其他特别提到的语言。 – 2012-01-13 13:53:24

你可以试试这个

在HTML：

<a href="javascript:void(0)" onclick="facebookLogin()"> 
    <img Login with Facebook image goes here /> 
</a>

在Javascript中：

function facebookLogin() { 
    FB.init({ appId: 'AppId ', xfbml: true, cookie: true, frictionlessRequests: true }); 
    FB.login(function (response) { 
     if (response.authResponse) { 
       //Login 
     } 
     else { 
       //Not Login 
     } 
    }, { scope: 'email' });  
}

来源

2012-01-11 13:12:14 Hiyasat

这是一个有点尴尬，但我知道处理这一点的最好办法是使用<fb:login-button>生成按钮，然后使用css直接在其上面放置一个空div。然后，您可以附加onclick处理程序的div将重定向到您选择的网址。 div的大小需要预先确定大小，大概是事先不知道的按钮的高度和宽度，但是你可以选择“足够接近”，或者做一些javascript来动态设置div的大小该按钮被渲染。在大多数情况下，登录按钮不会与其他元素重叠，因此没有人会注意到可点击区域比按钮本身大一点。

编辑：一些代码示例可能会使这个更清晰。首先，固定大小的版本，这将很可能在大多数情况下工作：

<div style="position:relative"> 
<fb:login-button></fb:login-button> 
<div style="position:absolute;left:0;top:0;width:70px;height:20px;cursor:pointer" onclick="location.href='https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream'"></div> 
</div>

，也是一个动态的尺寸版本，这应该工作，但并没有在所有的浏览器进行了测试：

<span style="position:relative"> 
<fb:login-button></fb:login-button> 
<a href="https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream"><span style="position:absolute;width:100%;height:100%;left:0;top:0;font-size:200px;overflow:hidden">&nbsp;</span></a> 
</span>

来源

2012-01-13 13:42:40

在服务器端实现Facebook登录图像

回答

相关问题