How to Create a Custom LinkedIn Share Button

Before the popular social networks popped up, people used to save and share content they care for mainly using the well-known social bookmarking websites. They were not only a great tool for keeping track of the interesting things you find on the web, but also a means for sharing them with your friends and connections. Though some of the biggest bookmarking sites still have large user bases, most of the sharing in today's world is happening on the major social networks.

As the social networking sites such as Facebook, Twitter and LinkedIn became highly popular, web users started to share content that they liked using these platforms. Even though LinkedIn focuses on professional networking, it is still one of the most popular websites in the world, hence a lot of sharing is happening on it too.

Having social sharing buttons on your website is not only a good idea for providing your visitors with an easy way to share your content with their friends and followers, but it is also great for advertising your website for free, with the concept of "online" word of mouth marketing.

In another tutorial, we explained how to add LinkedIn share button to your website in detail, which focused on using the default button code LinkedIn's share button generator tool provided. If you don't need to style your button in a specific way to match your website's layout and style, and if you are fine with the button LinkedIn generates for you, feel free to visit that tutorial and create your share button following the instructions. Otherwise, continue with this tutorial, as we focus on building a custom share button with our own desired styles.

By the way, this page that you are currently reading also has two custom LinkedIn share buttons; one just below the page title, and the other at the end of the page. You can also examine them (and other social networks' buttons) to have a better idea about how custom share buttons work.

How to Add a Custom LinkedIn Share Button to Your Website

In order to place a custom designed LinkedIn share button on your website, you simply need two things. The first one is the correct HTML code for the button and the second one is the CSS style for the button.

Custom LinkedIn Share Button HTML Code

In our tutorial, we will be using a link element (<a>) for creating our button to keep things simple. But you are free to use any element that would make sense (e.g. <button>), as you wish.

The important part is to use the correct target URL for the sharing to work smoothly. If you don't use the correct URL, your visitors will not be able to share your pages on LinkedIn. The following is the URL for the LinkedIn share button:

https://linkedin.com/shareArticle?url=WEBSITE_URL&title=WEBSITE_TITLE

Here is a sample HTML code for a simple -with no styles- LinkedIn share button:

<a href="https://linkedin.com/shareArticle?url=https://www.tutsandtips.com/&title=My Awesome Website" target="_blank">Share on LinkedIn</a>

The target="_blank" attribute is optional, if you want the sharing window to open in a new tab, so that you can keep the visitor on the current page.

Simply add the HTML link element to your page, where you want to display the custom share button.

Custom LinkedIn Share Button CSS Code

The second part of the button is the CSS styles. You are free to use whichever styles and colors you would like to. We will provide just a few sample styles to give you an idea.

We will give an id to the share button first, to better control its styles.

<a id="share" href="https://linkedin.com/shareArticle?url=https://www.tutsandtips.com/&title=My Awesome Website" target="_blank">Share on LinkedIn</a>

Then we will assign some CSS styles:

#share {
  text-align: center;
  display: inline-block;
  width: 180px;
  padding: 5px 0;
  background: #0174b2;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

Feel free to adjust the styles to your preference. The resulting custom share button will look like the following:

Share on LinkedIn

Note that the above button will share this current page on LinkedIn if you click on it and then confirm sharing while logged in to your LinkedIn account.

As you can see, with the help of CSS styles, you can have a custom LinkedIn share button on your website the way you want it to look. To avoid any kind of bad web design, make sure your button is nicely visible and it is clear what it does. Also, remember to use the share button in compliance with LinkedIn plugins terms of use here.

f t g+ in