Max Beatty

I know this has been cov­ered more than once, but my old AI Marty specif­i­cally asked me how I inte­grated Twit­ter with my site so I  thought I’d write out a lit­tle more than 140 char­ac­ters in response.

I have to admit most of the work was done for me by CSSRockstars’s free theme Cha­rade, although I had to do some tweak­ing to get it how I liked. They used Twitter’s Blog­ger javascript file to insert the lat­est update of a user to an ele­ment 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 wrap­per div around the list is just for the CSS styling. The CSS­Rock­stars chose to make a sep­a­rate file where you could fill in your user­name for Twit­ter and the other social net­works in the header. If you have plain HTML, you can just put ‘user­name’  instead of ‘<?php echo $mytwit­terid; ?>’. The last para­me­ter on the Twit­ter JSON call is how many tweets to retreive so if you wanted 5 or 10 instead of 1 you change that value. It’s impor­tant to note that the scripts are called in the footer of the page and the twit­ter 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, Word­Press plu­g­ins, and even Twitter’s own badges you can use but I think this method gives you a lit­tle more con­trol over how and what to display.

I also added a but­ton that didn’t come from CSS­Rock­stars to allow peo­ple to tweet about the cur­rent post they were read­ing. I used to use Twit­This but the but­ton 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 cus­tom but­ton 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 actu­ally loaded via CSS in the back­ground using this lit­tle one liner:

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

Hope­fully this helps Marty and any­one else look­ing to add a lit­tle more Twit­ter to their site!