Twitter widget using the Computed Field CCK module

In an earlier article I described how we can create a drupal block to display a twitter profile widget.  This earlier method would use PHP in the block to evaluate the node each time and check if a twitter account existed.  It works great but there are other alternatives I wanted to explore.

Yesterday I started using the computed field module.  This is a CCK add-on module that executes PHP code during a node insert/update and (optionally) stores that value in the database.  I say optionally because I believe you can also set it to evaluate PHP on the fly, however for something like a twitter widget we don't need to do this dynamically.  Once the widget information is stored in the database we only need to display it.

So the objective here is to use the computed field to check if the node contains a twitter account.  If it does then we simply compute the widget code and save it.  If not, we leave it blank.  So let's get started.

Note: I'm going to assume some basic knowledge of installing and enabling modules.

Update 12/20/2010: While importing (i.e. copy/pasting) this particular article the images did not import properly.  If I find the time I may download the originals and repost them. 

Step 1 - Create our content type

Head on over to Administer > Content management > Content types > Add content type (admin/content/types/add).  For now let's keep this simple and give this content type a name of "Company" and a type of "company".  Save the content type.

Step 2 - Add a twitter account field

Next we want to select the "Manage Fields" tab of the company content type.  Scroll down and we see that we can add a new field.  Let's give this new field a label of "Twitter Account", a field of "field_twitter_account", and then select "Text" for the field type and "Text Field" for the field element.

After clicking Save we're taken to the CCK Text field options.  We don't have to change anything here, but since a twitter account has a max of 20 characters, let's set those parameters and then Save the field.

Step 3 - Add the twitter widget field

Let's head back to the "Manage Fields" tab and add another field.  This time we're going to create the twitter widget computed field.  Let's give this field a label of "Twitter Profile Widget", a field of "field_twitter_profile_widget", and then select "Computed Field" for the field type.  The form element will auto populate with Computed.

After clicking Save we're taken to the CCK Computed Field options.  Add the following code in the "Computed Field" section.

$node_field[0]['value'] = '';  // Set empty initially
// If twitter account provided then create widget info
if (isset($node->field_twitter_account[0]['value'])) {
  $node_field[0]['value'] = '<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(\''.$node->field_twitter_account[0]['value'].'\').start();
    </script>';
}

Now scroll down to towards the end of the page and set to store this value in the database as a "Text" field.  In addition make sure the "sortable" option is not checked.

Step 4 - Set the field Display Settings

Now that we have the fields available in the content type we need to configure how we want them to display.  Head on over to the Display Settings tab of the content type.  Set the twitter account and twitter profile widgets as follows.

What we have done is hide the twitter account from displaying on the node.  There is no need to display that if we have the widget.  The profile widget is set to display the computed value (what we set above) on the node page and hide the label.  Both values are also set to hide on the teaser.

Step 5 - Create the content

Now that are content types are created we can go create our company content.  Go ahead and create a few.  You'll notice that after saving the node the twitter profile widget will display.  If you modify the node and change the twitter account the widget should also update to the proper display.

Step 6 - Drink a Beer!

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

Limitations

I do want to point out one limitation of this method.  If the widget code were to change for whatever reason, we'd have to update the content type with the new code.  We'd then have to edit every node and save it so the computed value is recalculated.  There is probably a way to do this in batch (with VBO maybe) but I have not researched that yet.