Customizing Linkedin Login Button

Question

I'm implementing LinkedIn Login into my web app.. I'm using following script as :

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

to load the LinkedIn Sign In button. This script automatically loads a LinkedIn Sign in button with fix design or image..

but I want to Customize a button with my custom Image of LinkedIn and this button should generate the LinkedIn login event after clicking on it.. that is it should serve above script's purpose

Plz Help

Answer 1

Yes, it's possible. We're using jQuery, so here is our solution:

<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>

Answer 2

Other way to do this:

1. Place an image that you like:

   <a href=""><img onclick="liAuth()" src="./img/widget_signin.png"></a>
   

2. Create JS function like this:

   function liAuth(){
      IN.User.authorize(function(){
          callback();
      });
   }
   

3. Use LinkedIn user data:

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

Answer 3

Under the head tag

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

    <a href="javascript:void(0)" class="btn btn-default btn-linkedin" onclick='call_linkedin()'> 
            <i class="fa fa-linkedin-square" aria-hidden="true"></i> <span>Sign In With LinkedIn</span> </a>

    <script type="text/javascript">
    function call_linkedin() {

        if(IN.User.authorize()){
                   getProfileData();
                }else{  IN.Event.on(IN, "auth", function() {getProfileData();});}
    }

    // Use the API call wrapper to request the member's profile data
    function getProfileData() {
        IN.API.Profile( "me" ).fields( "id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address" ).result( displayProfileData ).error( onError );
    }

    // Handle the successful return from the API call
    function displayProfileData( data ) {
            console.log(data)
}
</script>

Please try this and let me know

Answer 4

        **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) {

            }

Answer 5

You can use your own custom html code like this:

<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>

Answer 6

method for custom linkedin button

<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>