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
- Go to twitter account and click on create new widget
- 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) - Add a name if necessary, check options settings, select size, and configure using UAL colour
scheme - Click create widget
- Copy the code to Notepad (or other text editor) – your code will look like this:
<a href=”https://twitter.com/SpursOfficial/tottenham-hotspur-players” 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.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
- Now delete all code after first line of code in bold from <a class to </a> So left with this:
<a href=”https://twitter.com/SpursOfficial/tottenham-hotspur-players” data-widget-id=”310059237483102208″>Tweets from @SpursOfficial/tottenham-hotspur-players</a>
- 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.id=id;js.src=”http://platform.twitter.com/widgets.js“;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);// ]]>
</script>
8. The full code will now look like this
<a href=”https://twitter.com/SpursOfficial/tottenham-hotspur-players” data-widget-id=”310059237483102208″>Tweets from @SpursOfficial/tottenham-hotspur-players</a><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.id=id;js.src=”http://platform.twitter.com/widgets.js“;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);// ]]></script>
Step 2: Create twitter block in Moodle
- Go to your course your course, click Edit Content button.
- Scroll down left hand navigation to Add a block
- 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). - Click on the Actions symbol in the new block and select Configuring a (new HTML block) block.
- Type in a name for the Block Title: (e.g. CLTAD Twitter).
- In the Content: area click on the little HTML icon
- In the newly opened HTML Source editor paste in the two bits of code
- Click Save changes
- Move the block to where you want it to appear on the course.