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

score 25 · Answer 1 · answered Nov 07 '13 at 09:58

25

Other way to do this:

Place an image that you like:

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

Create JS function like this:

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

Use LinkedIn user data:

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

answered Nov 07 '13 at 09:58

Rostik

351
3
6

5

I tried but doesn't work. Custom button open a window that doesn't redirect. Specifically it open: 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 while official button redirect on: https://www.linkedin.com/uas/oauth/authorize?oauth_token=78--607c25d0-68eb-49e8-9b92-85277b5b1c95&state= – Gianluca Demarinis Aug 03 '16 at 09:09
@GianlucaDemarinis you can try my solution once – Alive to die - Anant Sep 26 '18 at 11:30

score 10 · Answer 2 · edited Jul 22 '15 at 19:04

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>

score 0 · Answer 3 · edited Feb 07 '19 at 05:36

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

score -1 · Answer 4 · answered Mar 18 '14 at 10:57

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>

score -1 · Answer 5 · answered Oct 03 '16 at 07:49

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>

Your code is correct, but it doesn't answer the question. – Lohardt Oct 19 '17 at 08:46 — Lohardt, Oct 19 '17 at 08:46

Aniket Upadhye · Answer 6 · 2017-05-19T10:24:44.197

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

            }

Consider explaining a little bit your code, to be helpful for other readers of this site. — HDJEMAI, Apr 21 '17 at 15:31

Customizing Linkedin Login Button

6 Answers6

Linked