How to fix the ShareThis plugin

First of all, don’t worry about the ShareThis settings on your WordPress Dashboard. You can leave those settings blank. We are going to use the Editor (under the Appearance tab) to add some code.

Now find some pretty icons. I like these Simple Icons by Dan Leech http://www.iconarchive.com/show/simple-icons-by-danleech.html I used Photoshop to paint the icons the same color, uploaded them to my site, and then used the URL links to the icons in the code below. Here is my email icon http://ohiofi.com/img/iconemail.png. If you like purple, you can use my icons. If you want to use different icons, you will need to replace all the URLs in the code below.

You will want to replace the code that says st_via=’20hz20khz’ st_username=’20hz20khz’. Just change 20hz20khz to your Twitter username (leave off the @). When someone shares my stuff on Twitter, the st_via adds a little tag at the end that says “via @20hz20khz”. When they press the Tweet button to send that message, the st_username brings up a message that says “@20hz20khz recommends that you follow @ShareThis and @20hz20khz”.

We are now going to add this bunch of code to the following: content-gallery.php, content-image.php, content-link.php, content-page.php, content-quote.php, content-single.php, content-video.php
Add the code after the header, before the footer, or in both places

<span class=’st_email_custom’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/iconemail.png’></span>
<span class=’st_facebook_custom’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/iconfacebook.png’></span>
<span class=’st_twitter_custom’ st_via=’20hz20khz’ st_username=’20hz20khz’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/icontwitter.png’></span>
<span class=’st_pinterest_custom’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/iconpinterest.png’></span>
<span class=’st_googleplus_custom’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/icongoogleplus.png’></span>
<span class=’st_blogger_custom’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/iconblogger.png’></span>
<span class=’st_tumblr_custom’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/icontumblr.png’></span>
<span class=’st_linkedin_custom’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/iconlinkedin.png’></span>
<span class=’st_wordpress_custom’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ ><img class=’sharingIcon’ src=’http://ohiofi.com/img/iconwordpress.png’></span>

If you are not using my purple icons, you will want to cut out the line in the next bit of code that says border:3px solid #643c8c;
Next, add this code at the bottom of style.css

.sharingIcon {
width:24px;
height:24px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #999999;
-webkit-box-shadow: 1px 1px 3px #999999;
box-shadow: 1px 1px 3px #999999;
border:3px solid #643c8c;
opacity:0.7;
}
.sharingIcon:hover {
-moz-box-shadow: 2px 2px 7px #333333;
-webkit-box-shadow: 2px 2px 7px #333333;
box-shadow: 2px 2px 7px #333333;
opacity:1;
}

Disable the automatic pop-up box when hovering over the email and WordPress buttons by adding this code at the bottom of header.php

<script charset=”utf-8″ type=”text/javascript”>// <![CDATA[
var switchTo5x=true;
// ]]></script><script charset=”utf-8″ type=”text/javascript” src=”http://w.sharethis.com/button/buttons.js”></script><script type=”text/javascript”>// <![CDATA[
stLight.options({publisher:’wp.49a4e5dc-919b-4435-9dba-0da827893c59′,onhover: false});var st_type=’wordpress3.4.1′;
// ]]></script>

This will disable the automatic pop-up box for your entire blog because the header section is part of your blog’s index, pages, and every individual post.

Comments are closed.