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.


No comments:

Post a Comment