tweet-button-wordpress

Add a Twitter Button in WordPress Posts and Pages (with Optional Shor.tt Link)

A tweet button on every page of your website is a great way of converting that segment of your readership that utilises the service. This article will show you how to include a tweet button at the top and/or bottom of every post and/or page of your WordPress website.

At the time of writing this post (September, 2015) we’re aware of Twitter’s decision to alter the design of their tweet button and thoughtlessly shut down the JSON count API. This doesn’t affect the code on just this page, but others as well. While this article is current at the time of writing, we’ll follow it up (if required, today) with a post that includes a modified function.

Update 23rd November 2015: Since we wrote this article Twitter have indeed altered the appearance of their tweet button . References to the count attribute no longer apply, although the code continues to work (Twitter simply ignores the attribute). Subscribe to us on Facebook and we’ll let you know when we’ve removed the portion of code that is no longer necessary.

Hitting the button count launches a popup tweet box with pre-populated text that a user can fill in before sending on their message. However, we encountered a few issues with Twitter’s generic text format because we had no real idea how the URL was shared on Twitter once it was out of our control. For that reason we decided to write our own code that would (optionally) use our shor.tt tool to measure the life of the shared URL once it made its way on Twitter. We also wanted to give the tweet a greater chance of finding its way into the feed of those that used the hashtag search function so we auto-hash the title based on the post tags (good for words like #WordPress, #Facebook, #PHP, or #Twitter that we use a lot). Because we wanted to ensure a good conversion we retain just a little bit more creative control over how the tweet is formatted by creating it ourselves and truncating it appropriately. These essential features ensure that the created Tweet is more conversion-friendly than the generic message that Twitter provides.

The Twitter function on this page will:

  • Add a Tweet button at the top, or bottom, or top and bottom of every post and/or page.
  • Use the Twitter button of your choice.
  • Align the Twitter button to the right or left of the page as required.
  • Automatically create Twitter text with the post title and either a shor.tt link or short permalink.
  • Optionally apply hashtags to the title based on the post tags.
  • Recommend ‘related accounts’ after the tweet is sent.
  • Optionally apply certain hashtags to every tweet sent.
  • Trim the title string and apply the URL for a custom formatted Twitter string.

Shor.tt

While we’ve used shor.tt for the truncated tracking URL, you could easily modify the function if you use another service (or get me to do it if you provide me with the provider). If you plan on using our truncated shor.tt links you must also include this function in your custom-functions or functions.php file. While we’re using a site option at the moment it’s likely we’ll move to post options in the future.

The post “Create a Shor.tt URL for Every Post and Page and Display Under Your Post” here will detail how to create a shor.tt URL for every post or page and then optionally include the URL at the bottom of every post. It’s the creation part that we’re relying upon.

The Result

The result of the code is evidenced by the Twitter button at the top right hand side of this page. Share the link to get an example of how it works and the text that it’ll create. Because I have used the tags of Twitter and WordPress, and I have the same words in my post title, those words in the title will be converted to hashtags.

Sending this page to Twitter. Try it yourself :)

In the above screenshot the title length, URL, and via text is less than 140 characters, so it wasn’t truncated. For longer strings the title will be shortened and we’ll leave a few characters at the end of the text.

In the case of techie-type websites, there are a few Twitter accounts that’ll automatically retweet anything with a #WordPress hashtag, potentially giving the sharer, you, and your tweet URL more exposure. This is just one of the many, many reason why your readership should be encouraged to use the tags by default.

The Code

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

Attributes

Available attributes are detailed below. It’s expected that you’ll alter the function to return your preferred button and placement, and then forget them. We’ll be releasing a shor.tt WordPress plugin at some point that has the attributes included in a settings page, but in most cases (including this one), the additional code to build the form isn’t necessary (the same plugin will be used by fat.ly and QRimg users).

topbottom

The topbottom values are either 1, 2, or 3. Use 1 to include the button on the top of the post container only. Use 2 to include it on the bottom of the page, and use 3 to render the tweet button at the top and bottom of each page.

posttype

You can choose to include the tweet button on posts, pages, or both. To include on just posts, use 1. To include on pages only, use 2. For posts and pages, use 3.

autotags

To compare the post title against the post tags and alter matching title words to use a hashtag, alter autotags to 1 (true).

linktext

linktext is reserved. We’ll update it in the next release.

divalign

The Twitter button is in a div container. You can alter the placement by altering divalign to left or right.

twitteralign

Twitter includes its own alignment features (normally automated). If required (only), alter twitteralign to either left or right.

count

count determines the type of button that will be rendered. Options are horizontal, vertical, and none. Vertical will always include a Twitter count.

Old Buttons: horizontal, vertical, and none.

via

To include the via text after each tweet, set your preferred Twitter handle.

large

To include a large Twitter button, set large to 1 (true).

Old Twitter Button Sizes: default and large.

New Twitter Button Sizes: default and large.

lang

If a change of language is required, you can alter the lang code. Twitter generally does a good job of guessing this.

dnt

When dnt is set to true, the Tweet and its embedded page do not influence Twitter targeting including suggested accounts. Default is false.

related

Twitter will recommend the related accounts you specify after a tweet is sent. This is an excellent means of converting on the readership that are prepared to share your content but aren’t yet following you.

hashtags

To manually include hashtags after your tweet, define them here. Auto-tagging is preferred.

shortt

If using the shor.tt URL feature, set this to 1 (true). If true you must also include this function in your functions file.

margin

The margin applies to the div container.

Update: 23rd November 2015

This article was written about 10 weeks before it was published. When we scheduled posts as we do there’s an inherent risk that our information may become a little redundant – as it has today. However, the code still works. While Twitter simply ignores the old attributes (as it should do avoid hundreds of millions of Twitter buttons failing) we’ll update the function in the next few days to remove superfluous code.

We’ve had a quick look at how to manufacture a URL share count, and while not perfect, we’ll publish code soon that’ll act as a substitute if you’re interested in preserving that information on your website.

Twitter have taken away a valuable and necessary tool for owners to measure the success of their links and campaigns in the Twittersphere without providing a suitable alternative. It’s an action that simply serves to illustrate the contempt they have for their users. It’s little wonder they’re struggling to maintain relevancy.

Considerations

This post applies a filter to the content so you should only need to set the parameters once. We do have a post written and scheduled, however, that returns the tweet button with shortcode or as a text – both functions differ only slightly to the standalone function above.

More detailed information on the tweet button and parameters are available on the Twitter website .

While the shor.tt links are stored in a single array at the moment it’s likely that we’ll store them as a post option… so you can measure the same links differently on various pages. Multiple links in a single array is also a little messy and inefficient.

Download the WordPress Function

Download the WordPress Twitter function here .

Shortt URL for this post:

Leave a Reply

Your email address will not be published. Required fields are marked *