Over the last few years, Twitter has become a very popular marketing tool and more and more people are integrating their Twitter updates onto sites outside of Twitter. This tutorial will teach you how to display up to 20 of your latest Twitter updates in a fading news ticker on your WordPress blog. This is an elegant alternative to using a Twitter Badge and takes up little room on your site.
View demo of a news ticker at TexoTela
What we need
Install Twitter for WordPress
- Download the WordPress plugin from Rick’s HideOut then upload the entire folder to your wp-content/plugins folder in your WordPress directory.
- Login to your WordPress admin panel, and go to the Plugins section. Click on Activate next to the Twitter for WordPress plugin.
Download the jQuery files
Download the latest version of jQuery and the newsticker plugin. Upload both these files to your web server.
In your head section, we need to call jQuery as well as the newsticker plugin using the following lines of code:
This applies the newsticker to the unordered list that will be created within our #twitter-feed div.
The next step is to create the div in which our news feed will show up. Paste the following code where you want the news ticker to appear:
<?php twitter_messages(‘username’, [msgs], [list]); ?>
The line of PHP in the above code calls the Twitter for WordPress plugin with the following parameters:
- username: Replace this with your twitter username
- [msgs]: The number of tweets to show (max 20, limited by Twitter)
- [list]: Whether or not to show tweets in an unordered list
For example, in order to show the last 10 tweets in an unordered list:
[php]<?php twitter_messages(‘username’, 10, true); ?>[/php]
It is important that we set [list] to true because the newsticker script takes each list item as a “news item”.
There are other options for the Twitter for WordPress plugin, which you can read about at Rick’s HideOut, but those parameters are not required for this tutorial.
The last step is to add little CSS to our feed div to give the ticker some personality:
border: 1px solid #3a78b8;
font: 12px helvetica, arial, tahoma, sans-serif;
As you can see, this was a very simple tutorial. Additionally, this was my first time writing a tutorial so any comments you have would be greatly appreciated.