• 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:

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

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

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

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:

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

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 twitter_messages('username', 10, true); ?>

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:

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

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

Great idea, thanks! Just a few questions:

- Could you explain where i need to upload the jquery files to within wordpress?
- You’ve got but you’re styling it as a ‘class’ (.twitter-feed). Is that a mistake?


your jquery files can be uploaded anywhere on your server (eg: your root server, within your WP theme folder, etc, as long as you have the right path when you call the files

For example, if you uploaded jquery-1.3.2.min.js into your root folder, you would call it through:

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

But if you uploaded it to your theme folder, you would call it through:

<script type="text/javascript" src="/wp-content/themes/yourtheme/jquery-1.3.2.min.js"></script>

Also, thanks for catching my mistake, I did accidentally put a class in my css instead of an id.


Is there anyway one could merge the news ticker with this hack http://www.tiny.cc/RauBX instead of installing the Twitter for WordPress plugin?

I have been searching for a way to do this for quite a while, I believe that if instead of having a plugin one could simply paste the hack somewhere (for example a sidebar) it could be quite promising.

thanks a lot!


@Gustavo:

I originally had looked for a way to do that as well, without the use of the Twitter for WordPress plugin. Unfortunately, I am not as skilled in PHP as I’d like to be so this was my quick fix to share with everyone. Perhaps in the near future as I learn more, I can come up with a solution that does not use the WP plugin.


Thanks for the tutorial. I was wondering how to get rid of the links in the tweets? Everything is great I have no need to link to the original item. I can “unlink” it but still get a tinyURL displayed in text. I’m sure I’m missing something simple.

Craig,


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