Sunday, May 1, 2016

Step 7. Add Twitter widget to Canvas Page.


Step 6 Step 7. Insert Canvas File in Page Step 8


STEP SEVEN. Okay, here comes the exciting part: you have created a Twitter widget, and you have put the widget in a Canvas Filet, so now you can embed that File in a Canvas Page using something called an iframe.

Here's how it works:

1. Create a new page. Go to your practice course space, click on Pages, then click View All Pages, and add a new page:



2. Add content. Give your page a title, and then type something in the body of the text to let students know what they are seeing. Then, type INSERT or something that will let you know where to insert your widget. Notice that I've centered the word INSERT so my widget will be centered on the page:


3. Create iframe code. Now you need to create the iframe you will use to paste in your Twitter widget. You'll want to do this in a plain text editor (like the editor you used to create the HTML file last time).

Paste in this template, which will adjust the height and width to work well with the Twitter widget:


<iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://______/courses/______/files/______/download" width="450" height="850"></iframe>


Then, fill in the your Canvas course domain, the course number, and the file number from the previous step. The result will look something like this:


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


4. Paste iframe into Page. Now go to your Canvas Page, and switch to the HTML editing view, which will look something like this:


You can now replace the word "INSERT" with the iframe code for your Twitter widget. That's it!

5. Check results. Click on the Rich Content Editor to return to the WYSIWYG view. You should now see a grey box that marks out the area where the Twitter widget will display:



5. Publish page. Click Save-and-Publish. You should now be able to see the widget at work. Here's the widget I see in the Canvas page.


The widget updates in almost real-time, no need to refresh the page to see new tweets coming in!

Of course, as you can see, this is not the best use of Canvas screen real estate, so in the next step, I will show you how to organize the page layout with a table.


3 comments:

  1. Thanks very much for this, very useful (I was actually pointed at your post here: https://community.canvaslms.com/message/61566-re-how-to-embed-from-venngage-using-script?commentID=61566#comment-61566 by one of Instructure's trainers) - I'll be suggesting that Instructure should write some docs themselves.

    Anyway, just thought I'd mention that you can get the file's URL much more easily by (in Chrome) right-click 'Copy link address' and removing the '?' and anything after that. Interestingly, it looks as if files are numbered sequentially for a course domain so you actually only need the file id:

    https://myuniversity.instructure.com/files/456/download

    ReplyDelete
    Replies
    1. Thanks for your comment! I found yet another way to access the file in a way that uses the name from someone else posting at the Community about using Files in an iframe, too. One of my worries is that Instructure might at some point shut down a lot of these options since they are not officially supported anywhere, and that's why I suspect we will not see it documented by Instructure. That's why I prefer to host my own files, but at the same time I am very glad that Canvas course Files can be used in this way, so that people who don't have webspace of their own can still manage to make use of Twitter widgets, etc.

      If you want to share your stuff with other people, though, you need to be able to host in your own space. So all the widgets in my Javascript Widget Warehouse, along with all the Twitter Widgets I've prepared for sharing, are hosted in my lauragibbs.net space. I am really grateful to the people at Reclaim Hosting for making it so easy to turn on the https option there in order to make those files usable in Canvas course spaces! :-)

      Delete
  2. This comment has been removed by the author.

    ReplyDelete