How to add Pinterest to WordPress plugin Sharebar?

Recently I started using Pinterest and mostly use it to ‘repin’ the pins other people made. Lately I wanted to created my own pins, but was missing the option in the WordPress plugin Sharebar to pin a blog post directly. Below I will describe how to add Pinterest to WordPress Sharebar plugin, so people can easier share your posts on Pinterest.

How to add Pinterest to WordPress share button in Sharebar plugin?

In order to add the buttons I used the Goodies page of Pinterest. There you can modify several buttons which you can use on your blog to use the ‘pin it’ button so visitors can pin your post, image, etc. to Pinterest.

1. Open WP Admin and navigate to Settings–> Sharebar;
2. Click the ‘add new button’ button;
3. Fill in the following details for the large/small button.
1. Name: Pinterest
2. Position: 3

And for the ‘big button’ section you can add the following code:

[php]<a href="http://pinterest.com/pin/create/button/?url=[url]&description=Nice blogpost about [title] by [author]" count-layout="vertical">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>[/php]

For the ‘small button’ you can use the following code:

[php]<a href="http://pinterest.com/pin/create/button/?url=[url]&description=Nice blogpost about [title] by [author]" count-layout="none">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>[/php]

Advanced features to add to the Sharebar plugin

The above should do the trick on most of the pages, but sometimes you want to force the image being used on Pinterest for your article. When you would like to do that you need to modify the Sharebar plugin as they do only support the [url], [title], [author] and [_twitter] tags in their plugin. In order to retrieve the thumbnail of the featured image I added the following code to the plugin:

1. Navigate in WP-admin to Plugins –> Editor;
2. Select the Sharebar plugin from the dropdown list and click ‘select’;
3. Find the function ‘sharebar_filter’ and change the following lines.

[php]    $code = array(‘[title]’,'[url]’,'[thumbnail]’,'[author]’,'[_twitter]’);
$values = array($post->post_title,get_permalink(),wp_get_attachment_url( get_post_thumbnail_id($post->ID) ),get_the_author(),get_option(‘sharebar_twitter_username’));[/php]

As you can see I added the option [thumbnail] to the $code array() and to the $values area I added the option to select the thumbnail of the features image. When you modified the plugin file you can then change the ‘big button’ and ‘small button’ with the following code:

Big button in Sharebar

[php]<a href="http://pinterest.com/pin/create/button/?url=[url]&description=Nice blogpost about [title] by [author]&media=[thumbnail]" count-layout="vertical">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>[/php]

Small button in Sharebar

[php]<a href="http://pinterest.com/pin/create/button/?url=[url]&description=Nice blogpost about [title] by [author]&media=[thumbnail]" count-layout="none">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>[/php]

For me the above has done the trick as you can see on the left-hand side where the ‘pin it’ button is visible.

Note: In order to use the above code please remove the _ before twitter. This has been added to the above code in order to display it correct in the blog post.