Wednesday, 3 October 2012

Embedding Twitter in Moodle

As many readers will already know, Twitter has recently announced major changes to the use of their API. This has a range of knock on effects, not least potentially killing old embed codes, etc, but as things currently stand, there are still a number of options for you to embed Twitter in Moodle. I'm quite into using Twitter in the classroom, and have presented research at the SOLSTICE conference this summer. So it was important for me to find out what all these changes mean.
This post will review a few of these options, but remember, these may change further. N.B. If you don't want to read it all, scroll down to the bottom and watch the screencast...

Twitter Widgets

There are a number of Twitter Widgets that can be customised (colours, etc) and embedded in Moodle. Access these by going into your Twitter settings (accessible via the cog icon in the top right), and clicking into Widgets.

You can create 4 different types of 'timeline' widget based on what it is you want to achieve;

  • User Timeline - display tweets from a particular user's timeline
  • Favourites - display a particular user's favourited tweets
  • List - display tweets from members of a particular twitter list
  • Search - display tweets matching a particular hashtag (#).

The major difference since the API changes, is the requirement of a Domain. If you wanted to embed the widget into a Moodle unit would need to enter the domain. e.g. (you don't need to include the 'http://www' here.

When you are finished customising the widget, click the 'Create' button and you will see the HTML code that can be copied and pasted into Moodle (more on this later)...


As well as creating widgets, you can also create a range of Twitter buttons. You can access these by clicking into Resources link that appears underneath the Trends.

The four options here are to create buttons to carry out a specific function;

  • Share a link
  • Follow a user
  • Tweet a Hashtag
  • Mention a user

Each button has options to customise, e.g. links, hashtags, usernames, etc. Again, this shows a Preview window and provides the HTML code that can be copied and pasted into Moodle.

What to do with the HTML code

In any of the above scenarios, you are presented with HTML code. You don't need to understand what this code is or does, beyond the fact that it's the magic to achieve your aim e.g. embed a timeline or create a button. Putting this in Moodle is surprisingly easy;

  • Decide where you want the widget/button to appear e.g. 
    • in a label within a week/topic (Add a resource > Label)
    • or in a HTML block in the right hand column (Blocks > Add > HTML)
  • You should see the pretty standard HTML editor (unless you are using Google Chrome). Look for the 'Toggle HTML Source' button on the editor toolbar - It looks like this: < >
  • Pressing the 'Toggle HTML Source' button deactivates most of the buttons and leaves the plain HTML text view. This is what Google Chrome users would automatically see, as HTML editors in general have problems with Chrome (one of it's few downsides)
  • Go ahead a paste the HTML code that you copied from the Twitter website, and click 'Save'.
  • Voila

Demo Screencast

Creative Commons License
This work by Peter Reed is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.