Add ShareThis, Facebook Share, Tweetmeme to tumblr marketing

Not all sites encourage sharing, but a lot do. For example, CSS-Tricks and MURKETING do not use ShareThis, Facebook Share, and Tweetmeme, while Nettuts+ and Six Revisions do.

Whether it’s digg, reddit, stumbleupon, delicious, you should feel comfortable installing these forwarding-friendly services and tracking the data they provide.

Step 1: Figure out the code required to add the button.

ShareThis:

<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=bcb820ee-d65f-4a8c-804b-bbd197835801&amp;type=website&amp;buttonText="></script>

Facebook Share:

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tweetmeme:

<script type="text/javascript">
   tweetmeme_url = '{Permalink}';
   tweetmeme_style = 'compact';
   tweetmeme_source = 'dmhoro';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Step 2. Figure out where you want to place the button in your html and wrap the button in an html div.

<div class="tweetmeme">
   <script type="text/javascript">
      tweetmeme_url = '{Permalink}';
      tweetmeme_style = 'compact';
      tweetmeme_source = 'dmhoro';
   </script>
   <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

<div class="fbshare">
   <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

<div class="sharethis">
   <script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=bcb820ee-d65f-4a8c-804b-bbd197835801&amp;type=website&amp;buttonText="></script>
</div>

Step 3. Style the css.

#wrapper #content .post .footer .date .tweetmeme {
   float: left;
   margin: 0px 0px 1px 4px;
}

#wrapper #content .post .footer .date .fbshare {
   float: left;
   margin: -1px 12px 0px -22px;
}

#wrapper #content .post .footer .date .sharethis {
   float: left;
   margin: 0px 0px 0px -6px;
}

Step 4. Troubleshoot and pray.

I can’t figure out why ShareThis works in firefox but not in safari…

…after a few hours this lead me to the following solution of adding the following css

.stbutton {
   display: block;
   float: left;
   clear: none;
   hieght: 20px;
}

plus the following javascript to the <head> section.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
   $(document).ready(function() {
   $('a.stbutton').css('padding-top', 12 + 'px');
});
</script>

Check out my marketing ebooks!

Promotion Management with WordPress eBook

Marketing Research with Tumblr eBook

Related DrHo.ro posts:

Facebook and twitter for marketing–Disqus, tweetmeme, and facebook share

How to add a tweetmeme button to a tumblr blog

Introduction to Marketing analytics: Google Webmaster, Feedburner, Google Analytics, Twitter/Tweetmeme/Bit.ly analytics, Facebook analytics, AddThis/ShareThis analytics, Tubemogul analytics, and Blip.tv analytics.

nosyt April 22, 2010 at 12:30 pm | Permalink

Hi, I can’t seem to get Sharethis to link dynamicaly. It seems to just link to the URL of my website only rather than linking to the individual post.

I’ve tried your method , but it either links directly to my URL, or just says “URL empty”.

None of the codes off of the Sharethis button customizer work, either. (same problem)

So…any idea’s on how to get it to link dynamically? Does it have anything to do with the “url: document.location.href” line? Thanks..

Dr. Horowitz April 22, 2010 at 12:40 pm | Permalink

You have to pass shareThis the {Permalink} (with a capital P) of each blog post: http://www.tumblr.com/docs/en/custom_themes#permalink-navigation

http://blog.sharethis.com/faq/developers-faq/sharethis-api-examples/ has some examples of how to pass a blog post url using url:’{Permalink}’

nosyt April 22, 2010 at 12:51 pm | Permalink

Hi, just updating that I used the addtoany button, instead. Simply replace the URL with {permalink}, and wa-la! Instant super link bar action! Thank you!