2013-08-27 15 views
8

Jestem wykonawczych LinkedIn Zaloguj się do mojej aplikacji internetowej .. używam następujący skrypt jako:Dostosowywanie Linkedin Login Button

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

załadować Znak LinkedIn w przycisku. Ten skrypt automatycznie ładuje przycisk logowania LinkedIn z poprawką lub obrazem ..

, ale chcę dostosować przycisk z moim niestandardowym obrazkiem LinkedIn, a ten przycisk powinien wygenerować zdarzenie logowania do LinkedIn po kliknięciu w niego. powinny służyć przede celu skryptu

plz

+0

Sam

Odpowiedz

8

Tak, jest to możliwe. Jesteśmy przy użyciu jQuery, więc o to nasze rozwiązanie:

<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

Inny sposób to zrobić:

  1. Umieść obraz, który chcesz:

    <a href=""><img onclick="liAuth()" src="./img/widget_signin.png"></a> 
    
  2. Tworzenie funkcji JS tak:

    function liAuth(){ 
        IN.User.authorize(function(){ 
         callback(); 
        }); 
    } 
    
  3. Zastosowanie LinkedIn dane użytkownika:

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

Próbowałem, ale nie działa. Niestandardowy przycisk otwiera okno, które nie przekierowuje. W szczególności jest otwarty: 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 podczas oficjalnego przekierowania przycisku na: https://www.linkedin.com/uas/oauth/authorize?oauth_token=78--607c25d0-68eb-49e8-9b92-85277b5b1c95&state= –

-1

Można użyć własnego niestandardowego kodu HTML tak:

<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

metody przycisku niestandardowego 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

Twój kod jest poprawny, ale nie odpowiada na pytanie. – 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

Rozważ trochę wyjaśnienia swojego kodu, aby być pomocnym dla innych czytelników tej strony. – HDJEMAI