Add a Twitter Button to Your Textpattern CMS Articles

admin-ajax

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:

Google ChromeScreenSnapz005

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!

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 *


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