Integrating Twitter with Drupal

Right, so I was going to write a little how-to for people that want to integrate their Twitterfeed in their Drupal site. As I twittered yesterday; iit was just TOO easy...

Step 1: Get your code right

Assuming you already have a Twitter account, the first step is to go to Twitter Widget Chooser, tick for HTML widget and click continue.

Here's where you can customise your HTML output. I would copy all the text in the textarea and paste it into your editor of choice (mine is Adobe Dreamweaver), and then change as desired.

Here's my code:

<div id="twitter_div">
	<h2 style="display: none;" >Twitter Updates</h2>	
    <ul id="twitter_update_list" class="item-list"></ul>
        <a href="http://twitter.com/fuselagetown" id="twitter-link">
            <span>follow me on Twitter</span>
        </a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/
blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/
user_timeline/fuselagetown.json?callback=twitterCallback2&count
=5"></script>

Things to note:

• I don't want the headline to display because I want to replace it with a custom graphic. Hence the display:none on the H2.
• I also want the "follow me" link to be a graphic - so I added a span inside the a href that I'll later hide in the css.

Copy that code to your clipboard.

Step 2: Drupal Blocks

Go to your drupal blocks in yoursite.com/admin/build/block and click add a block. Paste your code in there, hit save and place it where you'd like to have it. Personally I think it works well in a sidebar, so that's where it'll go! If you don't like to display it on all pages you can click configure and alter the settings in there, but I think it works well the way it is.

Step 3: Style your widget

As default it looks pretty poor - but this is where the fun bit comes in ; The styling.

This is my CSS:

#block-block-3
{
	background: #234682 url(../images/fuselagetwitter.png) no-repeat ;
	padding-top: 60px;
	color: #83d8f4;
}


#twitter-link
{
	background: url(../images/twitter-bird-5.png) no-repeat bottom ;
	width: 220px;
	height: 83px;
	display: block;
}

#twitter_div li
{
	padding: 5px;
	margin: 0 5px;
	border-bottom: 1px solid #2f5390; 
}


#twitter_div p
{
	padding: 0;
}

#twitter-link span
{
	display: none;
}

#twitter_div a
{
	color: #3698b9;
}

#block-block-2
{
	padding: 10px;
}

Things to note:

• The #block-block-3 holds the top graphic, which is my twitterlogo which I've merged with the corner graphic in Photoshop.
• The #twitter-link holds the graphic, and as you can see I've hidden the span inside the link.
• I've added a Hover state to the li which I think is a nice touch, but only if it's done in a subtle way.

Other that that it's pretty much straight forward use of padding and margin to make the content appear nicely on the site, and as always the text colour is important to look at so that reading it is comfortable for your eye. Nothing worse than awful typography on the web!