The Journal of Simon Hanmer

Embedding Twitter in Drupal without any additional modules

Many people are now using twitter to keep friends, clients and others updated on what they’re doing - as such we often get asked about embedding twitter information in websites when clients come to see us.

There are several modules available within Drupal such as the obviously named twitter, but sometimes this can be a bit of an overhead if you're not wanting to do any more than display tweets on a webpage. All is not lost though, as twitter information can be easily embedded in a Drupal site without requiring any additional modules.

Twitter provide a ‘widget’ at http://twitter.com/goodies/widget_profile that can be embedded in any webpage - it consists of some html that calls javascript and css on the twitter site and is can be customised with different colours, layouts etc. After choosing the various options, click the ‘finish and choose code’ button and HTML looking something like the below is produced:

<div id="twtr-profile-widget"></div>
<script src="http://widgets.twimg.com/j/1/widget.js"></script>
<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
<script>
  new TWTR.Widget({
    profile: true,
    id: 'twtr-profile-widget',
    loop: true,
    width: 250,
    height: 300,
    theme: {
      shell: {
      background: '#3082af',
      color: '#ffffff'
    },
    tweets: {
     background: '#ffffff',
     color: '#444444',
     links: '#1985b5'
    }
  }
}).render().setProfile('simonhanmer').start();
</script>

This code can be embedded in a standard Drupal block (although you'll probably want to replace the twitter name in the setProfile call) - simply login as an administrator, or a user with permission to post full html code and

1. Navigate to Administer » Blocks » Add Block
2. Specify an appropriate description for the block - ”Twitter“ seems appropriate
3. Paste the code generated for the twitter widget into the body
4. Ensure that you've changed the Input Format to 'Full HTML'
5. Complete any other appropriate fields, such as pages for the block to appear on
6. Click ‘Save Block’
7. Position the new block into the required region and click ‘Save Blocks’

Hopefully, with this in place, you should now be able to see your tweets in full technicolor glory! There's an example down in the bottom corner of this page, albeit with some theming in place, alternatively to see a non-themed example have a look at http://www.moorfieldhouse.com (one of our sites and a very nice guest house in Scotland as well!)