Pages

September 2, 2016

Blogger Announcements as Canvas Homepage


For a more up-to-date version of this post, see: Blissfully Blogging Announcements in Canvas at my Teaching with Canvas blog.

I promised Michelle Pacansky-Brock some notes about my use of a Blogger blog as the landing page for my public Canvas courses at Myth.MythFolklore.net and India.MythFolklore.net. Click on those links and see: totally public, no log-in required!

First, I'll explain why I use a blog this way, and then I'll review the nitty-gritty of how/why it works.


WHY BLOG ANNOUNCEMENTS

Here are some of the reasons why I use a blog for the announcements:  Daily Announcements Blog.

1. Blogs are essential to my classes. The students blog all their work, so modeling ways of using the blog platform is very important. I use blogs for almost all my class content development, not just the announcements. See, for example, my Writing support blog or my Freebookapalooza online library.

2. Blogs are open. This was essential when we had the completely closed D2L for our LMS. Now people can make their courses public, but having public announcements in a blog is a way to share a course even if people are shy to make their Canvas course public. Some former students continue to read the class announcements, and people who are not in my classes also subscribe.

3. Blogs have sidebars. Especially given my extremely limited ability to control my Canvas context (and it is sooooo boring), having that blog sidebar is a big plus, giving me a design space Canvas denies me.

4. Blogs can display Twitter and YouTube. My Twitter widget works great in the blog sidebar, and I really value Twitter as a way to share all kinds of content with students; I have a dedicated class Twitter stream at @OnlineMythIndia. I also like having a YouTube playlist in the sidebar (music!).

5. Blogs can run javascript. I am able to create fun randomizing javascripts to use in the sidebar. Right now, I have random growth mindset cats, and I've used all kinds of randomizers over the years (random images, random student projects, random motivational posters, etc.). More information about javascript in Canvas. There's a cat in the sidebar as you can see:


6. Students choose how to subscribe. Students can subscribe to the blog by email if they want, or by RSS; they can even put the RSS feed for the class announcements in the sidebar of their own blog.

7. Blogs have labels. I use blog labels both for navigation and also to manage my workflow. It's easy to link to a week's worth of announcements with a rolling current label, for example: Current Week. Labeling the blogs by week (Week02) and by semester (Week02 F16) is a big help to me behind the scenes for content reuse (I can quickly compare my Thursday of Week 2 post to the same post last Spring or last Fall, etc.).

8. Mobile view. I often include links to the daily announcements in communication with students, and those links are mobile-responsive automatically; if they are checking their email on their phone, for example, they will see the mobile view when they click on the announcements link. I can also simulate the Blogger mobile view by adding ?m=1 to the blog address or to a specific post address; I like being able to quickly simulate the mobile view to see for myself how it looks.

9. One blog for two classes. This may just be peculiar to me, but because I am able to use the same announcements for both classes, having the blog is crucial. If I did the announcements using an LMS-based tool inside my courses, I would have to do them twice, and also edit twice (because I'm usually fixing typos during the day, etc.). Not good.

10. Don't put all your eggs in one basket. If/when the LMS is down, my announcements blog will probably still be up. I've never had my blogs go down, but if they did, I could quickly put announcements in the LMS if I needed to. Having multiple channels of communication is always a good idea in my experience.

THE NITTY-GRITTY

Here is some of the nitty-gritty. 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/23183

https://canvas.ou.edu/courses/23183/wiki

But notice the difference: the course homepage has the right-hand sidebar, but the wiki front page does not. 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. The sidebar content also needs to be https to display in Canvas.

Blogger templates. All the standard templates (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/23183/wiki
I then chose that as the "Home Page" for my Canvas course, so this also shows the same page:
https://canvas.ou.edu/courses/23183
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. That link goes to the wiki front page address (which means the right-hand sidebar does not appear):
https://canvas.ou.edu/courses/23183/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/23183/wiki
show: https://canvas.ou.edu/courses/23183

* Reminder about how to suppress the left menu.

* A link to open the Announcements in a new tab. There's no reason for them to stay in Canvas, so I feature this link to open the announcements blog in its own tab. Plus, if anything goes wrong with the iframe or some other accessibility problem, people can use this link to see the announcements where they really live: on the Internet.


Custom URLs. When I created my custom URLs for my courses at my domain, Myth.MythFolklore.net and India.MythFolklore.net, I used the wiki page as the redirect address, so you don't see the right sidebar. Since I use those short URLs to share courses publicly with people who are not students in the courses, that makes sense: the right sidebar is basically useless for anyone who is not logged in.

I think those are all my tricks, but if I forgot something, please ask! I really am a big fan of this approach; it is what I always did in D2L, and I am glad I found a way to make it work in Canvas too!