I wanted to announce my website updates on my Twitter account, then re-purpose those website announcement tweets on my homepage. I wanted to list only website updates on my homepage, not my tweets about other things. I could have created a special Twitter account just for that purpose, but I didn't want to do that; I wanted my website update announcements to be incorporated in the same stream as my standard Twitter account.
So, I came up with a solution involving the #WebSiteUpdate hashtag and some JavaScript code that allows me to create very specific tweets that the following widget will format as updates for my homepage, ignoring all of my other tweets. To make the widget easier on my readers, I also wanted the code to remove the #WebSiteUpdate hashtag and all of the annoying pound signs from the hashtags in the tweets that announce my website updates.You can see it in action on my homepage and compare it with my Twitter page.
The code will transform a tweet such as this
into a reformatted bullet on a webpage:
When tweeting, there are a couple of ground rules you'll need to follow for this to work on your site:
To use this widget on your site, copy the following code into your page where you want your update announcements to appear. Substitute "<YOUR_TWITTER_USERNAME>" (including the angle brackets) with your Twitter username. (If you want some number other than your 10 most recent tweets, you'll need to change the "10" on the same line.) Style it however you want using CSS. Then tweet according to the instructions above and watch the reformatted website update announcements appear on your page.
So, I came up with a solution involving the #WebSiteUpdate hashtag and some JavaScript code that allows me to create very specific tweets that the following widget will format as updates for my homepage, ignoring all of my other tweets. To make the widget easier on my readers, I also wanted the code to remove the #WebSiteUpdate hashtag and all of the annoying pound signs from the hashtags in the tweets that announce my website updates.You can see it in action on my homepage and compare it with my Twitter page.
The code will transform a tweet such as this
into a reformatted bullet on a webpage:
When tweeting, there are a couple of ground rules you'll need to follow for this to work on your site:
- Your update tweets must include the #WebSiteUpdate hashtag (it's not case-sensitive), which will be removed in the widget.
- Your update tweet should contain the URL (only http:// or https:// work at this time) of the update to your site.
- Your update tweet can contain only one URL if it is to be rewritten as a hyperlink. Tweets containing more than one URL will render in the widget without URL transformation.
To use this widget on your site, copy the following code into your page where you want your update announcements to appear. Substitute "<YOUR_TWITTER_USERNAME>" (including the angle brackets) with your Twitter username. (If you want some number other than your 10 most recent tweets, you'll need to change the "10" on the same line.) Style it however you want using CSS. Then tweet according to the instructions above and watch the reformatted website update announcements appear on your page.
<div id='twitterForWebsiteUpdatesList'/>
<script type='text/javascript'>
function getFullMonth(shortMonth) {
switch(shortMonth) {
case 'Jan':
return 'January';
case 'Feb':
return 'February';
case 'Mar':
return 'March';
case 'Apr':
return 'April';
case 'May':
return 'May';
case 'Jun':
return 'June';
case 'Jul':
return 'July';
case 'Aug':
return 'August';
case 'Sep':
return 'September';
case 'Oct':
return 'October';
case 'Nov':
return 'November';
case 'Dec':
return 'December';
default:
return '';
}
}
function twitterForWebsiteUpdates(twitterJSON) {
tweets = twitterJSON.results;
var outputHTML = [];
outputHTML.push('<ul class="twitterWebsiteUpdates">');
for (var i=0; i<tweets.length; i++){
var websiteUpdateAddress = '';
var status = tweets[i].text;
if ( status.match(/https?\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!]/g) && (status.match(/https?\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!]/g).length == 1) ) {
status = status.replace(/(https?\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
websiteUpdateAddress = url;
return '';
});
}
status = status.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
}).replace(/#websiteupdate/ig, '').replace(/ #/g, ' ').replace(/^#/g, '').replace(/^#/g, ' ').replace(/^\s*/, '').replace(/\s*$/, '');
if (websiteUpdateAddress) {
status = '<a href="' + websiteUpdateAddress + '">' + status + '</a>';
}
var date_array = tweets[i].created_at.split(' ');
outputHTML.push('<li><span class="twitterCreatedDate">' + date_array[1].replace(/^0/, '') + ' ' + getFullMonth(date_array[2]) + ' ' + date_array[3] + ': </span>' + '<span class="twitterText">' + status + '</span> </li>');
}
if (outputHTML.length == 1) {
outputHTML.push('<li><i>No recent updates.</i></li>');
}
outputHTML.push('</ul>');
document.getElementById('twitterForWebsiteUpdatesList').innerHTML = outputHTML.join('');
}
</script>
<script src='http://search.twitter.com/search.json?callback=twitterForWebsiteUpdates&q=%23websiteupdate%20from%3A<YOUR_TWITTER_USERNAME>&count=10' type='text/javascript'>
</script>
</div>