Embedding Content

From BCcampus Mediawiki
Jump to: navigation, search

The BCOER wikispace is a collaborative working space for BC postsecondary librarians interested in open education resources (OER). The pages in this wikispace are living documents, and can be adapted and used by anyone.

Why use a wiki?

A wiki allows us to keep BCOER content in one place. With one centralized wikispace, there's one master copy of all the information created by the BCOER group that can be used by anyone. This helps to avoid updating issues where there might be multiple versions of the same content in different places.

How embedding works

Embedding content is different from making a copy. When you copy/paste content from one place to another, the new content doesn’t retain a link to the source content. If the source content is changed, the new content will be unaffected. By contrast, embedding content means that a link is retained from the source content to the new content.

In the image below, “foo” represents the source content. “Foo” can be embedded in different places. The author can put other content above and below “foo”, but “foo” remains the same no matter where it is placed. If the original “foo” document is changed, for example, to “foobar”, every single instance of “foo” will be updated to “foobar” as well. This process happens automatically.


Source: Wikimedia Commons (CC BY-SA)

Embedding content from a wiki to another website works exactly the same way.

Example LibGuide

This LibGuide includes embedded content from the BCOER wikispace.

In the above LibGuide guide, content has been embedded from the BCOER wikispace using an embed code. Every time there is a change to the the wiki, the content in the LibGuide will automatically update as well, without any intervention from the LibGuide creator.

Each individual box of the LibGuide needs to hold its own embed code for the corresponding wiki page, but this process only needs to be set up once. After the LibGuide is created, any changes to the original content in the wiki will automatically be reflected in the LibGuide.

Embedding content into a LibGuide

Embedding content into a LibGuide is easy!

1. Copy the “Embed Page” code from any page that you wish to embed in the LibGuide.

EmbedCode.png

2. In the LibGuide where you wish to embed the content, click “Add New Box”. Under “Select the Content Box Type” menu, select “Multimedia Boxes”, then “Embedded Media & Widgets”. Name the Box and click “Create”.

EmbeddedMedia.png

3. At the bottom of the new box you just created, click “Edit Media/Wiget Code”. Then, paste the embed code from the wiki page.

EmbedCode2.png

Finally, you might wish to modify the css (the way that the content looks), if needed. For our test wiki, the content didn’t display properly, so we needed to add a bit of css to change the way the embedded content looked. We used this code:

<style>
.innerbox .embedclass {text-align:left;}
#toc { display:none; }
</style>

This code will ensure that all the text is left-aligned and will hide the wiki's automatically generated table of contents.

To add the css to your LibGuide, there are two options:

  • You can paste the code directly into the same “Edit Media/Widget Code” box as the embed code (directly above or below). This will change the css for that box in the LibGuide only.
  • You can change the css for the entire LibGuide (i.e. every single box in the LibGuide) by going to the “Guide Look and Feel” menu and clicking “Custom JS/CSS Code”. Paste the code directly into this box and click “save".

Embedding content into Wordpress

To embed wiki content into your Wordpress site, you will be a plugin. The Wiki Embed plugin allows you to pull content from any Media Wiki website (Such as wikipedia.org). The plugin can be found here.

  1. Copy the wiki page URL.
  2. To embed wiki content on your site, first you will need to create a new post.
  3. Select the double square bracket icons (shown below). A window will open with a space for you to paste the URL. Paste the URL and select the "Insert into Post/Page" button. The wiki content will automatically feed into the page.

Wikiemed button.PNG Wikiurlembed.PNG

Once you have saved the post, preview the final result. The wiki content will automatically generate.