Tweet into Drupal: 3 ways to add Twitter updates to your site

Articles

Twitter is great, isn’t it? All those pithy thoughts you and your friends have on the bus or while watching TV can be instantly captured and sent to the world. But meantime your Drupal site is just sitting there quietly missing out on all the fun. It doesn’t have to be that way though: follow the simple steps here and your site can get on the Twitter bandwagon too.

1. Sidebar widgets

Widgets are little snippets of code, commonly powered by Javascript, that you can copy and paste into your site. In Drupal it’s easy to incorporate such widgets by creating custom blocks for them.

Twitter makes a number of widgets that you can simply customise and download. At the time of writing there are four different types available from their site at http://twitter.com/widgets:

  1. Profile Widget. Displays the latest tweets for a public account. It can be your own account but it doesn’t have to be: how about your favourite musician or company?
  2. Search Widget. Displays the latest tweets matching a search. Useful for displaying the latest updates on a particular topic. Watch it though: the results will be completely uncensored, so choose your search carefully.
  3. Faves. The latest tweets marked as favourites by a particular account. If it’s your own account, this can be a simple (and safe way) to republish selected updates by others.
  4. Lists. The latest tweets from a bunch of users. Make your own lists or use ones by other people, to get all the posts from members of a band, experts on particle physics or just some random types who like the same stuff as you.

Let’s assume you are going to use the profile widget for your own account. Go to http://twitter.com/widgets and click on the “My Website” option and then on the Profile Widget link.

Enter the username for the account you want to display then use the different options to customise the widget for your needs. You may want to ask a web designer for help to get the ideal dimensions and colour settings to fit with your site.

Customize your profile widget at Twitter.com

Customising a profile widget

Once you are happy with the widget, press the “Finish and Grab Code” button to obtain the code for the widget. You might want to paste it into a text file for safe keeping while you move onto the next step: creating a custom block.

On your Drupal site, make sure you are logged in as a user with permission to add blocks and input full HTML. The main administrator account should be fine, but other accounts may not have the required permissions.

Go to the Administer -> Site building -> Blocks page and click on the Add Block link. On the Add Block page fill in the form with a memorable description (such as “Twitter widget”) then paste the code from Twitter into the body area. Be sure to select an input format such as “Full HTML” which allows javascript to be inserted, and to turn off the rich text editor if you have one installed, before pasting the code.

Adding a block in Drupal

Save the block, then on the main blocks page you can position it to appear where you want.

Positioning the new widget block

The main blocks page

2. The Twitter Module

You will not be surprised to learn there is a Twitter module for Drupal. It provides a simple means of importing Tweets from user accounts as well as the ability to post notifications back to Twitter, for example to let Twitter followers know of new blog posts on your site.

The module is easy to install in the usual way. If you want to send notifications back to Twitter then there is a separate optional Twitter actions module to be enabled.

The Twitter module

Once the module is enabled you can grant permission to your users to import Tweets from their Twitter accounts. The current release uses “basic authentication” (username and password) though this shortly to be turned off by Twitter. The new authentication method required by Twitter for all applications, OAuth, is still only supported by the development version of the module.

Since the module works with Views you can then display the results in all sorts of ways, according to your needs. If you have turned on the Twitter actions module, you can also use workflow triggers to post updates back to Twitter accounts, such as notifications of new posts.

Right now this module doesn’t allow you to get other types of data from Twitter such as searches or favourites. Hopefully that is something that will be rectified soon.

3. Twitter Feeds

Another way of getting Tweets into your site is to read them from the feeds that Twitter provides. This approach is potentially more powerful than the other two, but it can be a little bit complicated to set up.

First, you’ll need a feed aggregation module installed. There are a few on offer of which the most commonly used are the core Aggregator module, simple but limited, and the contributed FeedAPI module, much smarter but confusing to the novice.

For simplicity, let’s use the Aggregator module, and suppose we want to display the results of a Twitter search. First go to the Twitter home page, log in to your account, then enter your search words in the box in the right hand column. Put the words in quotes to match an exact phrase.

When the results page comes up, look down the right hand column for the feed link, titled “RSS feed for this query”. Click on the link to see the feed content, then copy the URL for the link from the browser address bar.

Twitter RSS feed link for a search

On your Drupal site enable the Aggregator module if you haven’t already done so and go to the Administer -> Content Management -> Feed Aggregator page, then click on the Add Feed tab.

Adding a feed

Adding a feed

Once you have added your new feed, Aggregator creates a block for you which can be displayed in a sidebar or other region as appropriate. As Aggregator doesn’t get any data from the feed until cron is run, you may want to run cron manually so you have something to display right away.

A block for a feed created by Aggregator

You can also get feeds from Twitter for user statuses. The RSS feed link looks like the one for a search and appears in roughly the same place on the page. There is one extra step before adding the feed for a user to Drupal: you need to change the URL a little bit. If the URL looks like this:

http://twitter.com/statuses/user_timeline/18637015.rss

You need to change the “rss” at the end to “atom” instead:

http://twitter.com/statuses/user_timeline/18637015.atom

(This is because of an odd bug in Twitter which sometimes occurs in its RSS feeds, but not in its Atom ones for some reason. RSS and Atom are two different formats of feed, both of which can be read by Aggregator.)

Summary

Twitter and Drupal don’t need to be strangers. Getting tweets into Drupal is not hard at all, in fact, as you’ll have seen. But what I’ve covered here only scratches the surface of what is possible,¬†given a little ingenuity and code.

Figure W would be tickled to bits to help you realise your idea to bring Twitter and Drupal together. Call us on 07783 386951 or use our contact form to tell us about it. And, oh yes, we’re @figurew on Twitter, too.

Share this post:
  • Digg
  • Technorati
  • del.icio.us
  • StumbleUpon
  • Facebook
  • Sphinn
  • TwitThis

7 Responses to “Tweet into Drupal: 3 ways to add Twitter updates to your site”

  1. Navdeep

    I would like to change the postion of Twitter’s “Sign Up with Twitter” Button in Login page. Please Let me know how can I do this.

  2. Martina development

    Thank you! This is the kind of guidance I have been searching for. I am quite new to Drupal, absolutely not an expert. I was noticing these twitter feeds on other Drupal-sites. If you want to keep your site updated it’s a must have. I wanted a solution that allows me to post my news in only one social network and automatically spread it on all of my other webpages. Twitter is the easiest way, I think. Now thanks to you I can combine its benefits with the qualities of Drupal.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>