How to Add Twitter to Your Drupal Site

published by aaron on Wed, 10/08/2008 - 17:41

Update: This tutorial was written before there was a Twitter module. You might want to take a look at the Twitter module first: http://drupal.org/project/twitter.

One of the best communication tools on the Internet today for both individuals and businesses is Twitter.com. Twitter is a short form communication tool that allows you to post a message of 140 characters or less. As a member of Twitter, I can follow other users and view their updates. How does this benefit individuals or businesses? A lot of very interesting individuals are on Twitter. One way for an individual to benefit from Twitter is to use the service as a way to keep their followers updated on the latest news about themselves. You can point followers to recent blog posts or even to your latest project. Another example is Dell. Dell uses the service to keep their customers updated on the latest discounts for their products. Twitter is a great way for both individuals and businesses to leverage their brand equity.

This article will explain how to easily add your Twitter updates to your Drupal site. We will add the code provided by Twitter to a Drupal block, and then use CSS to style the block to fit our site. Our finished product will look like this:

To get started, go to http://twitter.com/badges/which_badge. We are given three choices: 1) Flash, Just Me 2) Flash, With Friends, and 3) HTML/JavaScript. Choose HTML/JavaScript:
After we select HTML/JavaScript, we are taken to the http://twitter.com/badges/html page:
On this page, the default number of updates is five. For my site, five updates are perfect. You may choose to add or subtract the number of updates depending on your style. The next thing to do is to check the checkbox that says “No Title.” We will add in our own title later, so go ahead and get rid of it here. Copy the code that is provided and move on to the next step. The code will look similar to this: 
  1. <div id="twitter_div">
  2. <ul id="twitter_update_list"></ul>,</div>,
  3. <script type="text/javascript" 
  4. src="http://twitter.com/javascripts
  5. /blogger.js"></script>,<script 
  6. type="text/javascript" src="http://twitter.com
  7. /statuses/user_timeline
  8. /Anarchtica.json?callback=twitterCallback2&
  9. amp;count=5"></script>
In the code above, Anarchtica is my Twitter username and count=5 sets the number of updates that will display on your site. You can always change this count later if you want to add or subtract the number of updates displayed on your site. Now go to your administration page on your Drupal site. Under “Site building,” choose “Blocks”:
Click the “Add block” link or the “add block page link”:
On the “Add block” page, type in Twitter for the block’s description. Leave the “Block title” blank, we will give it a title shortly. Under “Block body,” paste in the code from the Twitter badges page.
Expand the “Input format” field, and choose Full HTML.
Under “User specific visibility settings,” choose “Users cannot control whether or not they see this block.”
Under “Role specific visibility settings,” you can leave both options unchecked.
Under “Page specific visibility settings,” choose “Show on every page except the listed pages.” Leave the “Pages” field blank.
Of course, you can modify these settings to fit your specific site. If we were to click “Save block,” the block would look similar to this (Do not click “Save block” just yet, the following screenshot just shows what the block would look like if we did click “Save block”):
Ouch! What happened? Why are there only commas or something similar? (The background color is the background of the page, we have not edited the CSS to style the block yet). Remember, the code we copy and pasted from the Twitter badge page looked similar to this: 
  1. <div id="twitter_div">
  2. <ul id="twitter_update_list"></ul>,</div>,
  3. <script type="text/javascript" 
  4. src="http://twitter.com/javascripts
  5. /blogger.js"></script>,<script 
  6. type="text/javascript" src="http://twitter.com
  7. /statuses/user_timeline
  8. /Anarchtica.json?callback=twitterCallback2&
  9. amp;count=5"></script>
Notice the commas after the </ul> </div> and </script> tags? They do not belong in the code and we need to fix this before we click “Save block.” Scroll back up to “Block body.” Copy just this portion of the HTML/JavaScript code: 
  1. <script type="text/javascript" 
  2. src="http://twitter.com/javascripts
  3. /blogger.js"></script>,<script 
  4. type="text/javascript" src="http://twitter.com
  5. /statuses/user_timeline
  6. /Anarchtica.json?callback=twitterCallback2&
  7. amp;count=5"></script>
Paste that portion of the code into a text editor such as Microsoft Word so we can paste it somewhere else shortly. Now that we have done that, delete that portion of the code from the “Block body” so the “Block body” now looks like this: 
  1. <div id="twitter_div">
  2. <ul id="twitter_update_list"></ul>,</div>,
Delete the two commas from the above code and make it look like this: 
  1. <div id="twitter_div"><ul id="twitter_update_list"></ul></div>
We originally clicked the “No Title” checkbox on the Twitter badge page so that we could add in our own title later. We will add in the title now. Do this by adding in the code between the <h2> and </h2> tags to look like this: 
  1. <div id="twitter_div"><h2 class="twitter-title">twitter</h2><ul id="twitter_update_list"></ul></div>
The twitter text between the <h2> and </h2> tags is the actual heading for our Twitter block. You can change this text fit your style. Now you can click “Save block.” After you click “Save block,” you will be taken to the build block page. Hover your mouse over the cross to the left of the block that says Twitter and move it into the region you would you would like the block to display in. I have placed my block in the right sidebar region:
Click “Save blocks” at the bottom of the page to save your changes. We now need to copy and paste the JavaScript code we deleted from the Twitter block and paste it into page.tpl.php. The Twitter badges page says:
The page.tpl.php page is where the <body> tag resides, so we will paste the code there. You can find the page.tpl.php page in the same folder as your theme. So open up your favorite FTP client and navigate to your theme’s folder. For example, if you are using the Garland theme, navigate to /themes/garland and you will see page.tpl.php. I am using the Zen theme that I have modified to be a sub-theme. Therefore, my page.tpl.php page was located in the main Zen theme directory. Since I wanted to modify the page.tpl.php page, I had to copy that file and place it into my sub-theme directory. I could then modify the file located in the sub-theme directory, and it would take precedence over the page.tpl.php page located in the Zen theme directory. Edit the page.tpl.php page by copying the code you saved earlier and pasting it right above the </body> tag so that it looks similar to this (remember to delete the comma that is located between the two <script>,</script> tags): 
  1. <? php print $closure ?>
  2.  
  3. <script type="text/javascript" 
  4. src="http://twitter.com/javascripts/blogger.js"></script>
  5. <script type="text/javascript" 
  6. src="http://twitter.com/statuses/user_timeline/Anarchtica.json?callback=twitterCa
  7. llback2&count=5"></script>
  8.  
  9.   </body>
  10. </html>
The text between the <script> and </script> tags is what we pasted into the page.tpl.php page. Remember to paste in your specific code and to not copy and paste my code since this has my specific Twitter information. Save this change and now go back to your site. Your Twitter block should now look similar to this:
At this point, we know that it at least works. We now need to give the block some style. If you are using the Garland theme, use your FTP client again to go back to /themes/garland and edit the style.css file. My CSS file is aaron.css and is located in /sites/all/themes/aaron. The four CSS pieces we need to add to our CSS file are: 
  1. div#twitter_div 
  2.   {
  3.   font-size: 12px; /* use this to change the font size of the Twitter updates */
  4.   font-weight: bold; /* I made the Twitter updates font bold to make it easier to read */
  5.   border-style: solid; /* makes the border around the Twitter block solid */
  6.   border-width: 2px; /* sets the width of the border around the Twitter block */
  7.   border-color: #C5C295; /* sets the color of the border around the Twitter block */
  8.   text-align: justify; /* makes the Twitter updates text justified */
  9.   background-color: #D7D39A; /* sets the background color of the Twitter block */
  10.    }
  11.  
  12.   #twitter_div ul 
  13.   {
  14.   margin: 0px 10px 0px 10px; /* positions the Twitter update text 10 pixels from the right and 10 pixels from the bottom.  This makes the text line up properly in the Twitter block. */
  15.   padding: 0px 0px 10px 0px; /* sets the padding of the Twitter update text to 10 pixels from the bottom */
  16.    }
  17.  
  18.   #twitter_update_list li 
  19.   {
  20.   margin: 10px 0px 0px 0px; /* separates the Twitter updates with a 10 pixel margin at the top between each of the updates */
  21.   padding: 0px 0px 10px 0px; /* gives a 10 pixel padding between each of the Twitter updates on the bottom */
  22.   list-style-type: none; /* gets rid of the bullet point next to each of the Twitter updates */
  23.   border-bottom: 2px solid #C5C295; /* separates each of the Twitter updates with a 2 pixel border at the bottom and gives it a color */
  24.   color: #555555; /* sets the font color for the Twitter updates */
  25.    }
  26.  
  27.   .twitter-title
  28.   {
  29.   font-size: 20px; /* sets the Twitter title font to 20 pixels */
  30.   font-weight: normal; /* sets the title font weight to normal */
  31.   color: #444444; /* sets the title font color */
  32.   text-align: center; /* centers the title within the Twitter block */
  33.   background-color: #7D9C1F;  /* sets the green background color for the title */
  34.   }
Once you have added the above CSS code and modified any of it, go ahead and save the file and view your new Twitter block! It should look similar to this:
Congratulations! That wasn’t so hard was it? Have a question or comment? Go ahead and leave your feedback in the comments below. Aaron