Archive for the 'Personal' Category

Want to show your latest entry to Twitter on your WordPress blog or website? It’s really very simple. Don’t be scared off by the vague instructions for adding a badge at the Twitter Badge page. The Twitter Badge page has some Flash badges at the very top and some javascript badges immediately below the Flash badges.

We’re mostly interested in the javascript badges. I don’t give two shits about Flash and refuse to add something to this site that will cause unnecessary lag just because it’s “pretty”. I’m a pretty devout follower of the K.I.S.S. philosophy. And besides, all we’re covering here is how to show your latest Twitter entry, pretty basic. Take a look below to see how I display “My Latest Twitter” in my sidebar.

1. Open your themes sidebar.php file (probably in /wp-content/themes/theme_name/).

2. Determine where you would like your Recent Twitter Status to appear in your sidebar.

3. Copy the following code and paste it into sidebar.php in the location you chose in step 2.

<div class="sb-lasttwitter">
<h2><a href="http://twitter.com/yourTwitterUsername/"><?php _e('My Latest Twitter'); ?></a></h2>
<ul><li>
### insert javascript for Twitter Badge here ###
</li></ul>
</div>

4. Open your themes style.css file and add a class called sb-lasttwitter. You can expand on the styling for the sb-lasttwitter class all you want. The CSS I use is below, it should work for most people as-is.

/*- most recent twitter*/
.sb-lasttwitter ul li {
	list-style-type: none;
	}

5. After adding the sb-lasttwitter CSS class, save your style.css file and upload the newly modified file to your website.

6. Login to your Twitter account and click the “Badge” link at the top.

7. Click the first javascript badge, it should automatically select all of the code when you click on it. Copy the selected javascript code to your clipboard (right-click and copy).

8. After you’ve copied the badge javascript, go back to sidebar.php and find the line that reads: ### insert javascript for Twitter Badge here ###. Replace that line with the javascript you copied from step 7.

9. Save sidebar.php and upload it to your website, it goes in the same directory you uploaded style.css to.

10. Done! Visit your blog to (hopefully) see your latest twitter in the sidebar.

Once you’re done with that you should see “My Latest Twitter” in your sidebar. Immediately below that text you should see your most recent Twitter and how long ago it was entered.

You should also note that the code from step 2 may not work for every WordPress theme, in fact, it probably won’t. However, you should be able to make a few simple changes to make it fit perfectly with your blog’s theme. My point is, you may have to modify that code (and the CSS) to make this show properly with the rest of your blog theme.

Please be aware that the Twitter javascript badge breaks XHTML 1.0 Transitional validation. Fortunately, it’s an easy fix to get pages including the Twitter javascript badge to validate again. Remember, this is the javascript we copied in step 7.

Anyway, to make it pass XHTML 1.0 Transitional validation, have a look at the very last line of the javascript, towards the end of the line, should look similar to this:

?callback=twitterCallback&count=1"></script> 

Replace the text above with the following text:

?callback=twitterCallback&amp;count=1"></script>

Modifying the last line of the javascript as described above will make your site/blog pass XHTML 1.0 Transitional validation, assuming nothing else in your site is broken. WDG has some good information on why this change will help your site pass validation.

If you have any problems with this, please let me know! I will try to help people as much as I can, no promises though. If there’s enough interest, I may end up throwing together a very simple wordpress plugin to do all this automatically. It would seem the only Twitter WordPress plugins currently available require the WordPress Widgets plugin, which I don’t use. I just want a simple plugin to include the basic javascript badge without the need for Widgets. If nothing pops up within the next few weeks I’ll probably get to work on a plugin of my own.

There are two full featured Twitter WordPress plugins currently in development, both should be fantastic. The first plugin is Twitter Tools from Alex King. Twitter Tools aims to provide full integration between Twitter and WordPress. The second plugin in development is Twitt-Twoo from Dean J. Robinson. Twitt-Twoo isn’t aiming to be a full integration plugin like Twitter Tools. Twitt-Twoo is much more basic, although I believe it will allow you to post to twitter right from the sidebar of your blog, provided you’re logged in. I’m not sure if that functionality will be included in Twitter Tools as well or not.

Popularity: 18% [?]