Moodle: Twitter Feed Block

Part 1: Create a Twitter Widget

If you already happen to have a twitter widget that meets your needs you don’t need to make a new one (skip to Part 2), you can use the code of an existing one in multiple places.

Login to your twitter account you wish to share a feed of.

Click on your user icon.

From the menu that appears click Settings

twitterWidget_1Settings

From the options listed to the left of the page click Widgets >

twitterWidget_2Widget

From the new page click Add Widget as we’ll create a new one

twitterWidget_3NewWidget

Leaving the settings on this page at their default are fine and function but if you want to do some tailoring you are welcome to.

Tailor your settings:

  • Username: defaults to your account but you can put another username there to follow their account instead.
  • Options:
    • Exclude replies: Checking this will prevent conversations between users from showing up which will clean things up.
    • Auto-Expand photos: Checking this will show all images on your feed which may limit how many tweets show up in the limited space.
  • Height: If you want a shorter or a longer feed to show you can fine-tune the height here. It can be changed later.
  • Theme: In moodle Light will blend in better with the themes, Light is the default.
  • Link Color: You can tailor the color links in the feed are- this will let you have your feed blend in better with your Moodle page (both the blue and green are close enough to the colors we use in our Clean and More themes, respectively.)

twitterWidget_4Configure

Click the Create widget button

twitterWidget_5CreateWidget

The page will reload and a new box will appear under the preview.

Click into the text box.

Hit Crtl + A on your keyboard to select everything.

Hit Ctrl + C on your keyboard to copy the code to your clipboard so we can paste this into Moodle in either a Block or a Label- Your choice at a later step.

twitterWidget_6GetCode

Part 2: Twitter Block

Enter the course you want to add a Twitter Feed to.

Turn Editing On

clean_turnEditingOn

Locate the Add a Block block

Select HTML from the provided drop-down

clean_addABlock

The page will reload.

Locate your (New HTML Block) and click the Gear Icon

NewHtmlBlock_configure

From the menu that appears select Configure (new HTML block) block

NewHtmlBlock_configure2

Give the Block a name- I chose Twitter Feed.

Click the expand button in the text editor for more editing options.

TwitterBlock_ExpandEditor

 

From the new options present click the HTML button.

Click into the Content.

Hit Ctrl + P on your keyboard to paste your Twitter code into the page.

(If you get a red error at this time it’s okay to ignore it- it’s just impatient.)

TwitterBlock_enableHTML

Once your code is pasted in we’re nearly done!

Click the Save changes button.

TwitterBlock_pasteCode

And that’s it, it may take a moment for the feed to appear but when it does you will have a twitter block you can move around like any other Block.

If this is too tall or too short you can go back to your widget in twitter and change the settings. Those settings will apply to all instances of this feed in Moodle and elsewhere (if applicable.)

TwitterBlock_Done