Laura Gibbs

Twitter4Canvas: A Twitter List Widget

Blog Post created by Laura Gibbs on Apr 1, 2018

Yesterday I promised a post about lists, but instead of an Indian art post, I am going to create a list of word-related Twitter accounts since that is something that could potentially be of use to anyone.

 

So, to do that, I will log on at my class Twitter account, OnlineMythIndia, and create a new list with the word-related Twitter accounts I follow now. To do that, I just pick one such account, click on the three dots to the right of the "follow" button and choose Add/Remove from Lists. Then I "create a list" and then save it (public by default, although you can make private lists). Now I click the checkbox next to the new item that appears on my list of lists, and then click X in the upper-right hand corner.

 

My new list has one account, and I will now add more! You can see the result here: Twitter List: Words

 

screenshot of Twitter list

 

What you will find there is all the tweets and retweets from the members of the list. Anybody can look at the list and you can also subscribe to the list if you want, but only the list owner (me) can add/remove accounts from the list.

 

So, now I will create a widget from that list; again, anyone can do that! You can make a widget from any public Twitter list, not just one that you created.

 

Twitter Code. Go to publish.twitter.com, and paste in the URL for the list. You can customize it for width and height if you want, and I always opt out of Twitter tailoring. I'm going to set the height to 1000 pixels. After I click update to save the customizations, Twitter gives me the code:

 

<a class="twitter-timeline" data-height="1000" data-dnt="true" href="https://twitter.com/OnlineMythIndia/lists/words?ref_src=twsrc%5Etfw">A Twitter List by OnlineMythIndia</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

As you can see, the height is there in the code, so I can adjust that as needed; I don't have to recreate the script just to change that value. I don't worry about the width; I'll be adjusting that in the iframe itself.

 

Save Code as HTML. Now I need to save that code as an HTML file in plain text format. An easy way to do that with a browser-based tool is with editpad.org. Paste in the code from Twitter and then "download and save," making sure to use .html instead of .txt as the suffix, and using a file name that makes sense. I'll call mine list_words.html

 

Upload HTML File to Canvas. Next, I go to Canvas and upload that file, which gives me the file address:

https://canvas.ou.edu/courses/56095/files?preview=9822256

 

I use the course and file number to create the iframe snippet I will use:


<p><iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://canvas.ou.edu/courses/56095/files/9822256/download" width="400" height="1200"></iframe></p>

 

I've set the width of the iframe to 400 pixels as you can see there.

 

Create Page and Insert Snippet.

 

I create a Page and put the iframe in the left cell of a table that I set to 420 pixels, and I've left the width of the right cell unspecified. (You can also use a div layout, paste the iframe into a discussion board prompt, etc. etc., and you can adjust the iframe parameters to suit the context.)

 

<table><tr valign="top">

<td width=420><p><iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://canvas.ou.edu/courses/56095/files/9822256/download" width="400" height="1200"></iframe></p></td>

<td>STUFF GOES HERE</td>

</tr></table>

 

I can type whatever I want in that right cell, giving some context for the list and explaining to students how it works. It's good to provide a link to the list address at Twitter in case something is not working with the embedding too. (There's also a link to the Twitter version which is automatically included at the bottom of the widget.)
https://canvas.ou.edu/courses/56095/pages/list-words

 

screenshot of widget in Canvas

 

It's a lively list which will be featuring new content all the time!

Outcomes