Adding a Twitter Block to Your Moodle Site

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.

To build this one, you 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”. You 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):

To have a block exactly like mine, copy this code and paste it into your HTML source editor:

<p><br />
<script src=”http://widgets.twimg.com/j/2/widget.js&#8221; type=”text/javascript”></script>
<script type=”text/javascript”>// <![CDATA[
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BBAMM OR from:AmandaBickell OR from:KwantlenMA OR #MRKT1199',
interval: 30000,
title: 'Our World On Twitter',
subject: 'Marketers Tweet',
width: 220,
height: 300,
theme: {
shell: {
background: '#700923',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#700923'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().start();
// ]]></script>
</p>

Then choose update, and save and return to course. The block won’t be visible right away. Once you are on your course home page, refresh the screen and the block should appear.

I should translate this a little. The text that is in blue indicates things that you can change easily to customize the code to suit your needs. For instance, I have created a search for my Twitter feed that includes any tweets with #BBAMM (the hashtag the BBA Marketing Management students use for the program), #MRKT1199 (course code) and any tweets sent by me or by the KMA (Kwantlen Marketing Association).

If Bob Crockett (Bob’s a colleague who also tweets. Follow him @bbcrcktt) wants to include his tweets instead of mine, he would replace the from:AmandaBickell with from:bbcrcktt. You can also delete the other search terms if you don’t want them. Just don’t delete the apostrophes that start and end the search function or you’ll break the code.

You can also change the Title and Sub-title of the block. For the more savvy, you can change the colour coding too.

For those thinking, “well that’s fine for her to say – clearly she’s an HTML super-genius”, don’t be fooled for one minute.  This is about the extent of my HTML prowess.  You see, there used to be a Twitter widget builder in the resources section of Twitter.  This is where I got this bit of code originally.   Alas, < sigh >, they have removed it. If you Google, “Build a Twitter widget for my site” there are other tools to let you start from scratch, but I haven’t tried them.

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 Year