Blissfully Blogging Announcements in Canvas

I’m making good progress on the Twitter4Canvas materials (I may have a complete rough draft of it all this weekend!), and what I wanted to do today was show how I share Twitter in my Canvas classes via the Blogger blog I use for my class announcements. I wrote about this last year, and I’m now updating that post with a focus on Twitter and Canvas.

This post has three parts: description of the blog that I use as my homepage, advantages of using a blog for the homepage, and then some nitty-gritty about how I embed the blog inside Canvas.

But first, a screenshot: here’s what my Canvas homepage looks like. You can see the latest version by visiting Myth.MythFolklore.net or India.Mythfolklore.net; both courses are open, and both show the same blog as the homepage. You can also visit the Announcements blog directly, separate from Canvas. Scroll on down to see the whole thing. šŸ™‚


DESCRIPTION. The blog has basically four components:

Top Paragraph. There’s always a paragraph at the top with a reference to the day and week (there are new announcements every day, including Saturday and Sunday). I put the most important information that people might need in that top paragraph.

Procedures Section. Below that is a section called “Class Procedures and Reminders” which I try to keep to at most three items per day. These are paragraphs specifically related to class activities, especially any assignments that are due. I don’t have any images here, just text and links.

Fun Section. The rest of the body of the blog post contains stuff that is for fun and exploration. Each item has some kind of image or video that goes with it. There are three items at the top that are about reading, writing, creativity or just something for fun; then a featured student project (Storybook) from a previous class; next is a free book online related to the class; a proverb poster; a video of some kind; a Growth Mindset Cat; an event taking place on campus that day; and, finally, an “on this day” event at the bottom.

Sidebar. The sidebar contains the key class link at the top of the page, an email subscription form, a random Growth Mindset Cat, the class Twitter feed, a random graphic, a random Storybook, a random free book online, a video playlist of all the announcement videos, plus an anonymous suggestion box.

ADVANTAGES. Here are the top 5 reasons why I prefer to use a blog for my homepage:

1. I model blogging. My classes consist of student blog networks, and so it is very important to me that I show the students how blogs can be a great space for writing and sharing online. In all my blogs, I try to use good strategies that my students can likewise useĀ in their own blogs.

2. Blogs have sidebars. It drives me crazy that Canvas gives me no opportunity to develop the sidebar for my class in useful ways. There is nothing I can do with that Canvas sidebar. I cannot add dynamic widgets, I cannot add graphics. I cannot even add links to it: if you add a non-Canvas link to the sidebar students are “warned” before clicking on it, which means Canvas doesn’t even trust me to add links to my own sidebar! I need a sidebar that is going to be display cool, useful, new content every time the students log on. The blog gives me that sidebar design space.

3. The blog makes Twitter and javascripts easy. Of course, it is also possible to build a Twitter widget, which is what I will be demonstrating in the Twitter4Canvas course, but that requires an extra step, sneaking Twitter into Canvas by way of a separate https webpage. By embedding the blog into Canvas, I can use Twitter and other javascripts without going through that extra step. The javascript runs at the Blogger server, which means that Canvas is not running the javascript; it is just displaying the results. The Canvas security police are okay with that.

4. Blogs offer mobile view without an app. I often include links to the daily announcements in communication with students, and those links are mobile-responsive automatically; if studentsĀ are checking their email on their phone, for example, they will see the mobile view when they click on the announcements link, automatically, no app required.

5. One blog for two classes.Ā Since I use the same announcements, I need to be able to edit once and display twice. If I did the announcements using the LMS tool inside the course space, I would have to edit the announcements twice. Not good. I also like that the blog has continuity. Canvas doesn’t understand that I am teaching the same classes every semester, but Blogger does; I’ve been using this exact same Blogger blog for my classes since 2008… which means I am coming up on my ten-year blogiversary.

NITTY-GRITTY. Here is a detailed step-by-step of the options I use to configure my blog inside Canvas.

Canvas URLs. The key thing to understand is that I am using a wiki page AND I am telling Canvas to make my wiki page the default homepage of the course, so both of those addresses show my blog:
https://canvas.ou.edu/courses/31878
https://canvas.ou.edu/courses/31878/wiki
That 5-digit number refers to a specific semester course instance; it changes from semester to semester, course to course. So, make sure youĀ notice the difference: the course homepage has the right-hand sidebar, but the wiki front page does not have the right sidebar (but it does have the very annoying “view all pages” across the top which Canvas will not let me suppress). That difference will be important in the set-up described below.

Okay, here goes:

Blogger. I use Blogger because, until recently, that was the best option I could recommend to my students. Blogger is ad-free and it is javascript-friendly, while the free hosted version of WordPress has ads and does not like javascripts. Now my students can use DoOO (Create.ou.edu) and set up their own WordPress but I’ve had students blogging for years… and I couldn’t wait for DoOO. Most of my students use Blogger too, although some use WordPress, which is great. I provide detailed tech support for Blogger since I know it best.

HTTPS. Blogger now has https. By default, it displays http, but you can use https too. That’s what you need to display the blog in Canvas. All theĀ sidebar content also needs to be https to display in Canvas.

Blogger templates. All the standard templates (but NOT the “dynamic view” template) would work; I use the “Simple” template, and I set the blog width at 840 pixels and the sidebar width at 260 pixels. I put the page font at 15 pixels Arial with post titles at 18 pixels. I suppress the top navigation bar (the one with the search box).

Open links in new tabs. Because the mixed-content rules in Canvas mean http links will fail unless they open in a new tab, I edited my template’s HTML to open all links in new tabs automatically. To do that, just add this big of code right after the <head> tag so it looks like this:

<head>
<base target='_blank'/>

Canvas “Daily Announcements” page. I start by creating a Page in the course wiki; I called it “Daily Announcements.” Then I made that the “front page” of the wiki:
https://canvas.ou.edu/courses/31878/wiki
I then chose that as the “Home Page” for my Canvas course:
https://canvas.ou.edu/courses/31878
But, as noted above, the “Home Page” for the course shows the right sidebar but the “Front Page” of the wiki does not; that’s just an automatic Canvas thing beyond your control.

Blogger in wiki page. I use a simple iframe to put the Blogger into the wiki, making sure I use the https address of the blog; I set the width at 100%, and I have a height of 1000 (my blog posts are usually longer than that, so there’s a scroll bar in the frame).

<p><iframe src="https://ouclassannouncements.blogspot.com/" width="100%" height="1000"></iframe></p>

Then I do something tricky. Remember how the course homepage has the right sidebar and the course wiki front page does not? Well, for many reasons, I prefer to have a homepage without the right sidebar. So here’s what I do:

Create Homepage link in left sidebar. I use the Redirect Tool to create a “Homepage” link which I display in the left sidebar (how ridiculous is that… having to install an app just to add a link to class navigation? whatever…). That link goes to the wiki front page address (which means the right-hand sidebar does not appear):
https://canvas.ou.edu/courses/31878/wiki

Remove “Home” from left sidebar. After I create my Homepage link in the sidebar, I then remove the Canvas Home link from the left sidebar, putting the Homepage link I made with the Redirect tool up at the top.

Fix up “Daily Announcements” page. Above the embedded blog, I add some text to help people navigation: I want students to realize they can turn the right sidebar on or off, and I also want to tell them how to suppress the left sidebar. Most of all, I just wish they would open the announcements in a new tab entirely!

* Hide or show the right menu.
To do that I use these addresses to make the links:
hide:Ā https://canvas.ou.edu/courses/31878/wiki
Ā  Ā  show:Ā https://canvas.ou.edu/courses/31878
* Reminder about how to suppress the left menu.
* A link to open the Announcements in a new tab.\

And that’s it! I think those are all my tricks, but if I forgot something, please ask. I really am a big fan of this approach, and I am glad to help if anyone wants to give it a try. šŸ™‚

Do not go where the path may lead;
go instead where there is no path,
and leave a trail.

(Growth Mindset Cat)

Crossposted at OU Canvas Community.

css.php