Max Beatty

I know this has been covered more than once, but my old AI Marty specifically asked me how I integrated Twitter with my site so I  thought I’d write out a little more than 140 characters in response.

I have to admit most of the work was done for me by CSSRockstars’s free theme Charade, although I had to do some tweaking to get it how I liked. They used Twitter’s Blogger javascript file to insert the latest update of a user to an element on the page with the ID of ‘twitter_update_list’. It’s really only 5 lines of code to get you started:

<div id="twitter">
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<?php echo $mytwitterid;?>.json?callback=twitterCallback2&count=1"></script>

The wrapper div around the list is just for the CSS styling. The CSSRockstars chose to make a separate file where you could fill in your username for Twitter and the other social networks in the header. If you have plain HTML, you can just put ‘username’  instead of ‘<?php echo $mytwitterid; ?>’. The last parameter on the Twitter JSON call is how many tweets to retreive so if you wanted 5 or 10 instead of 1 you change that value. It’s important to note that the scripts are called in the footer of the page and the twitter div is in the header. This allows the rest of the page to load and then make the JSON call so your page load doesn’t hang on it. Here’s the CSS that’s used to style it:

#twitter {
position: relative;
padding: 14px 0 0 60px;
height: 33px;
background: url(img/twitter.gif) top left no-repeat;
color: #7A94A0;<span> </span>
font-size: .95em;
text-align: left;
}
#twitter a { color: #7996A2;}
#twitter a:hover { color: rgb(0, 142, 239); }
ul#twitter_update_list { list-style-type: none;}
ul#twitter_update_list li { width: 550px; }

There are other jQuery scripts, WordPress plugins, and even Twitter’s own badges you can use but I think this method gives you a little more control over how and what to display.

I also added a button that didn’t come from CSSRockstars to allow people to tweet about the current post they were reading. I used to use TwitThis but the button didn’t feel right and it required you to log in through a 3rd party. By the time you did all that you might as well use my custom button and Twitter’s actual site. Here’s the code to that:

<a href="http://twitter.com/home?status=Reading: <?php the_title(); ?> < ?php the_permalink(); ?>" 
title="Click to send this page to Twitter!" 
target="_blank" 
class="share7"></a>

The image is actually loaded via CSS in the background using this little one liner:

.share7 { background: url(img/6.png) top left no-repeat; }

Hopefully this helps Marty and anyone else looking to add a little more Twitter to their site!