How to Add Medium-Like Select and Tweet to WordPress (Plus Free Plugin!)
In recent weeks, we’ve added the ability to select text on our blog and tweet it. If you haven’t stumbled across this feature already, give it a go right now. Cool, right?
One of our front-end developers, Catalin Nita, put together this feature for our blog (thanks, Catalin!) and we thought we’d share it with you today so you can use it, too. So today I’m going to walk you through how to set it up and you can download the free plugin at the end of the post.
How it Works
If you read posts over at Medium, you would be familiar with this handy bit of functionality, which makes it easy for readers to highlight a string of words and share it immediately. Over at Medium, when you highlight text the page displays a toolbar that allows you to tweet or comment on the words you select.
The feature on our site works in a similar way. When you double-click a word or highlight a few words, a small Twitter icon is displayed. When you click the icon, a tweet modal will automatically launch, containing the text you selected along with a link to the post.
We’ve designed this feature so the icon is shown above the highlighted text, making is less obtrusive for readers. After all, we don’t want to block any text you want to read.
Adding “Select and Tweet” to Your WordPress Site
The easiest way to add it to your site is to scroll to the bottom of the article and download the plugin as-is. You can install it, activate it and get going right away. Note that the plugin uses standard WordPress classes and will only work on single post pages. Your theme should use standard class names but if it doesn’t, the plugin likely will not work. If you’d like to learn how to build this feature then read on, we’ll be coding the plugin from scratch in the rest of this tutorial.
Creating an Empty Plugin
Create a folder named “select-and-tweet” in your plugins folder and place an empty file in it named “select-and-tweet.php.” Within that file, paste the following content – feel free to tweak it to your needs.
Adding Our Assets
Once done, download this file and extract it within your plugin’s directory. This should result in a
fonts directory with four files in it. Before we add any content to our CSS and JS files let’s enqueue them. In the
select-and-tweet.php file paste the following code:
true as the fifth parameter to make sure the script is loaded in the footer (it isn’t needed before that).
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Essentially, we want to show a button – positioned correctly – when the user selects some text. A select process starts with a mousedown event (the user presses down on the mouse button) and ends with a mouseup event (the user releases the button). We want to make sure it wasn’t a right-click – in which case the default browser menu should be shown – and that at least three characters are selected. This prevents accidental slow double clicks or small selections.
First, let’s write two helper functions we’ll rely on. One is for detecting if a click was a right-click, the other will return the selected text.
With that all done, it’s time to add some things to our two events: the mouseup and mousedown. Here’s the full code, including the excellent inline documentation added by Catalin:
Note that both events are tied to the
.entry-content class. The idea is that users will share from our post, not from the sidebar, header and other places since it would just be confusing. This keeps everything within the post area.
The mousedown event is more straightforward. The first two lines serve to finds the position of the start of the selection. This value will be used to position the button later on. The second but within this action is to remove the share button, which uses the
The main part of the mouseup event is skipped if the length of the selected text is less than or equal to 3 characters (or if we detected a right-click). If all goes well, we grab the top and left position of the end of the selection. Based on this information, together with the position of the starting point, we can calculate the centered position of the button.
The next step is to grab the URL we’ll pass to Twitter. By adding
.split at the end we remove all query strings as these are usually unwanted. If you want to keep them or add your own tracking parameters you could do so here.
Next, the string shared is cut down to a maximum of 107 characters. You’ll likely want to add some other text like an account name at the end and of course the link. If you want to add your account then add something like
st = st + ' @danielpataki'; after the string has been shortened to 107 characters.
The sharing button is created (appended to the body) using a simple link with the class
.twtshare. Finally, it is positioned using the values we figured out before.
Styling the Button
The stylesheet is short and sweet and contains the font face declaration, some rules for handling the icon, the basic styles for the
.twtshare class and a few lines for the animation. It is very much self-explanatory. Here’s the full code:
Download the Free Select and Tweet Plugin
If you’d like to try the plugin without writing all that code yourself, here’s the plugin zip file for you to install and activate.
Happy selecting and tweeting to all of you, and thanks again to Catalin for creating this awesome feature!