Add a Facebook Share Button to Textpattern CMS Articles

admin-ajax

My previous set for articles focused on the in-built RSS and Atom feeds in Textpattern CMS. Article syndication is a venerable technology that’s been around for a bunch of years, and pre-dates the news feed approach that Facebook has become almost synonymous with. There will always be people using RSS and Atom to consume content, but significantly more people use Facebook.

There’s a school of thought that if your content is so amazing, then people will take time to share it with their buddies even if you don’t have a nifty ‘share’ option on your site. There’s another, more prevalent school of thought that people expect to see this buttons splattered over websites. I will be totally honest with you: I think they’re site litter, but then in the minority.

I am very aware that what I want and what you want are two different things. With that in mind, I’m going to take a deep breath and show you how to add a share button to each of your Textpattern articles. If you want to. No-one is forcing you. Ahem. Let’s go.

Your Facebook-enabled articles will look like this – note the Facebook button on the right:

Google ChromeScreenSnapz004

Before you start, make a backup of your site and database. This is a low risk tutorial, but backups are always a good idea. You need to add the following code to your Textpattern archive page. Traditional web development would have you plunk this down in the <head>, but times have changed and it should go before the </body> instead. Look in your archive page and copy + paste this chunk of code after before the </body> tag:

<div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

Now, the button itself is set up with the following block of code:

<div class="fb-share-button" data-href="<txp:permlink />" data-type="button_count"></div>

I’ve already changed the sidebar/complementary box from the default Hive them, and I’ve added an <h4> around the share so it stands out a little bit:

<div>
 <h4>Share</h4>
 <div class="fb-share-button" data-href="<txp:permlink />" data-type="button_count"></div>
 </div>

This code should go in the <div role=”complementary”> block within your archive page. Personally, I have the button and header after my RSS/Atom links, so my code looks 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>
 <div class="fb-share-button" data-href="<txp:permlink />" data-type="button_count"></div>
 </div>

Copy and paste your edited code into the Textpattern interface, save your changes and there you have it: Facebook-ability is setup. Next time: setting up Twitter sharing for great justice.

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 = 1

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>