UPDATE: August 2, 2013!

With changes to Twitter’s API come necessary changes to the steps to add a Twitter Block to Moodle.  What follows is the “new and improved” how to…

To easily keep dynamic content on the Moodle sites for my courses I add a Twitter block.  Since it’s that time of year when course sites are getting the last little bit of spit and polish, I thought I’d share the “how to”.

The instructions that are here will create the block like the one I have on my Moodle sites.

Moodle Course Page Showing Twitter Block

Step 1: Build the Widget and Get the HTML code

To build this one, first go to Twitter’s widget builder (you’ll need to be signed in). You can find this in “settings”, “widgets”.  Once there, select “Create New” and follow Twitter’s super easy instructions, choose from a series of options, and then click “create widget” to build the necessary code.  It will appear at the bottom of the screen.  Copy the code and then go to Moodle.

I”ll admit that at first this didn’t work in the HTML block feature in Moodle.  However, I asked our ever helpful IT and learning tech team at KPU, and they dug into it and here’s what I learned from them…

“There is a Moodle feature called Filters. The contents of your Moodle pages are run through various filters to replace/adjust content such as converting algebra code into GIF images, censoring words (e.g. profanity by frisky grade-school students in forums…), allowing TeX notation, and automatically adding player code to multimedia links.

One of the filters is “HTML tidy” and it checks to make sure your added code is XHTML compliant; it’s on by default.” – Donna (Learning Technology)

When this filter gets turned off, the code you created in Twitter will work just fine.  So …

Step 2: Turn off the HTML tidy Filter

Go to the course you are working on.  Then go to > Settings > Course administration > Filters.  There are a series of options, click to turn HTML tidy: OFF.

Donna did warn however, “There’s one very small gotcha: each filter can only be turned on or off for the whole course. So if anything else in your course depends on HTML tidy being turned ON, it will now break.”

Step 3: Add the Block

With the filter off, you can now get adding.  Go to the “Add a Block” section on your Moodle course. By default this is in the bottom right hand corner of your page. From the “Add…” drop down menu, select “HTML”. Your new block will appear in the right hand of the screen and look like this:

Click on the edit button (the little document with the pencil) to open the dialogue box. You can give your block a title, then in the content section you need to find the HTML button and click it to open the HTML source editor.

You’ll find the HTML button on the content tool bar beside the spell checker (2nd from the right in bottom row).  Paste the code from the Twitter widget builder into the HTML editor.  Then choose update, and save and return to course. Once you are on your course home page, refresh the screen and the block should appear.

I include this Twitter block on my Moodle sites because I can easily share interesting articles, events, or pieces of news with all of my classes all at once with this little widget. One tweet and it goes out to all 4 sections.

The widget code can be inserted into any webpage really.  Let me know how it works for you and how you are using Twitter in your courses.

Happy New School Year 😉