Integrating LinkedIn API for Professional Networking

Use the LinkedIn API to create a tool for frontend developers to enhance their professional network, exposing them to opportunities that could lead to higher pay.

<!DOCTYPE html>
<html>
<head>
    <title>LinkedIn Professional Network Enhancer</title>
</head>
<body>
    <button id="linkedin-auth">Authenticate with LinkedIn</button>
    <script src="https://platform.linkedin.com/in.js" type="text/javascript">
        api_key: YOUR_API_KEY_HERE
        authorize: true
        onLoad: onLinkedInLoad
    </script>
    <script>
        function onLinkedInLoad() {
            // Setup an event listener to handle the authentication
            document.getElementById('linkedin-auth').addEventListener('click', function() {
                IN.User.authorize(function() {
                    console.log('User authorized');
                });
            });
        }

        function onLinkedInAuth() {
            IN.Event.on(IN, 'auth', function() {
                getProfileData();
            });
        }

        function getProfileData() {
            IN.API.Raw('/people/~:(id,firstName,lastName,headline,picture-url,public-profile-url,email-address)').result(function(data) {
                console.log(data);
                // Here we would typically send the data to our server or otherwise handle it.
            });
        }
    </script>
</body>
</html>

This HTML code integrates LinkedIn authentication on a webpage. Once an API key is provided, users can authenticate with LinkedIn by clicking a button, which will allow the site to retrieve their professional profile information using the LinkedIn API. Note that 'YOUR_API_KEY_HERE' needs to be replaced with an actual API key obtained from LinkedIn.

/* Add your custom CSS here */
#linkedin-auth {
    background-color: #0077b5;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#linkedin-auth:hover {
    background-color: #005983;
}

This CSS code styles the 'Authenticate with LinkedIn' button to match LinkedIn's brand color and improves the visual appearance with a hover effect.