Putting Twitter feeds onto Moodle

Twitter can be an excellent resource for use within courses. But how do you get it to show on your Moodle course page? Thankfully Twitter provides a tool for creating widgets that display different types of Twitter feeds which you can display on your Moodle course page or embed into a webpage.

Twitter feeds on Moodle

Intro

This is written from the view point that you have an account with Twitter and have the necessary editing permissions to add content to a Moodle course page.

If you want the Twitter feed of another account you will still need your own Twitter account. Twitter feeds can also be set up based on a specific Twitter search terms, collections or subscribed lists.

These instructions are based on Moodle 2.7 and Twitter software in use October 2014. Functionality and/or change in icon design are liable to change over time.

Setting up

Creating a Twitter feed to display in Moodle is a two step process. The first step is to get the HTML code for the specific feed you are interested in. The second step is to embed this into your Moodle course page.

Step 1: Getting the HTML code

1. Visit Twitter (www.twitter.com) and log into your account. If you do not have an account, then you can create one.
2. Once in your account goto account settings (under ‘settings and help’. The cog icon.
3. Select ‘Widgets’ on the left hand side menu that is now available.
4. If you have any Widgets already then you can edit these and select the relevant code via the Edit option.
5. Select ‘Create new’ if want to create a new Widget or Twitter Feed. This brings up the widget configurator (Image 1: Twitter's Widget Configurator)
6. You can create a widget based on either a User’s timeline, Favourites, List, Search or Collection.
7. If you want a particular user’s feed, enter their username.
8. Select whether want to include in the visible feed any replies or want to auto-expand embedded photographs.
9. Ability to change height and link colour are not immediately available, but can be changed by tweaking the HTML once it has been generated. The width of the widget automatically adjusts the window it’s being presented in, but you can state the height. The default text colour for links is blue.
10. Choose whether you want a light or dark themed feed.
11. A preview of the feed you’ll get is supplied.
12. Click the ‘Create widget’ to display the HTML code you’ll need to embed into the HTML of your Moodle page so it displays.
13. Copy this code (Control +C on a PC).

Step 2: Embedding the code into Moodle

Because it’s a widget with it’s own HTML code you can display this widget as a block, as a label or embedded into a page. Effectively any part of a page design which supports editing of the HTML code.

·         Open the Moodle course page where you want to display the Twitter feed.

·         Turn editing on!

a)    Displaying the feed as a new block

1. Add a new block using the ‘Add a block’ (this and select HTML from the dropdown of available options.
2. Find the new block that was created. It will be called “(new HTML block)”
3. Click ‘actions’ on the block and select Configure
4. Give your block a title (this will show in the Title bar of the Block)
5. Do NOT paste the widget’s HTML code directly into the Content section otherwise it will not work and just be read as plain text.
6. Click on the ‘Edit HTML source’ button (image below) of the text editor to display the source code (typically this will be empty/blank as you have nothing there at the moment). IF you cannot see the Edit HTML source button you may have to expand the Toolbar to show more icons/editing options by pressing the Toolbar Toggle button.
7. In the pop-up window paste the widget HTML code and then press ‘update’.
8. Your content window will probably only show at the moment just the URL as an active hyperlink. Do not worry this is expected behaviour.
9. Save changes.
10. Your block now displays on the Moodle course page with the working widget inside it.

b)    Displaying the feed within a label on the Moodle course page

1. Via the ‘Add activity or resources’ button, select ‘label’ and Add
2. In the Label text follow steps 5-8 in a) above.
3. ‘Save and return to course’ to display the label on the course page.
4. If the displayed widget is too wide you may need to go back and edit the HTML code slightly to adjust the width.

c)     Displaying the feed within a page

1. Via the ‘Add activity or resources’ button, select ‘page’ and Add
2. Give your page a name, a description and choose whether you want this description to be visible under the ‘Name’ on the course page.
3. In the Page content follow steps 5-8 in a) above.
4. ‘Save and return to course’ to create the page. Click the link to the page to view the content.
5. If the displayed widget is too wide you may need to go back and edit the HTML code slightly to adjust the width.