Subscribe to our blog

A few months ago Ross wrote a post on our content marketing blog exposing just how few websites take the time to optimize their tweet buttons. Surprisingly, there are a lot of free marketing opportunities being missed due to a sub-optimal tweet structure.

What is the Optimal Tweet Structure?

Tweets with the best chance of marketing success have three distinct characteristics: a clean post title, a clean URL, and an appropriate Twitter username included.

optimal-tweet-structure

  • Clean Post Title: You spent time crafting the perfect title that you think will lead to a high CTR and lots more shares. So why structure your Tweet syntax to look like this?
  • Clean URL: A URL free of tracking code and other strange add-ons can offer a cleaner feel that may improve CTR. This may also have a subtle branding effect when your URL is seen rather than a shortener.
  • Account Inclusion: Include your Twitter account, which improves the probability that the person sharing the tweet and the people reading the tweet will follow your account. It also boosts awareness that your brand is behind the content, potentially improving CTR if you have a positive reputation in your industry.

Why Don’t Sites Configure Their Tweet Structure?

The big question on my mind was, with so much to gain from an optimal tweet structure why do so many sites skip this step?

After reading the comments it became apparent that the biggest reason more tweet buttons aren’t optimized is that the marketing folks most likely to see the value of optimization don’t have the coding skills to roll their own Twitter buttons, and the developer folks in charge of coding up websites don’t have the marketing experience to see the need for such a feature.

Part of my job as a front-end developer for a marketing company is to bridge these sorts of gaps. So I put together this tutorial showing how to build your own tweet button and configure it to maximize your marketing efforts.

Install a Twitter Button for One-Page Use

You can always create a button using Twitter’s resource tools. However, if you really want to take control of your tweets it’s best to learn how to build it from scratch. Twitter suggests using JavaScript to create custom buttons and they provide all the information needed to do so.

A Twitter button requires two pieces of code: an HTML link and a script snippet.

Start by adding this script to the footer of your website. It’s basically a bit of code that will look for the HTML link on your web page and convert it into a working Twitter widget. You only need to add the code once, regardless of how many Twitter buttons you plan to use.

<script>window.twttr = (function (d, s, id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src= "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));</script>

Next, we’ll create the HTML link.

In it’s simplest form, Twitter’s share link will display a branded horizontal button with the total share count. It defaults to the current url and uses the page title as the suggested tweet text.

The code above will create a link like this:

We want to configure the button for maximum marketing effect so we’ll use a series of data properties to customize the suggested tweet text. You can also use additional properties to configure the size and layout of the button.

  • data-url: the url to be tweeted
  • data-via: an account name, do not include the ‘@’ sign
  • data-text: suggested tweet text

Adding these data properties will create an HTML link like this:

The above code will result in a tweet button that features our Twitter handle, preferred text and branded domain, like so:

Simply add the HTML link wherever you want the tweet button to appear.

Learn more about how to configure custom Twitter buttons from their documentation for developers.

Configure & Install a Twitter Button for WordPress

The above tutorial shows how to build an individual Twitter button, but chances are you don’t want to build a separate button for each post on your blog. If you use a content management system like most of the web, you probably want to build them programmatically with a template.

We’ll show you how to customize a tweet button for WordPress because 1) it’s the most popular CMS and 2) it’s what we use here at Siege.

Building Twitter buttons programmatically in WordPress is as simple as replacing your custom text with template tags.

Building a Twitter Button Programmatically

Once again, start by adding this script to the footer of your website. In WordPress, you’ll add it to your Theme’s footer.php file, just before the tag.

<script>window.twttr = (function (d, s, id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src= "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));</script>

Then, create the HTML link — only this time let’s use WordPress’ template tags to grab the Post Title and Permalink.

  • data-url:
  • data-via: username
  • data-text:

Here is the resulting code:

Buttons created with template tags must be added to the Template Files in your Theme; they will not work when entered directly into WordPress’ Post Editor. Where you add the code will vary depending on where you want the button to appear as well as which Theme you are using.

For example, if you want to add a tweet button at the bottom of every blog post, you would typically add the HTML link to the single.php template file directly after.

Tweet Responsibly

Configuring custom tweet buttons may seem like a small detail, but it’s an important piece of the social media puzzle that can make a big long term impact on your marketing results.

Increase your following and clickthrough rate by properly optimizing your share buttons for maximum reach using the tips above. Your CMO will thank you later.

Related Posts