• Portfolio of •
Veronica Wong

Twitter news ticker for wordpress

June 12, 2009

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

  1. Download the WordPress plugin from Rick’s HideOut then upload the entire folder to your wp-content/plugins folder in your WordPress directory.
  2. 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.

The Markup

In your head section, we need to call jQuery as well as the newsticker plugin using the following lines of code:

[html]<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.newsticker.js"></script>[/html]

Following that, we will need the following lines of javascript to implement the newsticker plugin:

[html]<script type=’text/javascript’>
$(document).ready(function(){
$("#twitter-feed ul").newsticker();
});
</script>[/html]

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:

[html]<div id="twitter-feed">
<?php twitter_messages(‘username’, [msgs], [list]); ?>
</div>[/html]

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 CSS

The last step is to add little CSS to our feed div to give the ticker some personality:

[css]#twitter-feed{
list-style-type: none;
border: 1px solid #3a78b8;
background: #d7e6f5;
padding: 3px;
margin: 0;
font: 12px helvetica, arial, tahoma, sans-serif;
}[/css]

That’s It!

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.

Comments

Thanks. I can turn the links linking off, but the URL still appears (though not clickable) I would like to remove the link all together. We are just using it as a news ticker and do not need/require interactivity. I want to dissapear the “http://tinyurl.com/mtny2k ” portion of the tweet. I guess I could just create an transparent class for the URL but that seems like a hack to me.

Thanks for the help,

Craig,


Hi,

thanks for this tutorial :)
i’ve got a problem : it work perfectly on the home page (“index.php”), but not on the “single.php” file : what’s the solution?


Hi Veronica,

i found the problem ! it’s a multiple JQuery plugin error…
trying to find a solution..
here is it :

<script src="/scr/jquery-1.3.2.min.js” type=”text/javascript”>
<script src="/scr/jquery.newsticker.js” type=”text/javascript”>
<script src="/scr/jquery.easing.1.3.js” type=”text/javascript”>
<script src="/scr/coda-slider-condensed.js” type=”text/javascript” charset=”utf-8″>


Leave a Comment