This is carrying on from a previous post Twitter Feed using JQuery JSON. Originally, I just used JQuery JSON method to query the Twitter API which got essential bits of a user profile and their time line. It only returned the latest ten results which is sufficient enough with the nature of twitter, tweets get old quick but some are worth checking again. With the Twitter API there is no guarantee to get the exact amount of tweets you requested. What is new in this revised edition of the twitter feed is it will now take the tweets and save a local version of it. This has plenty of benefits like quicker response when querying, view older posts, improved usability and you can customise the output how ever you like. Here is a list of what is new:
Store the tweets locally
Pagination, to view older tweets with side shift animation
See if a post has been retweeted
The feed has an expiry date of four hours to update with new tweets
How have saved the tweets locally? I used JQuery AJAX method to call a PHP script to save in a JSON file. The trick is collecting the tweet data and sending it to the PHP file without the encoding messing up. In the tweets there could be special characters that need to be escaped and encoded, especially if there is a double quote in a tweet. The double quote is used in a JSON object as a property or string value, so if its in the tweet is has to be escaped. To escape the double quotes I wrote a short function which uses a Regular expression to find them all in a tweet.
The PHP file is a fairly simple script. It takes the parsed data and used a method json_decode() which takes a JSON formatted string. This converts the string into a JSON object and we then add a last update date and an expiry date to it. Once happy with the object I run it through the function json_encode() to put it back in a string and save it into a file.
Now with a standard request to the newly created JSON file we just check to see if the document has expired to run the whole process again else generate the Twitter Feed. Outputting the feed has not changed much from the previous example but we are no longer using the JQuery $.each function, I have replaced it with a standard for loop because we need to control the start point and limit for the pagination. I have two simple functions tweetNext() and tweetPrevious() which adjust the start point and limit for the tweets. This also includes the JQuery animate function for the shift side effect. Note: The CSS has changed slightly,
The twitterBox now has an overflow:hidden
The tweet-list position:relative
As you can see it is now calling a function called justTweets(limit, startRow) and this reads the global variable that has been set with tweets and outputs them into the tweet-list. The function local_getTweets() gets the data from the JSON file and sets the global twitter variable.
This twitter feed does have a lot of work left on it but for now this is good enough for anyone to take and play around with. I will be working on it some more and hopefully come out with some new improved features. Enjoy.