Using Twitter to Publish Breaking News from the Field
If you can send an e-mail, you can post breaking news.
by Matthew Stoff, Online Editor and David Durrett, Lead Developer
Abstract
With this method, a writer or editor can use a Twitter account to publish breaking news directly to a Web site without any technical skills required. After a one-time setup, headlines or breaking news updates sent with this method will appear seamlessly on the Web site, matching the appearance of existing styles on the page. The headline can be easily replaced or removed without any technial knowledge. And the publishing occurs entirely via e-mail so that reporters with e-mail capable cell phones can send updates directly to the Web site from the field using this technique.
Optionally, the technique can be set up to mask the origin of the updates on Twitter. This guide includes instructions for two ways of setting up the system: one with a standard link to the Twitter account's home page and a second one that obscures the origin of the post on Twitter.
Introduction
The newsroom at The Daily Sentinel, a small East Texas newspaper, did not frequently publish breaking news alerts to its Web site because posting those stories quickly required technical expertise. When news broke and trained Web staff were not in the newsroom, the news would often go unpublished until much later in the day.
We wanted to take advantage of Twitter's ease of use so that reporters and editors with little or no training could post headlines quickly without special software and without having to memorize a technical process. The resulting method uses e-mail as the interface for posting short headlines (which are actually Twitter messages, or "tweets") to the Web site. If you can send an e-mail, you can post breaking news.
Setup (Standard method, with link to Twitter)
The first step is to create a dedicated Twitter account for this purpose. It should not be the same Twitter account that you may use to publish regular news headlines or other content. You may wish to choose an appropriately-branded user ID, since it will be visible to users who follow the link.
In this example, we've used the name "username," so be sure to replace that with your actual username if you copy and paste our code.
Next, we'll set up an automatic feed to your Web site so that tweets appear on the page automatically. Twitter has helpfully created "widgets" just for this purpose. At http://www.twitter.com/widgets, select "other" from the various types available. Then select HTML as the type of widget you'd like. On the next page, set the number of updates to 1 and copy the HTML code from the text box.
We have to edit the HTML a bit before placing it on the site so that it appears exactly as we like it. We will also build a JavaScript function to hide the Twitter feed so that it only appears when there is a breaking news headline that is active.
Let's take a look at the default code:
<div id="twitter_div">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/username" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?
callback=twitterCallback2&count=1"></script>
First, we'll delete the second-level header, "Twitter Updates," since we don't need that. We'll also delete the link tag that says "follow me on Twitter." (Feel free to leave any of this in, if you prefer.)
Next, we'll add in the words "BREAKING NEWS ALERT:" with a line break tag so that the heading will appear directly above the contents of our tweet. This way, reporters or editors don't have to worry about presenting a context for their information. They can just send a headline and it will be preceded by that header.
Next, cut and paste the two <script> tags into the very last line of your page, just before the </body> tag.
Finally, we'll want to add a custom line of JavaScript with the others to interact with JavaScript we'll be adding later to make sure Twitter text appears only when a headlinie has been sent, and disappears from our Web Site whenever the list of Twitter updates is empty.
The edited code should now look like this:
<div id="twitter_div">
BREAKING NEWS ALERT:<br />
<ul id="twitter_update_list"></ul>
</div>
.
.
.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?
callback=twitterCallback2&count=1"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?
callback=twitCallback&count=1"></script>
</body>
Inserting this code by itself will drop any active tweets onto your site, with no special formatting or control over when the text will appear. To fix this, we'll first write some CSS to make the tweets blend in with the existing styles on the site.
<style type="text/css">
#twitter_div {
display: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #B00;
padding: 5px;
background: #EEE;
border: 1px solid #666;
width: 600px;
line-height: 1.5;
margin-bottom: 10px;
}
#twitter_update_list {
font-size: 12px;
color: #000;
list-style: none;
margin: 0px;
padding: 0px;
}
</style>
In our example, we've placed the headline, which is called by the #twitter_update_list div, in a horizontal box with a thin border and black text. The "BREAKING NEWS:" prefix appears in red, as does the time stamp. Those styles are applied by the #twitter_div attributes.
Finally, as we mentioned in the previous step, we need to add some JavaScript to make sure that the Twitter text appears only when a headline has been sent, and disappears from our Web site whenever the list of Twitter updates is empty.
<script type="text/javascript">
function twitCallback(obj) {
var id = obj[0].user.id;
if(id !== "") {
document.getElementById('twitter_div').style.display = "block";
}
}
</script>
Now, let's put it all together:
<style type="text/css">
#twitter_div {
display: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #B00;
padding: 5px;
background: #EEE;
border: 1px solid #666;
width: 600px;
line-height: 1.5;
margin-bottom: 10px;
}
#twitter_update_list {
font-size: 12px;
color: #000;
list-style: none;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
function twitCallback(obj) {
var id = obj[0].user.id;
if(id !== "") {
document.getElementById('twitter_div').style.display = "block";
}
}
</script>
<div id="twitter_div">
BREAKING NEWS ALERT:<br />
<ul id="twitter_update_list"></ul>
</div>
.
.
.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?
callback=twitterCallback2&count=1"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?
callback=twitCallback&count=1"></script>
</body>
That's all the setup we need for this method. Skip the next section and see how it works to put it all together and get your tweets posted.
Setup (Alternative method, without visible links to Twitter)
The first step is to create a dedicated Twitter account for this purpose. It should not be the same Twitter account that you may use to publish regular news headlines or other content. You do not necessarily need a branded username, since the account information will be invisible to users.
Next, we'll set up an automatic feed to your Web site so that tweets appear on the page automatically. Twitter has helpfully created "widgets" just for this purpose. At http://www.twitter.com/widgets, select "other" from the various types available. Then select HTML as the type of widget you'd like. On the next page, set the number of updates to 1 and copy the HTML code from the text box.
We have to edit the HTML a bit before placing it on the site so that it appears exactly as we like it. We will also build a JavaScript function to hide the Twitter feed so that it only appears when there is a breaking news headline that is active.
Let's take a look at the default code:
<div id="twitter_div">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/username" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?
callback=twitterCallback2&count=1"></script>
We'll begin by deleting the second-level header tag containing "Twitter Updates" as well as the unordered list tag and the "follow me on Twitter" link. This leaves nothing inside the "twitter_div" tag, but don't fret. Add in the words "BREAKING NEWS ALERT:" with a line break tag so that the heading will appear directly above the contents of our tweet. This way, reporters or editors don't have to worry about presenting a context for their information. They can just send a headline, and it will be preceded by that header.
Then add two spans, one with id "twit_status," where the actual text of the tweet will appear, and another with id "twit_time," which will indicate how long ago the tweet was posted. We also added a non-breaking space between the spans.
Finally, cut and paste the two <script> tags into the very last line of your page, just before the </body> tag. Here's what you should have so far:
<div id="twitter_div">
BREAKING NEWS ALERT:<br />
<span id="twit_status"></span> <span id="twit_time"></span>
</div>
.
.
.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/username.json?
callback=twitCallback&count=1"></script>
</body>
Inserting this code by itself will drop any active tweets onto your site, with no special formatting or control over when the text will appear. To fix this, we'll first write some CSS to make the tweets blend in with the existing styles on the site.
<style type="text/css">
#twitter_div {
display: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #B00;
padding: 5px;
background: #EEE;
border: 1px solid #666;
width: 600px;
line-height: 1.5;
}
#twit_status {
font-size: 12px;
color: #000;
}
#twit_time {
color: #B00;
}
</style>
In our example, we've placed the headline in a horizontal box with a thin border and dark gray text. "BREAKING NEWS" appears in red, as does the time stamp. The text of our tweets will appear black.
Finally, we need to add some JavaScript. We'll create a function that assigns each tweet a time stamp. We'll also need to assign our tweets to the id "twit_status" and the time to the id "twit_time." Finally, we'll add scripting to make sure that the Twitter text appears only when a headline has been sent and disappears from our Web site whenever the list of Twitter updates is empty.
We've done all the work for you. You should be able to copy and paste the scripts below onto your page.
<script type="text/javascript">
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
if(delta < 60) {
return 'less than a minute ago ';
} else if(delta < 120) {
return 'about a minute ago ';
} else if(delta < (45*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago ';
} else if(delta < (90*60)) {
return 'about an hour ago ';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago ';
} else if(delta < (48*60*60)) {
return '1 day ago ';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago ';
}
}
function twitCallback(obj) {
var id = obj[0].user.id;
if(id !== "") {
document.getElementById('twitter_div').style.display = "block";
}
document.getElementById('twit_status').innerHTML = obj[0].text;
document.getElementById('twit_time').innerHTML = relative_time(obj[0].created_at);
}
</script>
Let's put it all together:
<style type="text/css">
#twitter_div {
display: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #B00;
padding: 5px;
background: #EEE;
border: 1px solid #666;
width: 600px;
line-height: 1.5;
}
#twit_status {
font-size: 12px;
color: #000;
}
#twit_time {
color: #B00;
}
</style>
<script type="text/javascript">
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
if(delta < 60) {
return 'less than a minute ago ';
} else if(delta < 120) {
return 'about a minute ago ';
} else if(delta < (45*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago ';
} else if(delta < (90*60)) {
return 'about an hour ago ';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago ';
} else if(delta < (48*60*60)) {
return '1 day ago ';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago ';
}
}
function twitCallback(obj) {
var id = obj[0].user.id;
if(id !== "") {
document.getElementById('twitter_div').style.display = "block";
}
document.getElementById('twit_status').innerHTML = obj[0].text;
document.getElementById('twit_time').innerHTML = relative_time(obj[0].created_at);
}
</script>
<div id="twitter_div">
BREAKING NEWS ALERT:<br />
<span id="twit_status"></span> <span id="twit_time"></span>
</div>
.
.
.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/username.json?
callback=twitCallback&count=1"></script>
</body>
How It Works
Next, we'll set up the e-mail interface so that reporters and editors can update the Web site just by sending an e-mail. For this, we're using a service called TwitterMail, available at www.twittermail.com. Sign up using your Twitter account username and password. You will be assigned a unique e-mail address, and any message you send in an e-mail to that address (up to 140 characters in length) will be posted through your Twitter account to your Web site, styled exactly in the way you want.
Reporters with e-mail capable phones or others in the newsroom can e-mail headlines and brief updates to the TwitterMail address, relying on the simplicity of e-mail to confidently update the Web site in breaking news situations. Each subsequent e-mail/tweet will override the present one, so if you make a typo or wish to update the headline, you can just send a new e-mail.
To remove headline disappear from the Web site, log into your Twitter account at www.twitter.com and click the small trash icon that appears next to your post. If you have sent multiple posts, you will need to delete all of them because the JavaScript will detect and display any of these active tweets. Thus, to keep the breaking news function disabled, there cannot be any past Tweets present on your list.
A Word of Caution
You'll probably want to keep the TwitterMail address and the Twitter account login information to trustworthy staff who will be using it frequently. In theory, any malicious person with that information could publish damaging information to to the Web site from outside the newsroom.
Hopefully this will free reporters and editors to post breaking news when it is appropriate, not just when the Web guys are in the office.
Enjoy!
