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:
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>
<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: