Integrating a LinkedIn share button into a website with HTML and JavaScript
Social media platforms have become a crucial part of our daily lives. LinkedIn is a powerful networking tool for professionals, and it's an excellent platform to showcase your work and connect with other like-minded professionals. If you have a website or a blog, it's a good idea to integrate a LinkedIn share button to make it easy for visitors to share your content on their LinkedIn profiles. In this blog post, we'll explore how to integrate a LinkedIn share button into a website with HTML and JavaScript.
Step 1: Create a LinkedIn Developer Account
To use the LinkedIn share button on your website, you need to create a LinkedIn Developer account. Go to the LinkedIn Developer website and sign up for an account. Once you've created your account, you can access the LinkedIn Developer Dashboard.
Step 2: Create a LinkedIn Share Button
Now that you have a LinkedIn Developer account, you can create a LinkedIn share button. The LinkedIn share button is a simple piece of HTML code that you can add to your website.
To create a LinkedIn share button, go to the LinkedIn Share Plugin Generator. You can customize the share button's appearance and functionality on this page. Choose the layout, size, and language of the share button. You can also specify the URL and title of the page you want to share.
Once you've customized the share button to your liking, click on the "Get Code" button to generate the HTML code for the share button. Copy the code and save it to your clipboard.
Step 3: Add the LinkedIn Share Button to Your Website
To add the LinkedIn share button to your website, you need to paste the HTML code you generated earlier into your website's code. You can add the code to any page where you want the share button to appear.
Here's an example of how to add the LinkedIn share button to a web page using HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Add LinkedIn Share Button -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://example.com" data-counter="top"></script>
</body>
</html>
In the example above, we added the LinkedIn share button to the body section of the HTML code. We added two script tags, one for the LinkedIn platform JavaScript code and one for the share button code.
Make sure to replace "https://example.com" with the URL of the page you want to share on LinkedIn.
Step 4: Add JavaScript to Dynamically Change the URL
In the previous example, we hard-coded the URL of the page we want to share in the share button code. If you have a dynamic website, you may want to change the URL of the page based on the user's interaction.
To dynamically change the URL of the page in the share button code, you can use JavaScript. Here's an example of how to do it:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Add LinkedIn Share Button -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="text/javascript">
function shareOnLinkedIn() {
var url = window.location.href;
IN.UI.Share().params({
url: url
}).place();
}
</script>
<button onclick="shareOnLinkedIn()">Share on LinkedIn</button>
</body>
</html>
In this example, we added a button to the web page that triggers the shareOnLinkedIn function when clicked. The function retrieves the current page's URL using the window.location.href property and passes it to the LinkedIn share button using the IN.UI.Share() method.
Make sure to include the LinkedIn JavaScript SDK in the head section of your web page using the script tag before the shareOnLinkedIn() function. This SDK provides the necessary APIs for interacting with the LinkedIn platform.
Step 5: Style the LinkedIn Share Button
By default, the LinkedIn share button uses the LinkedIn brand colors and styles. You can customize the appearance of the button using CSS.
Here's an example of how to style the LinkedIn share button:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
.linkedin-share-button {
background-color: #0e76a8;
color: #fff;
padding: 10px;
border-radius: 5px;
text-align: center;
font-size: 16px;
font-weight: bold;
text-decoration: none;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<!-- Add LinkedIn Share Button -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="text/javascript">
function shareOnLinkedIn() {
var url = window.location.href;
IN.UI.Share().params({
url: url
}).place();
}
</script>
<a href="#" onclick="shareOnLinkedIn()" class="linkedin-share-button">Share on LinkedIn</a>
</body>
</html>
In this example, we added a style tag in the head section of the web page and defined a custom class for the LinkedIn share button. We changed the background color, font color, padding, border radius, text alignment, font size, font weight, text decoration, display, and width properties of the button to match our website's style.
Step 6: Test the LinkedIn Share Button
Once you've added the LinkedIn share button to your website, it's a good idea to test it to make sure it's working correctly. Click on the share button and check that it opens a new window or tab with the LinkedIn share dialog box.
Conclusion
Integrating a LinkedIn share button into your website is an easy and effective way to promote your content and increase your visibility on LinkedIn. By following the steps outlined in this blog post, you can add a LinkedIn share button to your website with HTML and JavaScript. Remember to create a LinkedIn Developer account, generate the share button code, add it to your website, and style it to match your website's design. With a few simple steps, you can encourage your visitors to share your content on LinkedIn and reach a wider audience.