Pages

March 7, 2020

Embedding a Blog in the LMS




This is something I had written up back in March in order to help people who were suddenly moving online at that time; I've now edited the post so that it fits in the flow of the Summer2020 series. :-)

This post explains how to embed a blog in Canvas, and the same should be possible in the other major LMSes. I used to do this when my school had D2L years ago, and I'm sure it would work in Blackboard also.

To see how it works, take a look at one of my courses: I use my Class Announcements blog as the homepage for the class: Myth.MythFolklore.net (the class is open; just click and you'll be there).


I actually embed the blog twice, using the two different methods that I'll describe below. I embed the blog using Canvas's Redirect Tool so that there is a better blog display, but I also embed the blog using iframe inside a Canvas Page, which allows me to make the blog the actual Homepage for the course.

Below you will find information about both of those methods of embedding in Canvas, along with some information about how to configure your blog so that it is LMS-friendly.


CANVAS REDIRECT TOOL

One option for embedding a blog in Canvas is to use the Redirect Tool. Here's how that works in the Mythology class space:
https://canvas.ou.edu/courses/149665/external_tools/10767

From that URL, you can see that I am using a "tool" (specifically, the Redirect Tool) which I have configured to display the blog in that space.


It looks pretty good, especially if you close the left menu bar. All you see there is the page; the Redirect Tool takes a webpage and plops it inside Canvas.

Redirect Tool step by step. Just go to Settings, Apps, search for Redirect Tool, Add App, and then for "Name" type in the name you want to have appear in the navigation, paste in the blog address (or the address of a specific post in a blog), UNCLICK the force open option, CLICK the show in course navigation option, and then click Add App to close the dialogue box.

You will now see the item in the course navigation menu, and you can turn it on or off from there like any other item in the navigation menu. I call mine "Daily News" so that it fits nicely in the menu bar space.


CANVAS PAGES (IFRAME)

Since the Redirect Tool is so easy, why would you want to embed a blog in a Canvas Page? Two reasons: (1) you can type some text up at the top of the blog display to provide context, instructions, etc. and (2) if you want to use the blog as your homepage, it has to be a Canvas Page. For some reason that exceeds the knowledge of mere mortals, Canvas will not let you use a Redirect Tool URL as your Homepage.

Here's what that same blog looks like embedded in a Canvas Page; from the URL you can see how this is just a Canvas Page address:
https://canvas.ou.edu/courses/149665/pages/daily-announcements


The disadvantage is obvious: the right-hand menu takes up so much real estate and, for my purposes, it is useless (I don't use the LMS except as a space where students record their grades). So you'll see that above the blog I have a link that takes the students out of the LMS space (escape! escape!), and there's also a link that suppresses the right-hand menu, i.e. it is a link to the Redirect Tool item I described above.

Page Embedding step by step. To embed a blog in a Canvas Page, you create a Page, type whatever content you want to appear at the top of the blog, and then you embed an iframe. Then, position your cursor below where you've typed, and click on the embed media icon (second from right on bottom row of editing bar). Then, you will paste code like this into the box:

<iframe src="URL" width="100%" height="1000"></iframe>



The URL is the web address, and you can adjust the height as needed; my blog always requires scrolling anyway, so I just have the height be 1000 pixels (wrestling with the height parameter is the single biggest drawback to iframe for page design; it's basically a pain in the butt for dynamic content without a fixed height).

Once you have a Page with your blog embedded, you can then designate that as your course "front page" in Canvas.


LMS-FRIENDLY BLOG CONFIGURATION

If you are going to be embedding your blog in Canvas, there are a couple of things you can do to optimize the blog display so that it will work well.

The technical details below are based on Blogger, but you can make the same kinds of adjustments to a WordPress or other blog.

Open all links in new tab. One of the worst things about an LMS is the way that it opens links inside an iframe or other LMS-delimited space. (I'll save all the reasons why that is a problem for another blog post.) Long story short, to be sure your blog functions properly when embedded in an LMS, you should configure the blog to open all links in a new tab.

In Blogger, the way to do that is to edit your blog template file. To do that, go to Theme-EditHTML and add this little snippet of code — <base target='_blank'/> — right after the <head> tag. It will look like this:


Then click Save Theme.

Yes, that is scary-looking, for which I apologize. Blame Canvas for not giving you an option like that in your course settings (since there are many reasons why students should not open links inside the LMS... but like I said, long story for another post).

Suppress the top navigation bar. Some Blogger templates (what you might call Original Series and Next Generation templates, before the latest family of Mobile-First templates) have a navigation bar across the top. It's useful, but if you are going to be embedding your blog in Canvas, you'll probably want to suppress that navigation bar just to buy some extra real estate (given that Canvas gobbles up most of the real estate on the page, leaving you very little).

Here's how to suppress that navigation bar: go to Layout, then click Edit in the navigation bar box, and choose Off from the available options; then Save.


Blog width and other design features. You'll want to keep the blog on the narrow side if you are embedding in Canvas. In Blogger, you can adjust blog and sidebar widths in the Template - Customize area. Here are the settings I use at my Announcements blog: 840 pixels overall, and 260 pixels for the sidebar.


Again, you can do all these same things with WordPress (and more); I'm providing documentation for Blogger because that is still the best free/ad-free blogging option (more about why I use Blogger).


The tips on this page are not specific for blogs; they will work for any webpage (website) you want to embed. There are some websites that block this type of embedding, but by and large, the iframe method (which is what the Redirect Tool also relies on behind the scenes) is a powerful way to embed all kinds of web content, include webpages. For more about the power of the Redirect Tool in Canvas in particular, see this great post from Keegan Long-Wheeler: How To Integrate Websites Into Canvas.


And now, I'll add one more blog management "pro" tip: Blogs and Diigo. If you are thinking of using your blog to do content development, then you might want to give Diigo a try as a way to manage all those blog posts. It works great for me!