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:
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>
Next time: be business-like with a LinkedIn button. I’ll need your TPS reports on my desk by 9am.