0

How can I customize the LinkedIn sign in button? The default LinkedIn button is small. I have tried the codes in here, but I couldn't get it to work.

My code:

<script type="text/javascript" src="//platform.linkedin.com/in.js">
    api_key: #my key
    onLoad: onLinkedInLoad
</script>

The button: 

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

The script:

// 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) {
    var linkedInData =  JSON.stringify(data);
    logIn(linkedInData)
}

// 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);
}

function logIn(data){
  $.ajax({
        type: "POST",
        url: URL_POST_AJAX,
        data: {
            'data' : data,
          },
        success: function (response) {
           window.location.href = response.next_page;
        },
        error: function (data) {
            alert('failed');
        }
    });}

// CSRF code
function getCookie(name) {
    var cookieValue = null;
    var i = 0;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (i; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
Community
  • 1
  • 1
Huy Than
  • 1,538
  • 2
  • 16
  • 31
  • In the question you linked to, someone modified it during the `onLinkedInLoad` function. Have you tried that? Post the code that you tried. – Mike Cluck Jul 26 '16 at 22:24
  • You mean this one? I tried this but the button did not show up. – Huy Than Jul 27 '16 at 20:49
  • I made it, thank you Angel Politis! – Huy Than Jul 27 '16 at 21:42
  • Sorry, I meant to thank Mike C. – Huy Than Aug 03 '16 at 00:08

1 Answers1

0

Thanks to the help of Mike C, I have found the solution: 

   function onLinkedInLoad() {
    IN.Event.on(IN, "auth", getProfileData);
    $('a[id*=li_ui_li_gen_]').css({marginBottom:'20px'})
   .html('<img src="/linkedin_signin_large.png" height="31" width="200" border="0" />');
}

P.S : Thank you Angel Politis for editing my question :)

Huy Than
  • 1,538
  • 2
  • 16
  • 31