Add a Tumblr Button to your Textpattern CMS Articles

admin-ajax

In this third article in my short series of social sharing with Textpattern CMS, I’m going to explain the process involved with adding Tumblr support to your Textpattern articles. Like Facebook and Twitter, there are two components to add to your archive page in order to add Tumblr button support: a JavaScript chunk and some markup to make the button itself. Where Tumblr buttons differ is the information needed to make the button: Facebook needs a URL for the article and figures out the other stuff itself, and Twitter just needs the URL. Tumblr has extra whizzy bits that include the article URL, the name of the article and the description.

In this example, I’m going to use the site name as the Tumblr-requested name, and the article title as the Tumblr-requested description. You can, if you wish, use the article excerpt for the description, but as that’s an optional component you may not have it. As before with Facebook and Twitter, there are edits to be made to the archive page. Also as before, make backups of your files and database – this how-to is a simple copy + paste operation, but backups are always a good idea.

Here’s how your page will look with the Tumblr button enabled:

Google ChromeScreenSnapz006

Copy and paste the archive page contents into your text editor of choice and look for the <div role=”complementary”> to locate the block of code that populates the sidebar. In my case, I’ve modded the code in sidebar so many times that Textpattern probably hates me. I’ve trimmed back the external links and put an <h4> after my feeds. This is the code you need for a Tumblr button:

<a href="http://www.tumblr.com/share/link?url=<?php echo urlencode(<txp:permlink />) ?>&name=<?php echo urlencode(<txp:title />) ?>&description=<?php echo urlencode(<txp:site_name />) ?>" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>

The inline styles make me wince a little, but so it goes. Next up, put this JavaScript code down near the bottom of the page before </body>:

<script src="http://platform.tumblr.com/v1/share.js"></script>

If you’re running with scissors and already have Facebook and/or Twitter buttons loaded, it might start looking a bit crowded down there. Do not worry unnecessarily: the extra buttons will impact your page load speed, but it’s highly likely your users have already visited other sites with these buttons enabled, so the JavaScript will likely be already cached. Everyone wins.

Next time: a Google Plus button. I spoil you, really I do.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting and use coupon TEXTPATTERN for 20% off your first invoice!

Tags: , , , , , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - petecooper.org - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 − = 7

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>