Adding Share Buttons to MovableType 5

| Comments

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.

Related Posts

Comments