Facebook登錄圖像在服務器端實現

Question

我懷疑這有一個簡單的答案，但是因為我很難過，讓我把它扔出去。

我正在為網站實施“使用Facebook登錄”功能。 Facebook允許在服務器或客戶端進行大部分工作。 我們選擇了前者。

因此，用戶單擊以啟動登錄的鏈接如下所示：

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

我的簡單問題：我希望用戶點擊熟悉的“使用Facebook登錄”圖像來定向到此URL。 我無法使用<fb:login-button>因為它啟動了基於javascript的身份驗證和登錄。 所以，基本上，我想要一個看起來像這樣的鏈接：

<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>處理客戶端<fb:login-button> ？ （順便說一下，我正在使用Ruby on Rails 2.3.5。）

Answer 1

您應該使用自己的圖像（或其他標記）來表示登錄按鈕，或使用“品牌權限中心”中的某個Facebook徽標 。

還有另一種選擇......如果你在頁面上包含JS-SDK，你可以使用以下標記來獲得一個看起來與Login Button社交插件中的按鈕完全相同的按鈕 ：

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

更新：使用自定義標記而不是fb:login-button將需要額外的工作。

對於按鈕上的文本翻譯，您可以使用Facebook國際化 ， gettext或您熟悉的任何其他技術/技術......

關於Auth，您需要確保添加指向OAuth Dialog的 href屬性（對於服務器端流程。您已經有問題本身）或綁定將調用FB.login JavaScript單擊事件（對於客戶端流程） 。

Answer 2

你必須手動放置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和圖像。

Answer 3

你可以試試這個

在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' });    
}

Answer 4

這有點尷尬，但我知道處理這個問題的最好方法是使用<fb:login-button>生成按鈕，然后使用css將空div直接放在它上面。 然后，您可以將onclick處理程序附加到將重定向到您選擇的URL的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>

Answer 5

我使用一個簡單的href鏈接來登錄Facebook，然后我使用一些CSS來放置我喜歡的圖像按鈕，或者你可以使用圖像鏈接作為總是。

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

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

如果你使用facebook php sdk，$ loginUrl會為你建立網址。