How To: Enable the AddThis Pinterest 16x16 Icon

Scenario: You're using AddThis as your site's sharing tool with the 16x16 icons and you'd like to add Pinterest as one of your displayed sharing icons. You head to the site, click "Grab the Code" and make the selection to use the 16x16 layout.

"Hooray!", you think, "I see the Pinterest Icon right there, they must support it now!". Well, sorta. If you look up in the Preview pane, the Pinterest icon turns out to be the printer there.

Well, that's not so bad to have but you'd really like to have the Pinterest icon, it's there in the Style option but not in the Preview "preview" , what the heck?

The AddThis API documentation shows how to explicitly state which icon to use with the following code...

<div class="addthis_toolbox" addthis:url="http://example.com/blog/post/2009/05/01" addthis:title="Hooray!">  
    <a class="addthis_button_compact">Share</a>
    <a class="addthis_button_email"></a>
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_buzz"></a>
</div>  

It seems that adding the icon would be as simple as following the naming convention and include a link with the "addthisbuttonpinterest" class and call it a day. While this does display a pinterest icon, it's not the 16x16 version. It's actually the Pinterest icon from the first Style option, an option that makes any front-end developer worth their salt cringe in disgust.

Luckily, there's a workaround.

Workaround: Grab the code from AddThis and slap it where you want it. Only, to get the 16x16 icon, throw in this link and it will add in the 16x16 Pinterest icon. Make sure to include the title attribute, the script won't update this link's title properly so it's a must, and might be a inkling as to why this isn't fully supported by AddThis yet.

<a class="addthis_button_pinterest_share" title="Send to Pinterest"></a></code>  

Below is a full example of the working code. So if you're lazy, no need to hop over to AddThis to get going!

<!-- AddThis Button BEGIN -->  
<div class="addthis_toolbox addthis_default_style ">  
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_pinterest_share" title="Send to Pinterest"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>  
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ff009402e9515ba"></script>  
<!-- AddThis Button END -->