在服務器端實現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登錄圖像

回答

相關問題