It’s common for Textpattern users to set up their sites so that their blog section links to a page they’ve called “blog.” That page then calls a form, perhaps titled “blog-entry.” That form contains the crucial <txp:body /> tag that displays the actual article body. We’ll be placing the button code after that tag.

Note for the Hopelessly Lazy

This article is mainly about about adding individual buttons for a couple of popular social media services. However, if you want to support many different social media services all in one go, jump right to the ‘get button’page for ShareThis or the one for AddThis.

These services let you add a wide variety of social media buttons all at once. If you require SSL support, I recommend AddThis. ShareThis still requires downloading insecure components (as of this writing — they’re working on it), so your visitors will get an SSL warning in their web browser. This is not good if you are maintaining a website for a bank or other organization where SSL support is crucial. These services also support analytics so you can tell who’s sharing what, and on which services. That’s definitely an advantage over the individual-buttons approach.

Twitter “Tweet” Button

Here’s an example article with the Tweet button, and my tweet result at twitter.

Below you can see the code I’m using, based on what Twitter offer on their own resource page. As I mentioned at the beginning of this article, I’m assuming you already have a similar Section —> Page —> Form structure on your site, so I’m not going to post all of the code, just an excerpt.

Page code: “articles” (used by my blog/writing section)

<txp:if_individual_article>
<txp:article form="article_listing" status="live" limit="12" /><p
class="endmarc"><img
src="http://www.marccarson.com/images/endmarc_v1.jpg" alt="m end mark"
/></p>
<div class="content-nav"><span
class="prev-item"><txp:link_to_prev>&#171; <txp:prev_title
/></txp:link_to_prev></span><span
class="next-item"><txp:link_to_next><txp:next_title />
&#187;</txp:link_to_next></span></div>
<txp:else />
<p><txp:older>&#171; <txp:text item="older" /></txp:older>
<txp:newer><txp:text item="newer" /> &#187;</txp:newer></p>
</txp:if_individual_article>

The important thing is that the page code calls a form called “article-listing” for my individual articles…

Form excerpt: “article-listing” (excerpt)

<p class="pathway">A <a
href="http://www.marccarson.com/site/articles/">Web Design
Article</a></p>
        <h1 class="entry-title donthyphenate"><txp:title /></h1>
<div class="article-body-image"><txp:article_image /></div>
<h5 class="article-author">By <txp:author /></h5>
        <txp:body />
<a href="http://twitter.com/share" class="twitter-share-button"
data-count="horizontal" data-via="circular">Tweet</a><script
type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>

So, I’ve placed the Tweet button code below <txp:body />; this means the button will appear after the end of the article.

Important: Please change the “data-via” attribute inside the Twitter code to your Twitter username! Otherwise I (@circular) get all the credit. :-)

Facebook “Like” Button

Facebook’s Like button takes a little bit of extra effort, but thanks to JanDW on the Textpattern forum, I have something here you can just copy and paste. To test it out, paste this code below the Twitter tag seen in the Twitter example above, or just put it somewhere in the same form:

<iframe src="http://www.facebook.com/plugins/like.php?href=<txp:permlink
/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

You can see the result in the same article on my website.

Did you notice the <txp:permlink /> tag inside the Facebook code there? That is necessary so Facebook knows what specific URL on your website to “like.” Having worked with other CMSes, I have to say I really like how easy it is to do that with Textpattern!

If you use the Facebook “like” feature, please read their page about it, specifically the “Open Graph Tags” section. Those should really improve the experience for your visitors, if they use the Like button a lot. Open Graph Tags can provide additional goodies like proper thumbnail images so your Facebook-shared content looks really nice.

More Buttons?

If there’s a social media service you like, do some Googling and see if they offer button code. For example, Reddit has a page full of different buttons and the code for each.

Above all: Tell your friends and clients about your new superpowers, and enjoy the results!