FiveThirtyEight Liveblog

Real-Time Live Event Coverage

Covering live events online in real-time is a challenge. No one has met that challenge better than 10up’s long-term client FiveThirtyEight, the preeminent data-driven news and analysis site for politics and sports. Since 2016, they have liveblogged presidential elections, candidate debates, the World Series, the World Cup, Super Bowls, congressional hearings, political conventions, and even a night at the Oscars.

For several years, 10up continually improved LivePress, an independent WordPress-based liveblog service that FiveThirtyEight relied on. But In 2017, with several major events just months away, LivePress announced it was shutting down. FiveThirtyEight needed a replacement and needed it quickly.

Liveblogging The WordPress Way

The new liveblog solution would need to integrate seamlessly with their site, hosted on Automattic’s WordPress VIP platform. It had to support multiple authors, and later, work with Google AMP and connect to Slack. It had to be secure, fast, and scalable: “We covered the 2016 presidential election, where we had over one million people concurrently on the website with no problems,” said Paul Schreiber, FiveThirtyEight’s lead developer.

After evaluating all available tools, 10up and FiveThirtyEight decided the best option was to build upon the existing, open-source Liveblog plugin, maintained by WordPress VIP.

FiveThirtyEight built a migration tool to convert the old liveblogs to the new format while 10up and FiveThirtyEight worked together to enhance the Liveblog plugin and reach feature parity with LivePress. Liveblog entries, previously stored as comments, were converted to posts, eliminating the restrictions imposed by comments (like length), to provide writers with the capabilities of regular blog posts — save drafts, insert images, embed interactives, and add videos, tweets, and emojis, as in these screenshots from FiveThirtyEight’s liveblog of a Democratic debate.

Liveblog features include:

• Auto-inserted LiveBlogPosting schema metadata, prompting Google to display its Live badge in search results.
• Support for headlines and special content like shortcodes and oEmbeds.
• A Preview tab for the editor.
• The ability to add images directly from the site’s Media Library.
• Support for the Co-Authors Plus plugin, which enables multiple bylines for a post.

Slackers Become Bloggers

Communication between staff authors, editors, and freelancers was already happening in Slack, with FiveThirtyEight writers drafting liveblog posts in Slack. The process worked well for the writers but it slowed down the publishing process: editors had to copy and paste from Slack into WordPress, then manually select the author, insert the images, recreate any text-formatting, and add the headline.

The liveblog migration presented the perfect opportunity for innovation. To support their existing workflow, 10up engineered a Slack to WordPress integration which imports the contents of a Slack channel into draft WordPress posts, along with bylines, images, and rich-text (or Markdown) formatting. The new more-automated workflow became:

• Authors create posts in Slack.
• Slack pushes posts into WordPress as draft posts.
• Editors review and/or edit posts.
• Posts are published to the live site.

There were technical hurdles:

Tests did not completely simulate the real-time, real-world complexity of coordinating writers in one environment and editors in another, with multiple writers and editors working simultaneously and quickly on the same posts. The servers at VIP and Slack had to interact flawlessly, all during a major national event, while hundreds of thousands of concurrent readers visited the website.

Come day-of-show, with active support and behind the scenes monitoring, the live event coverage came off without a hitch.

“Working with the 10up team was like working with a co-worker. As an engineer, I like that we build things together and have a peer relationship not a typical formal vendor/client relationship.

I also appreciate that they approached the project as if it were their own, and understood its importance and urgency. When we experienced problems during an event, 10up didn’t say we’ll look at it later and get back to you, they jumped right in to provide real-time support.”

— Paul Schreiber, FiveThirtyEight Lead Developer

A FiveThirtyEight deputy editor was impressed with how smoothly the launch went, especially for a first release. Writers and editors immediately saw the new Liveblog as a time-saver: What had been manual and laborious now happened automatically, freeing editors to focus on editorial tasks. Speeding up publishing, according to a deputy editor, brought some calm to the often-hectic business of covering live events.

Modern Live News Coverage

The new 10up-crafted, custom-backend administration interface made publishing posts much easier for editors. FiveThirtyEight’s page-load optimizations improved the reader’s frontend experience:

• Newly added or edited posts update the liveblog instantly.
• The Liveblog page regularly auto-refreshes to ensure readers always see the latest posts.
• Editors can view all posts, including posts currently being worked on.
• When the last fact is checked and the last post published, editors can store the event feed in a searchable, permanent archive.

FiveThirtyEight’s Paul Schreiber presented “How FiveThirtyEight Tuned Liveblog For The Midterms” at BigWP New York, describing the evolution of their new Slack-integrated, WordPress plugin:

“10up delivered terrific work, making sure things were ready for deadlines and being available to help when we needed them most. We collaborated closely, working together with real-time conversations through Slack and screen sharing to do work through code together.”

— Paul Schreiber, FiveThirtyEight Lead Developer

The engineering teams of 10up and FiveThirtyEight came together to combine the immediacy of social media with the full-feature functionality of an enterprise CMS. The solution enables FiveThirtyEight to deliver live event coverage with a modern experience for readers and content creators.

To discuss how 10up can help achieve your digital goals, contact us.