Twitter  Digital subscriptions at the Financial Times have increased by 33 percent nie.mn/1nGEkqN  
Nieman Journalism Lab
Pushing to the future of journalism — A project of the Nieman Foundation at Harvard

If you use WordPress, you too can have tweetable sentences like in that New York Times SNL story

This plugin lets you pre-select certain tweetworthy sentences in your posts .

You may have noticed a few days ago that The New York Times continued its admirable attempts to innovate in how news site’s article pages should look. In this piece on auditioning for Saturday Night Live, Times staff highlighted a number of quotes from the piece and made them individually tweetable. It looked like this:

nytimes-tweetable-text-snl

(Andrew Beaujon had a good writeup at Poynter.)

I thought that was a nifty idea and wanted to see if I could make it work here at Nieman Lab. Turns out I could! You can see the first couple examples if you scroll down a bit in Caroline’s just-posted story on Localore:

niemanlab-tweetable-text

Now you can do the same on your WordPress-based site.

Most of the work here is done by a year-old WordPress plugin called Tweetable Text, written by Salim Virani. (You can see it in effect on his site.) It does the job, but there were a few things I wanted to change: improving how the highlighted text and hover buttons are displayed; avoiding its use of Twitter’s tweet button code; and allowing the text-to-be-tweeted to be different from the exact text that is highlighted in the story. So I made those and a few other small changes in Salim’s code; you can check out my new version of the WordPress plugin right here.

How to use it

— Download this file; unpack it, and upload tweetable-text.php to your WordPress plugins directory. Activate the plugin in your WordPress interface.

— Make sure you’re using Font Awesome, the awesome icon font, which is required to generate the little Twitter bird at phrase’s end. You can do that by simply adding

<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">

to your site’s <head>. (If you don’t want to use Font Awesome, you can either delete the &thinsp;<i class='icon-twitter' style='color: #ed2e24;'></i> on line 36 of the plugin — or replace it with a call to a Twitter-bird image. Or just change the layout however you’d like!)

— Then, in any WordPress post, if you want to make a sentence or phrase tweetable, wrap it in [tweetable] and [/tweetable]. So for example, the paragraph pictured above looks like this on the backend:

Schardt says that [tweetable]finding creative journalists with an awareness of what technologies are available to them is half the battle.[/tweetable] The advancements themselves outpace the average newsroom’s awareness and ability, but funding continues to be overwhelmingly aimed at furthering these platforms — while journalists struggle to keep up.

— If you want the tweet text to be something other than what’s literally between those [tweetable] tags, add an alt parameter like this:

Schardt says that [tweetable alt="This is actually the text that will show up in the tweet."]finding creative journalists with an awareness of what technologies are available to them is half the battle.[/tweetable] The advancements themselves outpace the average newsroom’s awareness and ability, but funding continues to be overwhelmingly aimed at furthering these platforms — while journalists struggle to keep up.

— If you want to add hashtags to the tweet, you can also add a hashtag parameter:

Schardt says that [tweetable hashtag="#journalism #publicmedia"]finding creative journalists with an awareness of what technologies are available to them is half the battle.[/tweetable] The advancements themselves outpace the average newsroom’s awareness and ability, but funding continues to be overwhelmingly aimed at furthering these platforms — while journalists struggle to keep up.

(You can use alt and hashtag together if you want. Or you can just include your hashtags within your alt text, if you’d like.)

My instinct is that this is a tool to be used sparingly; littering your stories with calls-to-tweet is likely to have the same impact as throwing 80 social sharing buttons on a page: annoying your readers. But I think I’ll be trying this out a bit — specifically on stories with great quotes that are just begging to be shared. (And by all means, make my code better! Would love to hear how you’re using it or how it could be made better.)

                                   
What to read next
how-why-explainer-explanatory-cc
Ken Doctor    July 25, 2014
When people talk about explanatory journalism, the focus is on new players like Vox and FiveThirtyEight, or on giants like the Times and the Post. But can connecting the dots trickle down to the local level?
  • mijohn

    Thanks. I look forward to trying this.

  • http://ricogrimm.de/ Rico Grimm

    Awesome! It works. However, when using the plugin no images are shown in my posts anymore. Anybody knows why that could be?

    This is my site: http://ricogrimm.de/en/

  • http://www.niemanlab.org/ Joshua Benton

    Hmm…I see images just fine on your site, and there’s no display: none or anything else in there that should be affecting images.

  • http://blog.justindorfman.com jdorfman

    So cool! You can also use the Bootstrap CDN WordPress Plugin for Font Awesome: http://wordpress.org/plugins/bootstrapcdn/

  • Yael Grauer

    This is cool. But I like Medium’s version even better, when anything people highlight is a tweetable.

  • http://ricogrimm.de/ Rico Grimm

    Yeah, I went over the code and did not find anything image-related
    either. But the plugin messes with them anyways. So I deactivated the plugin for now, will test later again. Will let you know if I have found out what the problem is.

  • http://www.headlinemiami.com/ Rasheed Nader

    I can confirm that this happens to my blog as well. When used in a post, the featured image isn’t there.

  • Miezan Echimane

    could you give me a Link to Medium pls ? :)

  • Miezan Echimane

    I found this so cool that i made a simple JQuery version where the reader select what he/she wants to tweet :) http://echimane.com/experiments/SelectNTweet/ (only tested in chrome – other browser support will be added later maybe :) )

  • Yael Grauer

    medium.com

  • Miezan Echimane

    thanks for the link, i think my attempts is halfway between medium and this WordPress plugin , but anyone can just inject it in a page and start twitting :D

  • Marco Rohner

    it’s a great solution for a problem, that I’ve long awaited. But unfortunately, by activating your plugin, it breaks our site’s other plugins, especially the one for social media buttons.

  • Grim Coy

    I think Virani’s code is a better choice, because you have (with your alteration of the code) striped all original source infos from the tweet. There is no lead to the original tweet and the person who posted it.
    It’s like quoting and displaying the name of the text/book/video but not the person you quote from! It’s not acceptable.

  • Hendrik

    Brilliant, thank you Joshua. Turns out red for me though? No twitter blue.

  • Hendrik

    oh maybe it’s supposed to be that way..

  • http://www.niemanlab.org/ Joshua Benton

    At the moment, the color is hardcoded in the plugin; you can change if you’d like by swapping each instance of #ed2e24 in the plugin file with the color of your choice. There’ll be a new version coming that makes that selection process easier.

  • http://www.niemanlab.org/ Joshua Benton

    I’m confused by what you mean — what’s the “original tweet”? This is for publishers to select quotes they want to push for tweeting.

  • Hendrik

    ah that’s great! thanks so much Joshua, really great plugin.

  • http://www.niemanlab.org/ Joshua Benton

    Very strange. Again, I don’t think there’s anything in the code that could be doing that — with the exception of if you’re using the same CSS class (“sharebuttons” or “tweetable”) that the plugin show/hides. But it doesn’t look like your site does that.

  • Tommaso Tani

    For WordPress installation you should fix an error using jQuery because of Worpress that loads it in No Conflict Mode: you have to replace all $ in the plugin file with jQuery, otherwise it could give you an error and creat conflicts with other plugins in your theme

  • http://www.techzei.com/ Jash Jacob

    The breaks my social share plugin :(

  • Chris Coleman

    How do you add a via “insert username” to be added with the tweetable?

  • http://adampschweigert.com/ Adam Schweigert

    We added that option in this branch of the plugin: https://github.com/yurivictor/tweetable-text Eventually we’ll merge all of them together that should work for you.

  • TCMcCarthy

    Just a tip — I am the webmaster at the CUNY Graduate School of Journalism and modifying each of our 800 plus sites that could potentially want to use this plugin to include the stylesheet would have been a hassle.

    On line 14 I added:

    wp_enqueue_style(‘font-awesome’, ‘//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css’);

    Which includes the styles on activation. We haven’t seen any conflicts yet.

  • Luis3etancourt

    You just made my day! I had been looking for this plugin for months!!! I was just about to start coding it myself but decided to give it a last search!
    THANK YOU!!!!

  • http://www.terramar.co/ 344kellogg

    Great post. Is there any way for the plugin to auto-generate a short URL?

  • Jonathan Rick

    Joshua -

    This is so awesome—thanks so much not only for writing about it, but also for providing instructions and for tweaking it!

    I just implemented the plug-in on this post:

    http://jonathanrick.com/2014/03/even-the-most-boring-subject-can-go-viral/