How to create a tweetable link from your articles in WordPress

Twitter doesn’t need a special introduction. Even if you personally are not using this social media network, everyone is aware of its popularity. Since 2006 when Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass launched the service, Twitter has been rapidly growing. Today, Twitter has more than 300 million active users per month. You can learn much about it on the official Wikipedia pages.

Unlike the other social media, Twitter put a limit on messages you can publish. Those messages, called tweets, can have up to 140 characters and you will have to carefully plan not to write too much. As you can imagine, because of that, everything on Twitter is designed to be used and published as quick as possible. People got used to that, and if they can’t tweet something in a few seconds, they’ll probably just give up.

Instead of letting people come up with their own ideas about tweeting your articles, you should do everything in your power to make it quickly accessible – you will want to create a tweetable link. After you create such a link, a user interested in posting a tweet will only have to click on it. By doing so, you improve chances of getting shared across the big network so give it time and create tweetable links. Not only you will make it easier for Twitter users, but you will get a great chance to make your articles look more alive.

Create a shortcode with a tweetable link to your article

Instead of copying and pasting the HTML code each time you want to insert a tweetable link, we are about to show you how to create one in a shortcode. By following these steps, you will be able to use a shortcode and simply write a text in between. The code will do the rest and create a tweetable link with URL of the article.

  1. Open functions.php file of your active theme
  2. Copy/paste the code and save changes:
add_shortcode('tweet', 'wploop_tweet');
function wploop_tweet($atts, $content = '') {
$out = $link = '';
$content = trim($content);

$content2 = str_replace(array('''), array('\''), $content);

if (empty($atts)) {
$tmp = array('via' => 'wploop', 'url' => urlencode(get_permalink()), 'hashtags' => '', 'text' => urlencode(htmlspecialchars_decode($content2)));
} else {
$tmp = array('via' => '', 'url' => '', 'hashtags' => '', 'text' => urlencode(htmlspecialchars_decode($atts['text'])));
}

$link = add_query_arg($tmp, 'https://twitter.com/intent/tweet?url=&original_referer=');
//$link = 'https://twitter.com/intent/tweet?url=&original_referer=?' . urlencode($link);
//$link = str_replace(array('''), array('\''), $link);

$out .= '<div class="tweet-this">';
$out .= '<a target="_blank" class="content" href="' . $link . '">' . $content . '</a>';
$out .= '<a target="_blank" class="link" href="' . $link . '"><img src="' . get_bloginfo('template_directory') . '/images/twitter-black.png" alt="Click to tweet" title="Click to Tweet"> Click to tweet</a>';
$out .= '</div>';

return $out;
}

As you can see from the first line of code, you are creating a shortcode [tweet]. Now, all you have to do is to open the article where you want to insert a tweetable link and write up to 140 characters in between the shortcode, like this:

[tweet]This is a tweetable link leading back to the article.[/tweet]

This shortcode will render a tweetable link which will look something like this:

Since we already styled this link, you won’t get the same result. To make the most out of your shortcode, you will need a little bit more work. You will want to style the tweetable link with some custom CSS, and you will have to provide an image we used:

  1. Open style.css
  2. Customize the code and save changes:
.tweet-this {
  padding: 10px;
  border: 1px solid #ebebeb;
  margin: 20px 0;
}

.tweet-this a:hover {
	text-decoration: none;
	color: black;
}

.tweet-this .content {
  font-size: 20px;
}

.tweet-this img {
   height: 25px;
   padding-right: 8px;
   margin-top: -14px;
}

.tweet-this .link {
  display: block;
  text-align: right;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 10px;
}

In order for the image to show up, you will have to upload one with name “twitter-black.png” to your images folder (or you can change the image name and location in the code on line #20).

That’s it! It may take you a while to style the DIV element to match your site, but the result can look amazing and will definitely help you get more shares. If you don’t want to write a shortcode every time, learn how to add quicktag buttons to your Text Editor and add your new shortcode in a button for quick access.

Use Click to Tweet online service

If you need a quick and simple way which will allow you to create a tweetable link, you might be interested in Click to Tweet. This free service will allow you to sign with your Twitter account after which you’re practically done. Simply write a tweet and the site will generate a code for you. You should copy and paste this code as the anchor text in WordPress, and you’re done!

Use a free Tweet This plugin

PRICE: Free

Tweet This free plugin for WordPress
If you are not willing to create your own shortcode, you can use a free plugin which will do that for you. PRICE: Free will allow you to create tweetable links, but you won’t have to deal with the code. The plugin will automatically create one for you. That means that you can relax and customize the text, icons and much more from the settings panel.

Tweet This will let you use shortlinks instead of the full URLs which can negatively impact your tweets. There are five different themes you can choose from, but you can also use custom CSS to create a style you need and like. Although screenshots show a promotional text in each tweet-box, don’t worry; this can be easily removed through the settings.

Use TweetDis premium plugin

PRICE: From $39

Just like the manual method and the earlier mentioned free plugin, TweetDis will allow you to create tweetable links. The plugin is a premium one which means that you will get premium support, plus it looks really great. You will get to use professionally designed themes to use on a twitter box. You can customize those in details through the plugin. We didn’t get a chance to try out TweetDis, but you can learn more about it by following the link to the official pages.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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