Embedding Code

A question that comes up a lot is how to embed various kinds of web-based interactive tools, videos, etc. into a post. Well, unfortunately by default WordPress doesn’t allow these at all, with the exception of a few specific (popular) video sites like youtube and vimeo. I wrote a previous post about how to embed video clips from these sites, so I won’t cover that here.

But, thanks to a new plugin installed on the COE Blog Server (called Artiss Code Embed), you can now embed code snippets from *any* site or tool right in your blog posts. For example, here is a Google Map embedded using the plugin:

View Larger Map

Here are the steps to accomplish something like this:

  1. Copy the ’embed’ code you want to have display on your blog. To get the embed code for a Google Slideshow:
    1. When editing your Slideshow, go to the ‘File’ menu and choose ‘Publish to the web…’.
    2. Click on the tab for ‘Embed’, choose any settings you want (you can always change these later, by hand), and then click ‘Publish’.
    3. The code you need to copy will be in the field.
  2. In WordPress, create a new Post or Page.
  3. At the top right of the screen, click on the little ‘screen options’ tab, and check the box for ‘Custom Fields’. Note: you only have to do this step once.
  4. In the Custom Fields section below your edit post field, click on ‘Add Custom Field’.
  5. Paste the ’embed’ code (from step 1) into the ‘Value’ field. In the ‘Name’ field, put in the name CODE1.
  6. Click on ‘Update’ to save the Custom Field data.
  7. Somewhere in the body of your post or page, type ‘%’ followed by the ‘CODE1’ label, followed by another ‘%’.
  8. Publish the post, and view it (you won’t be able to see the embedded item on the editing screen, but it will show up properly when you view the post).
This entry was posted in Wordpress Tips and tagged , . Bookmark the permalink.

Leave a Reply