How To Add LinkedIn Share Button To WordPress

With the LinkedIn Share Button having been released many of you will be wanting to add it to your wordpress site. We put together this post to clearly explain and show you several ways via plug-ins and manually inserting the LinkedIn button code into your wordpress sites theme files for those of you who don’t like to use lots of plug-ins on your wordpress install.

WordPress LinkedIn Share Button Plug-in

Adds a LinkedIn share button to posts and pages, allowing your visitors to easily and quickly share your content with their LinkedIn network.

The plug-in settings allow you to choose whether to display on:

• posts
• pages
• posts on the home page
• posts in archive listings
• posts in search results

You can also specify whether to display inline, float left or right, and show at the top or bottom of the post. You can display the button automatically, or choose to add it on a per post basis, or a mixture of both.

WordPress LinkedIn Button

Manually Add LinkedIn Share Button Plugin To WordPress

We will explain below how to install the LinkedIn Share Button onto your wordpress site without the use of plug-ins along with detailing what the actual code for the button does and where best to place it. To manually add the LinkedIn Share Button you will need a text editor as we are going to be editing some wordpress theme files to acheive the integration.

First off lets run through the available code snippets for each LinkedIn Share Button style.

1) The default code for the simple horizontal LinkedIn submit button only without the submission count is shown below.

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="in/share"></script>

2) The default code for the horizontal LinkedIn submit button showing the submission count is shown below.

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
<script type="in/share" data-counter="right"></script>

3) The default code for the large vertical LinkedIn submit button showing the submission count is shown below.

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
<script type="in/share" data-counter="top"></script>

4) The default code for the large vertical LinkedIn submit button showing the submission count along with using a custom URL is shown below. NOTE: all buttons have the ability to share a specified custom submission URL we have only however displayed the code snippet for the large button as an example.

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
<script type="in/share" data-url="http://yourcustomurl.com" data-counter="top"></script>

By looking at the code snippets above you will notice subtle differences between each one which ultimately achieves their desired layout. Below we will explain what each important setting does within the button script.

The code below loads the JavaScript required by the share button from LinkedIn.

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>

The Code below is the actual button display script.

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

If you add the code below data-counter=”right” your button will display the slim horizontal button with the share count.

<script type="in/share" data-counter="right"></script>

If you add the code below data-counter=”top” your button will display the large vertical button with the share count.

<script type="in/share" data-counter="top"></script>

If you add the code below data-url=”yourcustomurl.com” your button it will show the shares for the URL that you have copied into the button code. to specify your own URL replace yourcustomurl.com with the url you want the button to count shares for.

<script type="in/share" data-url="http://yourcustomurl.com"></script>

okay now we have an clear idea of what each part of the button code does lets move on and add a large vertical button that automatically grabs the url of the page from inside your template files.

The first thing we want do is open your wordpress themes footer.php and find the code below. It should be at the very bottom of the file.

</body>
</html>

Above the body tag copy and paste the code below into your footer.php file. We are placing this code in the footer so the JavaScript loads after the page as this can help with page load times.

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>

Next we must insert the actual button display code into your template file to display on wordpress post pages. The code snippet below if placed for example in your single.php will display a large vertical button that shows your articles share count. It also already has the code to fetch your sites permalink to that specific article dynamically.

<script type="in/share" data-url="<?php the_permalink() ?>" data-counter="top"></script>

All done? You should now have manually added the LinkedIn Share Button to your wordpress theme.

LinkedIn Button Homepage