Customizing Linkedin Login Button

2020-02-09 08:47发布

站内问答 / 前沿技术
1771 7 6

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

7条回答
啃猪蹄的小仙女
2楼-- · 2020-02-09 09:22

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>
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
3楼-- · 2020-02-09 09:24

You can do it Like below:

Created own custom button and call the function on it's click (onclick="doLinkedInLogin()"):

<a href="javascript:void(0);"><img onclick="doLinkedInLogin()" src="./img/widget_signin.png"></a>

Now changed my code like below:-

<script type="text/javascript" src="//platform.linkedin.com/in.js">
    api_key:   ********
    onLoad: onLinkedInLoad  //removed this line
   authorize: true
</script>
<script>
    function doLinkedInLogin(){
       IN.User.authorize(function(){
           onLinkedInAuth(); // callback function which will process LinkedIn login 
       });
    }
    function onLinkedInAuth() {
        IN.API.Profile("me").fields("email-address","first-name","id").result(function (data) {
            processLinkedInUserDetails(data); //call function with data as parameter if you want to do some process on data
        }).error(function (data) {
            console.log(data);
        });
    }
    processLinkedInUserDetails = function(data){
        //do your stuff with data
    };
</script>
查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
4楼-- · 2020-02-09 09:28

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>
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
5楼-- · 2020-02-09 09:33

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);
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
6楼-- · 2020-02-09 09:37 
        **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人赞 添加讨论(0) 举报
老娘就宠你
7楼-- · 2020-02-09 09:40

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

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)