Trailer-Review.com: A Drupal Weekend Project

I love microblogging and the social medias.  I'm always looking for little social media experiments as well.  Besides this blog, I'm always thinking up other ways to drum up interested readers, inform readers, and give out my opinions.  Of course, one of those genres that I love commenting on is movies and the crazyness of Hollywood.

Microblogging services such as Twitter, Pownce, FriendFeed and their social media friends are also another fun place to express an opinion.  Twitter has one interesting limitation - that is, all posts have to be 140 characters or less.  In some ways, this makes it as much of an art form as a short form blogging service.  For my personal account, one of the reasons I use Pownce is because I like to convey a unique thought without having to edit for 140 characters.  But, for more rehearsed messaging, I figure that the 140-character limit can be a sort of editing challenge.

With this in mind, I created the trailer_review Twitter account.  On this account, I post an 140-character or less review of the movie preview, starting with the title of the movie and ending with a link to the preview.  But, after posting a couple trailer mini-reviews, I decided that I'd want a website to go along with that I could provide more information at a later time, if I wanted.  Plus, not everyone is yet on Twitter, so maybe others would like a separate site where the could grab an RSS feed, leave comments, etc.  Thus, thanks to the power of Drupal, it took a couple hours to get a functional, decent-looking website working.  This is the store of Trailer-Review.com, my first-ever Drupal weekend project.  (Full disclosure: It took me two weekends to do all these steps because I was working on a couple paying freelance projects and doing other things, but these processes could easily be done in one free weekend.)  To paraphrase Strong Bad, "Feel free to follow along with my simple step-by-step instructions. I make [Drupal] FUN!"

Step I: Setting Up The Site
To set up a site, you need to have a LAMP (Linux, Apache, MySQL, PHP) server that you can set the site up on.  OK, so I lied, you could run it on Windows, you can run it on IIS, and of course you and run it on Python (or even Oracle, I hear).  So, basically, you need PHP, but the LAMP stack is the easiest.  Set up the site, then download the latest version from the drupal.org website and decompress it.  (We used Drupal 6.6.)  Access the public URL of the site and follow the instructions to install the site.  You will need database information and will be able to set up an administrator account.
Step II: Adding Contributed Modules
Download the following modules for Drupal 6.x:

Uncompress these folders and place those in a folder called sites/all/modules folder. Then, go to "Administer"->"Site Building"->"Modules" and turn on these part of the modules:

  • Content
  • Link
  • Trigger
  • Twitter
  • Twitter actions

Now we're ready to start configuring the modules we've installed.
Step III: Configuring Content and Link
To setup the content items, we want to have the title and body as well as the URL for the site to watch the movie trailer.  The title and body are included in the default stories, but we'll use the Content Construction Kit to create that URL field and the link to that trailer.  Here we go:

  1. Go to "Administer"->"Content Types".
  2. Click on the "manage fields" link next to "Story".
  3. Under "Add," type the label "Trailer Link", field name "field_trailer_url", and "Link" for the type of data.
  4. Click on "Save".
  5. On the next page underneath "Global settings," check "Required".
  6. Select "Static Title" for the "Link Title" section.  Click "Save field settings".
  7. Towards the top of the page, click on "Display fields".
  8. Change "Label" from "Above" to "<Hidden>" and click "Save".

Step IV: Configuring Twitter
For this site, we want Twitter to be posted to any time new content is posted to the site.  To do this, we use the Twitter Actions part of the Twitter Module.  We will set up an Action and then use the Trigger module to make it run every time we create some content.  Here's how we want to configure it:

  1. Go to "Administer"->"Site configuration" and click on "Actions".
  2. At the bottom of the screen under "Make a new advanced action," select "Post a message to Twitter..." and click "Create".
  3. Type in your Twitter account name and password and then type in the message. (Note the use of the % symbol with specific keywords allows you to add the new content - for my site, I used %title: %teaser %node_url.)
  4. Click "Save".
  5. Next, go to "Administer"->"Site building" and click on "Triggers".
  6. Under the "Trigger: After saving a new post" section, select the "Post a message to Twitter" action (or whatever you named it during Step 3 and 4).
  7. Click "Assign".

Voila!  Now we've got a working site that posts to Twitter when we post and also provides a link to the trailer.  However, there's a couple things more.
Appendix A: URL Shortening for Twitter
First, we want to give us more space on our Twitter posts so that, instead of Twitter using <a href="http://www.trailer-review.com/node/14">http://www.trailer-review.com/node/14[/geshifilter-code] as our URL, we get a shorter URL. There are a number of fancy URL shortening services such as TinyURL, but I chose Bit.ly because it's a bit shorter than TinyURL anyways. After signing up for an account, I can write some code to request a shortened URL for my longer URLs via their handy API. Unfortunately, in order to get these in the Twitter Actions module, I have to hack the sites/all/modules/twitter/twitter_actions/twitter_actions.module file. I took this part:
// Node-based variable translation is only available if we have a node.
if (isset($node) && is_object($node)) {
$variables = array_merge($variables, array(
'%uid' => $node->uid,
'%node_url' => url('node/'. $node->nid, array('absolute' => TRUE)),
'%node_type' => node_get_types('name', $node),
'%title' => $node->title,
'%teaser' => $node->teaser,
'%body' => $node->body
)
);
}
and replaced it with this:
// Node-based variable translation is only available if we have a node.
if (isset($node) && is_object($node)) {
$node_url = url('node/'. $node->nid, array('absolute' => TRUE));
$headers = array('Content-type' => 'application/x-www-form-urlencoded');
$short_url_json = drupal_http_request('http://api.bit.ly/shorten?version=2.0.1&longUrl='.urlencode($node_url).'&login=BITLY_API_ID&apiKey=BITLY_API_KEY', $headers, 'POST', NULL);
$short_url = json_decode($short_url_json->data)->results->$node_url->shortUrl;
$variables = array_merge($variables, array(
'%uid' => $node->uid,
'%node_url' => url('node/'. $node->nid, array('absolute' => TRUE)),
'%node_type' => node_get_types('name', $node),
'%short_url' => $short_url,
'%title' => $node->title,
'%teaser' => $node->teaser,
'%body' => $node->body
)
);
}
If you read PHP code pretty well, you can see that I added one more variable to the options for the configurable Action we made. I've created a %short_url variable that has taken the old %node_url data and retrieved a shorter version from the Bit.ly site. To get it to print out the shorter URL, though, you have to go back to "Administer"->"Site configuration"->"Actions" and configure the action we made in Step IV to use %short_url instead of %node_url. (Of course, to get this to work, you have to replace the BITLY_API_ID and BITLY_API_KEY with the ones supplied in your Bit.ly account page.)
Appendix B: Keeping Track of the Character Count
Since I want to post these pithy reviews to Twitter, I want to know how many characters long the title and body with all the formatting is.  Therefore, I created the "count_characters" module.  First, I created count_characters.info file as follows:

; $Id$
name = Count Characters
description = Adds a custom listing of how many characters are left.
php = 5.1
core = 6.x

Then, I created the count_characters.module file where I Add space to list the characters in all content add/edit forms and include the forthcoming JavaScript file:

< ?php
/**
* Implementation of hook_form_alter().
*/
function count_characters_form_alter(&$form, $form_state, $form_id) {
if (substr($form_id, -10) == '_node_form') {
drupal_add_js(drupal_get_path('module', 'count_characters') .'/count_characters.js', 'module');
$form['count_chars'] = array(
'#type' => 'markup',
'#prefix' => '',
'#value' => 'Character Count: Unknown',
'#suffix' => '',
'#weight' => '-5',
);
}
}

Finally, here's some JavaScript that uses the JQuery library built into Drupal to count up the size of the title and body and tell you how many characters this will be on Twitter. This is count_characters.js:

if (Drupal.jsEnabled)
{
$(document).ready(function()
{
$("#edit-title").keyup(function() { calculateTotalChars(); });
$("#edit-body").keyup(function() { calculateTotalChars(); });
calculateTotalChars();

function calculateTotalChars()
{
titleCount = $("#edit-title").val().length;
bodyCount = $("#edit-body").val().length;
totalChars = titleCount + 2 + bodyCount + 1 + 19;
$("#character_count").html(totalChars);
}
});
}

Note that in line 11, we not only take the length of the title and body together, but add some more characters. The Bit.ly URL should be 18 or 19 characters, at the most, and then we have 2 characters for ": " between the title and the body and 1 for another space between the body and the URL. Save these files in sites/all/modules/custom/count_characters/ and then enable the module via the "Administer"->"Site building"->"Modules" page. Now we know exactly how many characters our Twitter post will be!
Final Thoughts
For a weekend project, this is a great start of a site hat may prove to be a useful little site someday. There were a couple other things I did, such as customizing the color of the Garland theme, customizing the comment settings, and enabling OpenID for commenters to login via OpenID if they like. Of course, there's always more work to do, such as creating a custom design, added embedded versions of movie trailers to each post, and maybe integrating with other social media services. But that's for another weekend project!

Comments

Clever idea Dan. It will be interesting to see what kind of traffic you generate. :)

Looks like some of your php code has some escaping issues.

You're right, Collin. The WYSIWYG editor got in the way one time in there and started escaping my code. Thanks for pointing it out.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.