2013-08-27 55 views
8

我執行LinkedIn登錄到我的web應用.. 我用下面的腳本爲:定製LinkedIn登錄按鈕

<script type="in/Login"> </script> 

加載LinkedIn登錄按鈕。此腳本自動加載帶有修復設計或圖像的LinkedIn登錄按鈕。

但我想用我自定義的LinkedIn圖像自定義按鈕,並且此按鈕應該在點擊它之後生成LinkedIn登錄事件..即它應該符合上述腳本的用途

Plz幫助

+0

方法 Sam

回答

8

是的,這是可能的。我們使用jQuery,所以這裏是我們的解決方案:

<script type="text/javascript" src="http://platform.linkedin.com/in.js">  
    api_key: apikey  
    onLoad: onLinkedInLoad authorize: true 
</script> 

<script type="text/javascript">  
    function onLinkedInLoad() {  // Use a larger login icon. 
    $('a[id*=li_ui_li_gen_]').css({marginBottom:'20px'}) 
     .html('<img src="/images/shared/linkedin-register-large.png" height="31" width="200" border="0" />');  
    } 
</script> 
19

其他方式做到這一點:

  1. 地方,你喜歡的圖片:

    <a href=""><img onclick="liAuth()" src="./img/widget_signin.png"></a> 
    
  2. 創建JS功能像這樣:

    function liAuth(){ 
        IN.User.authorize(function(){ 
         callback(); 
        }); 
    } 
    
  3. 使用LinkedIn的用戶數據:

    IN.API.Profile("me") 
        .fields("firstName", "lastName", "headline") 
        .result(resultFunction); 
    
+5

我試過了,但不起作用。自定義按鈕打開一個不重定向的窗口。具體來說,它打開:https://platform.linkedin.com/js/xdrpc.html?v=0.0.2000-RC8.57445-1429#mode=popup-wait&target=easyXDM_IN_Lib_li_gen_1470215382764_2_provider 而官方按鈕重定向上:https:///www.linkedin.com/uas/oauth/authorize?oauth_token=78--607c25d0-68eb-49e8-9b92-85277b5b1c95&state= –

-1

您可以使用自己的自定義HTML代碼:

<html> 
<head> 
<title>LinkedIn JavaScript API</title> 

<script type="text/javascript" src="http://platform.linkedin.com/in.js"> 
    api_key: put_your_api_key_here 
</script> 

<script type="text/javascript"> 

    function onLinkedInLoad() { 
     IN.UI.Authorize().place();  
     IN.Event.on(IN, "auth", function() { onLogin(); }); 
     IN.Event.on(IN, "logout", function() { onLogout(); }); 
    } 

    function onLogin() { 
      IN.API.Profile("me").result(displayResult); 
    } 
    function displayResult(profiles) { 
     member = profiles.values[0]; 
     alert(member.id + " Hello " + member.firstName + " " + member.lastName); 
    } 
</script> 

</head> 
<body> 
    <input type="button" onclick="onLinkedInLoad()" value="Sign in using LinkedIn account" /> 
</body> 
</html> 
-1

定製LinkedIn按鈕

<div onclick="liAuth()">sign in with linkedin</div> 

<script type="text/javascript" src="//platform.linkedin.com/in.js"> 
    api_key: YOUR_API_KEY_HERE 
    authorize: true 
    onLoad: onLinkedInLoad 
</script> 

<script type="text/javascript"> 
    function liAuth(){ 
     IN.User.authorize(function(){ 
     }); 
    } 
    // Setup an event listener to make an API call once auth is complete 
    function onLinkedInLoad() { 
     IN.Event.on(IN, "auth", getProfileData); 
    } 

    // Handle the successful return from the API call 
    function onSuccess(data) { 
     console.log(data); 
    } 

    // Handle an error response from the API call 
    function onError(error) { 
     console.log(error); 
    } 

    // Use the API call wrapper to request the member's basic profile data 
    function getProfileData() { 
     IN.API.Raw("/people/~").result(onSuccess).error(onError); 
    } 

</script> 
+0

你的代碼是正確的,但它沒有回答這個問題。 – Lohardt

-1
 **LinkedIn Customize button onclick function you can call linked in login function** 

     <!-- language: lang-html --> 

      <script type="text/javascript" src="http://platform.linkedin.com/in.js"> 
       api_key: Your App Key //add your linkedIn aap key here 
       authorize: true 
      </script>  

      //create your customized linkedIn button with css 
      <div id="wLinkedIn"> 
      // use onLinkedInLoad onclick function in customized button 
      <a href="#" onclick="onLinkedInLoad();"> 
       <span id="icon-bg"><i class="fa fa-linkedin"></i></span> 
       <span id="icon-label-bg">Login with LinkedIn</span> 
      </a> 
      </div> 

     <!-- language: lang-js --> 

      // ----------------------------LinkedIn Sdk--------------------- 

      function onLinkedInLoad() { 
       IN.UI.Authorize().place(); 
      // call onLinkedInLogin on click of button 
       IN.Event.on(IN, "auth", function() { onLinkedInLogin(); }); 

       //IN.Event.on(IN, "logout", function() { onLinkedInLogout(); }); 
      } 

      function onLinkedInLogin() { 
       //alert('logged in'); 
      //get all user data from linked in plugin 
       IN.API.Raw("/people/~:(id,firstName,lastName,emailAddress)format=json").result(function (data) 
      { 
        console.log(data); 

        var profileData = data; 
        LinkedInFName = profileData.firstName; 
        LinkedInLName = profileData.lastName; 
        LinkedInEmail = profileData.emailAddress; 
        LinkedInId = profileData.id; 
        //alert("LinkedInFName : " + LinkedInFName); 

        GetLinkedinLoginDetails(LinkedInEmail, LinkedInId) 
       }).error(function (error) { 
        console.log('Error : ' + error); 
       }); 
      } 

      function onSuccess(data) { 

      } 
+0

考慮解釋一下你的代碼,對本網站的其他讀者有所幫助。 – HDJEMAI