Adding Share Buttons to MovableType 5

When I first started this blog, one of the things I found most attractive about MovableType 5 was that I wasnā€™t going to have to invest a bunch of time in the design side of the blog software. Iā€™m not an especially stylish guy; most of the time Iā€™m impressed if I can manage to wear a shirt that matches my pants. I was able to pick one of the out-of-the-box blog themes and start writing.

I did, however find some of the ā€œgutsā€ of MovableType 5 pretty interesting, and among the first things I did was to start modifying some of the templates to add some features that I liked. The ā€œRelated Articlesā€ list is one of the first modifications that I made.

I also wanted to have some sharing buttons, mostly for my own convenience, so that a reader could easily share entries with their favorite social networks. Up until recently, I only had a Google+ button and a Tweet button. I tinkered with other buttons, but I noticed a couple things that I didnā€™t like about the buttons:

  • The buttons available from the different social media network outlets didnā€™t quite line up nicely, which I assume is intentional to discourage people from using multiple buttons.
  • There was a discernible page load issue. The different buttons usually involved a piece of javascript which called back to the social media page and then presented the button to the user. When loading a page, all of the blog content would load up quickly, and then a moment or two later, the social media buttons would show up.

Because the vanilla buttons available to me via the social media sites didnā€™t line up nicely and were noticeably slow when loading pages, I wanted to dig in a little further and figure out how I could find my own buttons hosted locally.

I wound up very seriously considering ShareThis and AddThis but ultimately I wound up having some of the same problems I had with the other buttons, plus all of your links wound up getting redirected through the ShareThis and AddThis service. I was appreciative that they had some options that I was considering, but I didnā€™t quite feel comfortable with redirecting a bunch of my social media traffic through either of their sites.

The first thing I did was to set out and try and find some nice free buttons. I tinkered and re-sized them a few times but didnā€™t care much for the results.

The second thing I did was to identify which Social Networks would allow me to build some sort of share button with a simple URL call. That way I could use the good ā€˜ole anchor tag and make my own crude share buttons that would get the job done. Hereā€™s a sample of each that I used:

Twitter

<a href = "http://twitter.com/intent/tweet?source=sharethiscom&text=<$mt:EntryTitle encode_url="1"$>&url=<$mt:EntryPermalink encode_url="1"$>" target="_blank"><img src = "insert-path-and-filename-of-your-twitter-button" title = "Share this on Twitter" alt = "Share this on Twitter"></a>

Google+

<a href = "https://plus.google.com/share?url=<$mt:EntryPermalink encode_url="1"$>" target="_blank"><img src = "insert-path-and-filename-of-your-Google+-button" title = "Share this on Google+" alt = "Share this on Google+"></a>

Facebook

<a href = "https://www.facebook.com/sharer.php?u=<$mt:EntryPermalink encode_url="1"$>&t=<$mt:EntryTitle encode_url="1"$>" target="_blank"><img src = "insert-path-and-filename-of-your-Facebook-button" title = "Share this on Facebook" alt = "Share this on Facebook"></a>

StumbleUpon

<a href = "https://www.stumbleupon.com/submit?url=<$mt:EntryPermalink encode_url="1"$>" target="_blank"><img src = "insert-path-and-filename-of-your-SU-button" title = "Share this on StumbleUpon" alt = "Share this on StumbleUpon"></a>

Lastly, the most complicated thing I had to do was to tinker with MovableType. I had a simple requirement; for each entry displayed, the share button would share the unique URL to that entry. This winds up complicating things a bit due to the different kinds of pages that have multiple entries on them like the main index, category archive, monthly archive, and other pages. I tinkered with putting the buttons in a number of different places, but I wound up deciding that the best place for them was vertically in the upper left-hand corner of each entry. I wound up sticking a div element in there and then wrapping the entry body around that div. After spot-checking a few articles, I declared myself victorious. In the end, I only had to make changes in the following templates: Entry and Entry Summary. Because all the pages incorporate these two templates to build their pages, the new share buttons wound up being displayed in all of the places that I wanted.

I did not do exhaustive research on the multitudes of different social media websites out there; in my research only Twitter, Google+, Facebook, and StumbleUpon allowed the functionality that matched up with my needs. Iā€™m sure that there are ways to use other social media websiteā€™s share functionality similarly as I have here. As I find ways to add new buttons, Iā€™ll come back and update this blog. If you know have a similar method and want to share it, feel free to leave it in the comments.

Update (9/28/2015): For those of you looking to further tweak MovableType or for those of you searching for some social media icons to use, hereā€™s a link I wouldā€™ve found helpful had it been available to me back when this blog was originally written and published:

Cookies
essential