A different twitter widget for each #drupal node

I'm putting together a site that has a content type called Company.  Each company may or may not have a twitter account where they broadcast updates.  The requirement is to display a twitter widget on each company node if one exists.  

My first thought was to search through the list of custom modules instead of trying to reinvent the wheel.  I found several twitter-related modules, however nothing seemed to fit the bill.  The closest module was the twitter module but that connects users accounts to their twitter accounts.  I need something to connect companies (as nodes).

Later through a google search I found that twitter.com offers widgets, and specifically a profile widget.  The profile widget, which you can now see on the right side of this blog, provides the html/script code to place inside of your website to display the twitter feed of any account.  We can use this widget and create a drupal block with some PHP code to pull the twitter account from the company node and display this widget.

I'm going to assume that the reader has some basic knowledge of the CCK module and how to create a drupal block.

Step 1 - Adding twitter account field to the company content type

Head on over to Administer > Content Management > [Content Type] (admin/content/node-type/[content-type]/fields) and select the Manage Fields tab.  Towards the bottom of the screen we'll add a new field.  I gave mine the label of Twitter Account and field_twitter_account.  Use the single line text field/widget type.  Twitter accounts can be up to 20 characters so I set the field to allow a max of 20 characters of plain text.

Step 2 - Creating your content

Now that we have our content type created, let's create some content.  Create a new node and populate the twitter account field.  Go ahead and create several nodes if you like.

Step 3 - Create the Twitter Widget

Head on over to the twitter profile widget and follow the instructions provided to create the twitter profile widget.  When you are done copy the code provided for later use.

Step 4 - Create the Twitter block

Head on over to Administer > Site Building > Blocks (admin/build/block/add) and select to add a new block.  In the body of the block we are going to add the code copied from the twitter profile widget.

<?php
$node = menu_get_object();
$twitter_acct = $node->field_twitter_account[0]['value'];
if (!is_null($twitter_acct)) {
?>

<script src="http://foggyperspective.com/%3Ca%20href%3D"http://widgets.twimg.com/j/2/widget.js">http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 6,
interval: 6000,
width: 'auto',
height: 200,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('<?php
echo $twitter_acct;
?>').start();
</script>

<?php
}
?>

The code above in blue is PHP code that has been manually added to the code provided by the twitter profile widget.  The PHP code does several things.  It first loads the node object and then the twitter CCK field we created.  If the field is not null then it will display the twitter profile code.  Within the twitter profile code we also add the twitter account value to use.

Note: Make sure to select the input format of PHP code so that the block can evaluate the code.

Step 5 - Add the block to a region in your theme

Now that we have a block created we can add the block to any region within our theme.  Make sure to make the block visibility settings such that it will only display on node pages for the content type we're interested in.  If you are unfamiliar with how to do this, check out some php block visibility snippets or use the excellent Context module.

Step 6 - Drink Beer!

This is the most important step in the whole tutorial.  Let's not forget to follow it.