Photo by ~basia-hs on deviantART

Retrieving and displaying a tweet using the twitter API in real-time as discussed in “how to retrieve and display your latest tweet using PHP” can sometimes produce errors due to twitter’s inability to handle a lot of simultaneous request from multiple users. To deal with that, you can store the tweet in an XML file and retrieve it from there, so you don’t have to rely on twitter’s availability. This way is more efficient and will improve the loading time of the page.

First, you need to create a file named loadtweet.php which will load the latest tweet the usual way, will perform a check to find out if the result is an actual tweet and not an error message by computing the tweet’s length (it must have a maximum length of 140 characters) and will finally save the whole respond to an XML file called tweet.xml:

$twitter_url = 'http://twitter.com/statuses/user_timeline/yourTwitterUserName.xml?count=1';
$buffer = file_get_contents($twitter_url);

$xml = new SimpleXMLElement($buffer);
$status_item = $xml -> status;
$status =  $status_item -> text;
$length = strlen($status);

if ($length < 141)
{
$file = fopen("tweet.xml", "w");
fwrite($file, $buffer);
fclose($file);
}

Your Web Server can be scheduled to execute this file automatically, for example every one minute, using a Cron Job (reffer to your Web Server’s Control Panel or your Hosting Company to find out how to schedule a Cron Job).

To retrieve the tweet from the XML file and display it wherever you want in your page, use the following code:

$xml = simplexml_load_file("tweet.xml");
$status_item = $xml -> status;
$status =  $status_item -> text;
echo $status;

2 comments | belongs to: tutorials | posted on September, 2009

Creation by ~jasonh1234 on deviantART

Retrieving your latest tweet from twitter is a very simple process. First, you need to request your latest tweet from twitter using its API and then parse the xml response and select your tweet. It’s much simpler than it sounds!

It’s a useful bit of code to use on your site, and allows people to see whether you’re working, playing online bingo or out on the town without going through the motions of manually accessing your twitter page whilst browsing your site content.

You can request your latest tweet from twitter just by using a simple URL: http://twitter.com/statuses/user_timeline/YourUserName.xml?count=1. By replacing YourUserName with your twitter username, you’ll get an xml file containing your latest tweet (you can request more tweets by changing the “count=1” with the appropriate number of tweets) along with some information about your profile.

Using the following PHP code, you’ll get the content of the xml response to the $buffer variable:

$twitter_url = 'http://twitter.com/statuses/user_timeline/burnmind.xml?count=1';
$buffer = file_get_contents($twitter_url);

Now that you have the xml content, you just need to parse it so you can retrieve your tweet. Using SimpleXML, which is a PHP extension that allows users to easily manipulate/use XML data, the content is converted to a set of nodes. The $status variable holds the “status” node and then the $tweet variable gets the child-node named text, which is your tweet. Finally, the tweet is displayed using the echo command.

$xml = new SimpleXMLElement($buffer);
$status = $xml -> status;
$tweet =  $status -> text;
echo $tweet;

Simple, right?

You can also use an alternative way: how to store and retrieve your latest tweet from an XML file

3 comments | belongs to: tutorials | posted on September, 2009

Photo by ~Lily-D-Ray on deviantART

First have a look at the demo page (opens in a new tab) to understand what we’re trying to accomplish. You can also download the tutorial’s source code.

For the blinking cursor effect, we’re going to simulate a DOS prompt. The CSS code of the tutorial is very simple. We just have to align all the paragraphs that will include the text parts in one line:

p
{
float: left;
}

The HTML code includes one paragraph that contains the characters “C:\” (the DOS prompt) and another paragraph named cursor that contains the “|” character, our cursor:

<p>C:\</p><p class="cursor">|</p>

To make the cursor blink, we will create a Javascript function named cursorAnimation(). Using jQuery’s animate() function we first make the cursor disappear setting its opacity setting to 0% and then appear again setting its opacity setting to 100%:

function cursorAnimation()
{
  $("p.cursor").animate(
  {
    opacity: 0
  }, "fast", "swing").animate(
  {
    opacity: 1
  }, "fast", "swing");
}

We want this function to run continuously from the loading of the page, so we’re going to use the jQuery’s $(document).ready() function along with the setInterval() method that calls a function at specified intervals (in milliseconds):

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

Now that we have the blinking cursor we’re going to create the typing effect (based on this tutorial). First, we have to alter our HTML code. We will include a paragraph called caption, a textbox so we can write our preferred caption in there and a button to test the typing effect:

<input type="text" id="userCaption" value="Type something here!" />
<input type="submit" name="submit" value="Test Typing Effect" onclick="testTypingEffect()"/>
<p>C:\</p><p class="caption"></p><p class="cursor">|</p>

First, we define the variables captionLength and caption. When pressed, the button calls the testTypingEffect() function, that sets the textbox’s value to the caption variable and then calls the type() function. The type() function uses the substr() method to cut our preferred caption one letter forward each time it’s called and type it inside the paragraph named caption. Until all the letters of the caption are typed, the type() function calls itself with a delay of 50 milliseconds using the setTimeout() method.

var captionLength = 0;
var caption = "";

function testTypingEffect()
{
  caption = $("input#userCaption").val();
  type();
}

function type()
{
  $('p.caption').html(caption.substr(0, captionLength++));
  if(captionLength < caption.length+1)
  {
    setTimeout("type()", 50);
  }
  else
  {
    captionLength = 0;
    caption = "";
  }
}

For the eraser effect, we will alter again the html code adding another button which when pressed will call the testErasingEffect() function:

<input type="submit" name="submit" value="Test Erasing Effect" onclick="testErasingEffect()"/>

To create the eraser effect, we’ll create the reversed process. The testErasingEffect() function sets the caption paragraph’s content to the caption variable and then computes its length. If there isn’t any content, it types automatically sample content (just for testing reasons) and calls itself. Now that it has a content, it calls the erase() function which cuts letter-by-letter the caption until it’s all gone with a delay of 50 milliseconds.

function testErasingEffect()
{
  caption = $("p.caption").html();
  captionLength = caption.length;
  if (captionLength>0)
  {
    erase();
  }
  else
  {
    $('p.caption').html("You didn't write anything to erase, but ok!");
    setTimeout("testErasingEffect()", 1000);
  }
}

function erase()
{
  $('p.caption').html(caption.substr(0, captionLength--));
  if(captionLength >= 0)
  {
    setTimeout("erase()", 50);
  }
  else
  {
    captionLength = 0;
    caption = "";
  }
}

If you haven’t done it already, have a look at the demo page (opens in a new tab) to test the effects. You can also download the tutorial’s source code.

no comments | belongs to: tutorials | posted on August, 2009