Adding share buttons to your Tumblr blog

For those who don’t follow me on Twitter, I’ve spent a few hours today getting “share” buttons on my site. I ran into a few hiccups along the way, so I’m posting a brief recap, in case it helps anyone else.

There are a few inherent hurdles in adding share buttons to a Tumblr-powered site. First, not all posts have titles — Photo posts, for example, can be literally just an image. Secondly, if we’re going to have

Step 1: Get your icons

I’m using a mix of a couple different sets on my site, though they are pretty similar stylistically. These are Rogie King’s Social Network Icon Pack and the Vector Social Media Icon set from Icon Dock.

Step 2: Adding the links

Most social network sites have a pretty standard way of posting content, which is to use a URL like: http://mysocialnetwork.com/submit/?url={url}&title={title}. Some of them use a slight variation of this, but again, this is just an overview—I’ll leave it to you to go find the URLs for the services you want. Using Tumblr template tags, an example button for Stumble Upon would be:

<a href="http://www.stumbleupon.com/submit?url={Permalink}&title={Title}"><img src="http://www.mysite.com/img/social/stumble.png" /></a>

Unfortunately, because {Title} is not available for every post type, most links will fail to fill this in for the social network — which can be super annoying for your users.

Step 3: Making the links dynamic

Here’s where things get interesting. To get around the lack of the {Title} tag, we’ll use jQuery to progressively enhance our share links with better ones.

To use this approach on Index pages as well as Permalink pages, we’ll first need a way to associate data with an individual post. In our HTML, we’ll just need to add an ID to each post and then bind our links to that (using jQuery’s .data() function):

<article class="audio" id="post-{PostID}">
<script type="text/javascript" charset="utf-8">
    $('#post-{PostID}').data('permalink', '{Permalink}')
    $('#post-{PostID}').data('shortlink', '{ShortURL}');
</script>

Note: I’m using <article> here, as my site is built with HTML5, but you could just as easily have a <div class=”post”>.

Now, in our external Javascript file, we can use something like this:

// Run on page load
$(function(){
    $('.shareicons').each(function(){

        // Again, this could be 'div.post' instead of 'article'
        var $parent = $(this).closest('article');

        // Create a list of CSS selectors in order of appropriateness for your link title. Here, I'm saying using an H1 if possible, then a blockquote, then, as a last resort, a p tag.
        var fulltitle = $('h1, blockquote, p', $parent).slice(0,1).text();

        // We'll want to truncate the title text (if we do end up using a p tag...). 80 is good, as it's still a long title, but is short enough to fit in a tweet.
        var title = fulltitle.substr(0,80);

        // Grab the data we set earlier in the HTML
        var url = $parent.data('permalink');
        var shorturl = $parent.data('shortlink');

        // If the text/title is being truncated, let's add an ellipse to it.
        // If the post is a truncated quote, re-add the trailing quotation mark.
        if (title.length < fulltitle.length) {
            title += '...';
            if ($parent.hasClass('quote')) title += '”';
        }

        // Lastly, replace the link URLs.

        // We'll handle Twitter a little differently, so we use Tumblr's short URL (to save space), and also make sure we're citing ourselves (ie. via @DavidKaneda).
        $('.share-twitter', $parent).attr('href', 
            'http://twitter.com/home?status=' + title + '%3A%20'+ shorturl + '%20%2Fvia%20%40DavidKaneda');

        // Some networks, like Delicious, have post pages that are meant to be called as a popup.
        // Here, we can assign a click handler instead of replacing the href:
        $('.share-delicious', $parent).click(function(){
            window.open('http://delicious.com/save?v=5&noui&jump=close&url='+url+'&title='+title,'delicious', 'toolbar=no,width=550,height=550');
            return false;
        });

        // Most other links will require much less customization:
        $('.share-stumble', $parent).attr('href',
            'http://www.stumbleupon.com/submit?url=' + url + '&title=' + title);

        // Rinse and repeat...
    });
});

I realize this may be a bit high level for some beginner developers, but it would be very difficult to create a comprehensive guide when everyone out there has a different Tumblr theme, with different structures, etc. Hopefully this gets the basic concepts across and is of some use. If you do find the article useful, share it with your friends :)