LEO Guides

How to embed a Twitter feed in a HTML Block

A social media feed, embedded within a 'HTML' Block, can add a dynamic element to your LEO unit. Every time your students login to your LEO unit, they will be able to view and engage with constantly updated content. Perhaps the best example of a dynamically changing social media platform is Twitter.

There are three steps required to adding a Twitter feed to your LEO unit via a HTML block. These steps are:

  1. Locate the 'embed' code for the Twitter feed you want to have in your LEO unit
  2. Add a HTML block to your LEO unit
  3. Copy and paste the 'embed' code into the HTML block

Step 1: Finding the 'embed' code for your Twitter feed

There are two kinds of social media feeds you can draw out of Twitter: a feed associated with a single Twitter user, and a feed associated with the use of a Hashtag. Follow the steps for either to generate the appropriate 'embed' code for your LEO unit. screenshot of the options available to embed a user profile

a) Find an 'embed' code for a single user or account

To find the 'embed' code for a single Twitter user or account you need to:

  1. Locate the homepage of the Twitter user or account whose feed you want to embed in your LEO unit. For this example we are going to use @ACUVoice (NOTE: you do not need to have a Twitter account in order to add a Twitter feed to your LEO unit).
  2. Click on the 'cog' icon, which is located to the left of the 'Follow' button on the right hand side of the page, then select 'Embed this Profile' from the options provided.
  3. On the next page you will get a preview of what your Twitter feed will look like. If you are satisfied, click on 'Create widget'.
  4. Twitter has now generated the HTML code (also known as a 'widget'). This is the code that you can copy and paste into your HTML Block.

b) Find an 'embed' code for a Hashtag

To find the 'embed' code for a Hashtag you need to:

  1. Search Twitter for the Hashtag you want to display in your LEO unit. The search page for Twitter is https://twitter.com/search-home. An example of an ACU specific Hashtag is #ACUVoice
  2. In the next page you will see a social media 'feed'. This feed is a curated list of all of the Tweets which have been made on Twitter, which include that hashtag. From the options provided at the top of the page, click on 'More options' and then click on 'Embed this search'.
  3. On the next page you will get a preview of what your Twitter feed will look like. If you are satisfied, click on 'Create widget'.
  4. Twitter has now generated the HTML code (also known as a 'widget'). This is the code that you can copy and paste into your HTML Block.

Step 2: Adding a HTML Block to your LEO unit

Step 3: Copy and paste the 'embed' code (widget) into the 'Content' field of your HTML Block

After you have added your HTML Block to your LEO unit, you will be directed to the 'Configuring a (new HTML block 'block' page. On this page you can give your Block a title, and populate it with content.

From the 'Configuring a (new HTML block) block' page you now need to:

  1. Click on the 'Toolbar toggle' icon. This is the icon at the top right side of the 'Content' field. Clicking on this icon will make all of the editing options for the HTML block available to you. screenshot of the 'Toolbar toggle icon
  2. Click on the 'Edit HTML source' icon. It is located next to 'Font size' on the botton row of icons, and looks like this: <>
  3. Clicking on the 'Edit HTML source' icon will open a new pop-up window called the 'HTML source editor'. Simply copy and paste the embed code from either your Twitter user, or your chosen hashtag, into this pop-up. Click 'Update' once you are done. Clicking on 'Update' will close the pop-up window.
  4. Click 'Save changes' when you are done.

If you choose to add a Twitter feed based on a hashtag, you should be mindful that Twitter is a public platform, and that anyone could post content using that hashtag. This includes Twitter users who may seek to post inapropriate content.

One way of address this issue is to ensure that you enable 'safe search mode' within the widget configuration. This will ensure that your embedded Twitter feed does not contain profanity or 'sensitive media' which you may not want your students to see.

screenshot of the safe mode in twitter widget configure page

The code you generate using the above settings can also be used to embed your Twitter feed into Labels, descriptions of Assignments, and even into Quizzes!