PDF Embedding media like slides, videos, comic strips, quizzes, polls into your blog posts takes your posts to the next level; providing opportunities for readers’ engagement and interaction in ways not achievable using plain text and images.
There’s a gazillion online tools nowadays. Most provide code that you can use to embed what you’ve found or created into your blog posts.
Adding embed code to posts or pages is as simple as:
1. Completely write your post including adding title, text, images, tags and categories.
2. Click on Save Draft, previewed your post and make all necessary edits.
3. Go to the online tool you want to use.
- Create or find the media you want to embed in your blog post.
4. Locate the embed code for the media you created or want to embed.
- If the online tool provides embed code you’ll see a link that’ll use words like Share, Embed or Publish.
- WallWisher embed code is located under the Do More menu on the top right hand side of your WallWisher
- Click on the link and look for any code that says Embed in Blog, or Add to website.
5. Copy the embed code.
Here’s how to copy the embed code on PhotoPeach
Here’s how to copy the embed code on Voicethreads
6. Click on HTML Tab on your blog post.
7. Paste the embed codeinto your post where you want it to appear then immediately click Publish
- Don’t click back to Visual Tab before hitting Publish as it can break the embed code.
- Immediately close your post once you’ve published.
- Change back to Visual Editing mode when you write your next post by clicking on the Visual tab.
- You use this same process for any website that provides embed code.
8. You should now see your embedded media when you view your Post on your blog!
Please note:
- If the embed code is removed when you click Save, and you don’t see your voki in your blog sidebar, it means you are using a free Edublogs.org blog.
- To enable the use of almost any embed code in posts, pages and text widgets on your blog, and up to 50 other blogs, you need to upgrade your blog to Edublogs Pro or be using an Edublogs Campus blog.
- Remember to enable extra features, including ability to add embed code, on your other blogs by going to Pro > Upgrade up to 50 student blogs inside your Pro blog dashboard (refer to these instructions).
Important tips when working with embed code in blog posts
Tip #1 – Use HTML editing mode
Remember never to click on the Visual Tab to change back to the visual editing mode once you have added the embed code.
This can break the embed code with some types of embeds. If this happens it can impact how your blog loads in a web browser like Internet Explorer or cause your blog sidebar to be pushed to the bottom of your theme.
If you need to edit a post that contains embed code make sure you change to HTML editing mode before opening up the post to edit.
The easiest way to do this is to:
- Go to Posts > Add New and click on the HTML tab.
- Close the post while still in the HTML tab and then go to Posts > All Posts to open the post for editing.
Tip #2 – Adjusting the embed size
Some embed code is designed to be embedded into normal websites and can be too wide for the width of your blog post.
Ideal width for embedding for most blog themes is 450 pixels wide.
If the online tool doesn’t provide the ability to adjust the embed size you can often do this by editing the code yourself. All you need to do is try adjusting the scale, width and/or height after you’ve added it to your post.
Here’s an example of adjusting the Glogster embed code.
Glogster embed code is for 960 pixels wide. Changing the scale in the embed code means your Glogster now fits your blog post.
