Last time I sucked up my dislike of Facebook and showed you how to set up an article ‘share’ button on your Textpattern CMS articles. Today, thankfully, it’s a Facebook-free post; I’m going to show you how to link Twitter to your articles. In many ways, the process to add the Twitter button is similar to Facebook – there’s a chunk of code to load some JavaScript and another bit to set the button up.

I’ve selected the small, moderately-tasteful Twitter share button that preloads a link for your article for when you or a visitor clicks it to share. Here’s how it looks on my site:

Note the Twitter button on the right. That’s how we roll. Subtle, understated and elegant. And not even a hint of Facebook. Thankfully.

There are two bits of code to add to your archive page. Before you make any changes, the usual recommendation of making a site and database backup applies. This, like the last tutorial, is a low risk edit job, but it’s a good habit to get into having up-to-date backups on hand. After your backups are done, open the archive page in the Textpattern admin panel. Copy and paste the contents to a text editor, and look for the <div role=”complementary”> marker. This is the grey box on the right that the share button is going to live in. The code to show a button is:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<txp:permlink />">Tweet</a>

I’ve changed the Hive theme from its factory state, and I’ve added an <h4> header above the my share button and placed the whole lot after my RSS/Atom links, so my code is like this:

<p>
 <txp:feed_link class="feed-rss" label="RSS" />
 /
 <txp:feed_link class="feed-atom" flavor="atom" label="Atom" />
 </p>
<div>
 <h4>Share</h4>
 <a href="https://twitter.com/share" class="twitter-share-button" data-url="<txp:permlink />">Tweet</a>
 </div>

Then, whizz down to the bottom of your archive page code and look for </body>. Before the </body> tag, insert this code:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

If you’ve been playing along and want to have Facebook and Twitter running together on the same page, this is absolutely fine: just put the Twitter button code before or after the Facebook button code; the button you want to show first should be first in the archive page. The JavaScript code before the </head> should be included, though the order of this doesn’t really matter. Copy and paste your edited code back into the Textpattern archive page interface and save your changes.

Next time: a Tumblr button. It’ll be great, you’ll see.

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