Add a Google Plus Button to Textpattern CMS Articles

admin-ajax

Today’s article is all about Google Plus and Textpattern CMS. I’m going to show you how to add a neat Google Plus +1 button to your Textpattern article pages. This is article number 4 of the series, and if you’ve been playing along you will already know how to integrate Facebook, Twitter and Tumblr. In each case, a button is added to the sidebar of the article. The Google Plus button works in a similar fashion.

As with the previous how-to walkthroughs, take a site backup before you start. This is a low-risk text edit, but it’s always a good idea to have backups on hand, especially if you like to experiment and poke around. When you have backups, you can continue with the article. If you don’t have them yet, I’ll wait for you. Really.

When your Google Plus button is in place, it looks like this:

Google ChromeScreenSnapz007

Note the button in the grey sidebar panel. Nice, huh?

The first thing to do is copy the archive page contents from your Textpattern admin interface and paste into your text editor of choice. Search for the <div role=”complementary”> tag to indicate the start of the complementary sidebar div, and prepare to edit some text. The code to insert a button is:

<div class="g-plusone" data-size="medium" data-href="<txp:permlink />"></div>

Easy. The way I did it is to have an <h4> after my RSS/Atom links indicating the presence of share buttons, and then have the button afterwards. 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="g-plusone" data-size="medium" data-href="<txp:permlink />"></div>
 </div>

The second and final part of the setup is to add some JavaScript loading code down toward the bottom of the page before the </body> tag. Here’s the code:

<script type="text/javascript">
 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/platform.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
 </script>

If you’re super-keen and you’ve loaded the Facebook, Twitter and Tumblr code already, this extra JavaScript will be making the lower part of your page pretty chunky. You should find that it won’t impact your page load speed adversely, but it’s a good idea to test it out. If your site is slow to load, think about removing some of the social sharing components.

Next time: be business-like with a LinkedIn button. I’ll need your TPS reports on my desk by 9am.

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>