Can I add a twitter feed to my Moodle course(s)?

You can put anything you want (text, hyperlinks, images) into an HTML block but this document will focus on using them to add a twitter block to your course.

Step 1: Obtain Twitter timeline widget

  1. Go to twitter account and click on create new widget
  2. Select User timeline (other options include favourites or list)
    We recommend timeline as this is interactive so that readers can reply, retweet and favourite tweets from the display in Moodle)
  3. Add a name if necessary, check options settings, select size, and configure using UAL colour
  4. Click create widget
  5. Copy the code to Notepad (or other text editor) – your code will look like this:

    <a  href=””  data-widget-id=”310059237483102208″>Tweets from @SpursOfficial/tottenham-hotspur-players</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+”://”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

  6. Now delete all code after first line of code in bold from <a class to </a>  So left with this:

    <a  href=””  data-widget-id=”310059237483102208″>Tweets from @SpursOfficial/tottenham-hotspur-players</a>

  7. Now copy this code after the first line of text into the text editor

<script type=”text/javascript”>//
<![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src=”“;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);// ]]>

8. The full code will now look like this

<a  href=””  data-widget-id=”310059237483102208″>Tweets from @SpursOfficial/tottenham-hotspur-players</a><script type=”text/javascript”>//
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src=”“;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);// ]]></script>

Step 2: Create twitter block in Moodle

  1. Go to your course your course, click Edit Content button.
  2. Scroll down left hand navigation to Add a block
  3. Click on the drop down arrow list labelled Add… and choose the entry
    for HTML. This should create a new block called (new HTML block).
  4. Click on the Actions symbol in the new block and select Configuring a (new HTML block) block.
  5. Type in a name for the Block Title: (e.g. CLTAD Twitter). 
  6. In the Content: area click on the little HTML icon
  7. In the newly opened HTML Source editor paste in the two bits of code
  8. Click Save changes
  9. Move the block to where you want it to appear on the course.

Leave a Reply

Your email address will not be published.