twitter cartoonI recently had to build a tweet wall for an event that was co-organised by my company. A fun experience I’d like to share with you all. The purpose of a tweet wall is to display the most recent and/or popular tweets about a specific subject. A subject in Twitterian is, as you probably know, identified with a hashtag (#). Another popular character in Twitterverse is the @ sign, used as a public reply to or mention of another twitter user. These two symbols, when used properly, make it extremely easy for us to target the appropriate tweets related to a specific happening.

As you’ll see, APEX as development tool is not the most suitable candidate when it comes to creating a tweet wall. All you need is HTML and JavaScript/jQuery technology. APEX can do that, but a text editor and a decent browser will do the job too. Let’s get started.

Step 1: the HTML

The HTML structure we need is very elementary. In APEX, we’ll first need to create a new page template. Navigate to the templates of your current theme in shared components and copy an existing page template. Once created, edit the template and replace the content of the Body text area in the Definition section with: #BOX_BODY#. Also get rid of div elements in the Footer text area, if any. All we want is a clean page template that generates us a HTML page with an empty body element.

Now, add a new page to your APEX application and assign it the page template we just created. Running the page should result in an empty page. Create a HTML region on the page and assign it the template: No Template. Enter the following HTML code as region source:

<div id="tweet-wall">
  <ul id="tweet-list"></ul>

It’s nothing more than an unordered list surrounded by a div element. The next step consists of performing an AJAX request to the Twitter search API. The response we get back from Twitter includes an array of tweets. We’ll loop over this array and add each tweet to our unordered list with the jQuery .append() method. A tweet array object looks like this.

Step 2: the JavaScript/jQuery

Execute when Page Loads:

  url: "",
  dataType: "jsonp",
  jsonpCallback: "processResponse"

Function and Global Variable Declaration:

function processResponse(rtrnData) {
  $.each(rtrnData.results, function(index, tweet) {
    $('ul#tweet-list').append('<li><img src="' + tweet.profile_image_url + '" title="' + tweet.from_user_name + '" alt="' + tweet.from_user_name + '"><span class="tweet-time">' + calculateTimeAgo(tweet.created_at) + '</span>&nbsp;<span class="tweet-text">' + tweet.text.linkify() + '</span></li>');

String.prototype.linkify = function() {
  return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {

function calculateTimeAgo(dateString) {
  var rightNow = new Date();
  var then = new Date(dateString);

  if ($.browser.msie) {
    then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));

  var diff = rightNow - then;

  var second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24,
  week = day * 7;

  if (isNaN(diff) || diff < 0) {
    return "";
  if (diff < second * 2) {
    return "right now";
  if (diff < minute) {
    return Math.floor(diff / second) + " seconds ago";
  if (diff < minute * 2) {
    return "about 1 minute ago";
  if (diff < hour) {
    return Math.floor(diff / minute) + " minutes ago";
  if (diff < hour * 2) {
    return "about 1 hour ago";
  if (diff < day) {
    return Math.floor(diff / hour) + " hours ago";
  if (diff > day && diff < day * 2) {
    return "yesterday";
  if (diff < day * 365) {
    return Math.floor(diff / day) + " days ago";
  else {
    return "over a year ago";

Step 3: the CSS

Just a matter of seeking a beautiful background and styling the ul, li and span elements. It’s all up to you. Here’s the CSS that I used for my demo.

html {
  background: url(#WORKSPACE_IMAGES#oracle-wallpaper.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

body {
  margin: 0 auto;
  width: 525px;
  padding: 25px 0;
  text-align: left;
  font-family: "Helvetica Neue",Arial,sans-serif;
  font-size: 13px;
  color: #FFFFFF;

ul#tweet-list {
  margin: 0;
  padding: 0;
  background-color: #000000;
  opacity: 0.80;
  filter: alpha(opacity=80); /* for IE8 and earlier */
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;

ul#tweet-list li {
  overflow-y: auto;
  padding: 0.5em;
  padding-right: 1em;
  list-style-type: none;

ul#tweet-list li img {
  float: left;
  vertical-align: middle;
  padding-right: 0.5em;

ul#tweet-list li span.tweet-time {
  font-size: 11px;
  font-style: italic;
  font-weight: bold;

ul#tweet-list li span.tweet-text a {
  color: #FFFFFF;
  text-decoration: underline;

Step 4: the demo

Click here.

It doesn’t have to be over yet. You can for example write some extra JavaScript code to check for new incoming tweets. You achieve this by performing the AJAX request every 30 seconds. Then compare the response with the array of tweets you’re currently displaying. In case of a difference between those two, remove the oldest tweet from the screen and replace it with the more recent one.

The end result of the tweet wall that I created for an event can be seen here.