Laura Gibbs

Just what is a Twitter Widget anyway?

Blog Post created by Laura Gibbs on Mar 31, 2018

With Twitter widgets you can embed live Twitter content in another webpage so that instead of looking at Twitter at Twitter.com you are looking at Twitter content in your own website (like a Canvas course website), in the sidebar of your blog, etc. etc. Here's a screenshot of a Canvas Page that has a Twitter widget; it's the Twitter stream for the weekly #FolkloreThursday event, which is always useful for my classes. Every time someone tweets a new item with that hashtag, it shows up automatically in my course space:

 

screenshot of FolkloreThursday widget in Canvas

 

How does it work? You go to publish.twitter.com to create a widget, specifying the content you want to use. The content that I find most useful in widgets would be a handle (i.e. a specific Twitter account), a hashtag (like #FolkloreThursday above), a list (multiple Twitter accounts displayed as a single stream), or a moment (a group of individual tweets that you create tweet by tweet). I'll have more to say about each type of widget in future posts.

 

screenshot of publish.twitter.com options

 

How do you get it in Canvas? After you configure the widget at Twitter, you will end up with a HTML snippet of javascript. It might look something like this: 

 

<a class="twitter-moment" data-dnt="true" href="https://twitter.com/i/moments/964963060015419392?ref_src=twsrc%5Etfw">Myth-Folklore 3043</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

See that <script> part? That is what makes life tricky in Canvas: you cannot copy and paste a javascript into the HTML editor in Canvas. Instead, you have to upload it separately as a file, and then use iframe to display that file in a Canvas Page. I'll have more to say about that step by step process in a later post. For now, suffice to say that I can upload that snippet into a Canvas File like this:

File: Moment3043.html

 

And I can then iframe that Canvas File into a Canvas Page using this HTML code which does not contain a <script> tag:

 

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

 

Here's the result:

Moment: Myth-Folklore: Twitter4Canvas 

 

Depending on when you click and go to the Canvas page, you may or may not see the same item here in the screenshot. The Twitter widget updates in near-real-time, which means that when I add a new tweet to this Moment and change the cover tweet (more about all that later), you will see something new... automatically.

 

And that is the value of Twitter widgets: they bring live content to your Canvas course space with just a single click as you tweet or retweet in the Twitter-verse. I'll have more to say about all of that in future posts. Meanwhile, feel free to chime in here with questions or ask me @OnlineCrsLady at Twitter. I'm hoping very much that in the process of "spring cleaning" my Twitter4Canvas materials, I can make them more useful and more user-friendly to all!

 

 

screenshot of Myth-Folklore Moment in Canvas

Outcomes