Twitter is an amazing service to keep in touch with everyone on the Internet. It’s easy, fast and there are a lot of Twitter applications.
I came up with the idea to Ajaxify (is that even a word?) the tweets on my website. As you can see, it’s on the right, below the last.fm recently played. It’s called AjaxTwits!
This article will show you how to use AjaxTwits and how to install it on your website.
Example of AjaxTwits is located at: http://gaya.github.io/scripts/ajaxtwits/
AjaxTwits and all it’s files can be downloaded here: http://gaya.github.io/scripts/ajaxtwits/ajaxtwits.zip or the old version
Download the new zip to gain access to the improved code.
What does AjaxTwits do?
- Load a twitter timeline and / or the replies of a twitter account
- Cache the results so you don’t stress the twitter servers
- Avatar finder (auto update if user uploads a new one)
- Load multiple timelines / replies from different accounts
- AJAX support with JSON option or XML
- Automatic hyperlink finder and @username linking
- Easy to adjust to your likings
The problem with loading twitter on the server side part of your website is that it will slow down the load time massively. Which means your pages will load pretty slow.
This is because of the use of external feeds and services, it takes some time to load them. The server will read the XML and RSS feeds very quickly, but PHP still has to load the files from the Twitter servers.
AjaxTwits keeps the load time separate from your website, meaning it will load after your page is loaded and not effecting the user experience. Yes, the services still need to be loaded. But the loading is done afterward.
The caching of results prevents the service to stop loading the feeds. Twitter has a build in limit of requests, so be gentle on their servers.
This also helps to load AjaxTwits very quickly and output tweets in a few milliseconds!
The twitter timeline is also limited to only your tweets and not those of other people. That’s why AjaxTweets also supports search queries performed on http://search.twitter.com/. AjaxTwits has an easy build-in option to get all the reply messages of a user and mix them into the timeline.
What do I need?
- PHP with JSON and SimpleXML support (PHP 5.2.0 or greater)
- A Twitter account to consume or a Twitter account of someone else
- An FTP client to upload contents to the server
How to install:
AjaxTwits is fairly easy to install, the following steps will enable AjaxTwits on your website!
Step 1: Download and upload AjaxTwits
Download AjaxTwits here: http://gaya.github.io/scripts/ajaxtwits/ajaxtwits.zip.
Unzip the contents and upload them to your web server. Anywhere you’d like!
Step 2: Adjust the request file
In the “AjaxTwits“ folder you just uploaded***is a file called “AjaxTwitsRequest.php*” and “AjaxTwitsUpdate.php“. Open this file in an editor.
Adjust the following line to your likings:
*$ajaxTwits->cachefolder = “AjaxTwits/cache”;
This is the folder where the XMLs will be cached. Enter the folder starting in the root of your website. So if you have AjaxTwits installed in */blog/AjaxTwits/ the cache folder should be blog/AjaxTwits/cache.
*$ajaxTwits->cacheTime = 15;
*The amount of minutes the XML should stay on your server before it will be refreshed.**This means that every 15 minutes the timeline will be updated on your site. Adjust to your likings.
$ajaxTwits->itemCount = 6;
The amount of items you want to output on your website.
Load the public timeline of the given username.
Load the replies of the given user. Every tweet on Twitter containing @gayadesign in this case.
Upload the adjusted file to your server if needed.
Step 3: Make the cache folder writable
Explore the server contents with an FTP client and make the cache folder (default: AjaxTwits/cache) writable using chmod 777.
This is for saving XML on the server.
Step 4: Include AjaxTwits on your webpage
In the header () of your HTML add the following code:
Step 5: Get the HTML of the widget ready
Add this to your HTML on the place you want to include the widget:
The tweets that are loaded will be inserted into the unordered list with id AjaxTwits. The list item *AjaxTwitsLoader *will be deleted.
Adjust getAjaxTwits(“AjaxTwits/AjaxTwitsRequest.php”, “AjaxTwits/AjaxTwitsUpdate.php”, 6); to your preferences.
The first parameter is the location of the AjaxTwitsRequest.php file. The second parameter is the location of the AjaxTwitsUpdate.php file. The third parameter is the amount of items to show.
That’s all you have to do! Not that much right?
Hope this will help you create a nice Twitter widget on your website.