READ: Embedding media in your blog

Sign up for free hosting service

So, you now know what embedding and hosting are. Now it's time to put it into practice. The following instructions will show you how to embed media onto your blog.

Photobucket is the photo hosting service that I use. Photobucket allows me to upload my photos to their website, and then I can embed those photos into my blog. I will be using photobucket in the examples below. You will have an assignment to host a photo somewhere online and embed it into your blog. If you don't have a place to host a photo, just create a free photobucket account.

Upload your image to hosting site

Now, you will need to upload your image(s) to the photo hosting service that you want to use. Login to photobucket (or your hosting service) and upload your image(s). When I login to photobucket, I see a big uploader that looks like this:



Click on the uploader and upload an image or two. Once the images are uploaded, you should see them on a main dashboard that looks like this:



Okay, now you are ready to learn how to embed this media into your blog. Remember: you just uploaded an image to photobucket, and now photobucket is HOSTING the image online for you.

Copying the Embed Code

Whenever you go to certain video/image sites, you might see an "Embed" or "HTML Code" options near the image/video. These options might look like this:

• YOUTUBE:

• PHOTOBUCKET (click on the uploaded image to get to this screen):
  
  
  

Either way, you will see some HTML code. The HTML code listed is how you will embed the photo into your blog. Right click and copy that code. In the 2 examples above, the code you will have copied will look like this:

• <object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Q5im0Ssyyus&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
  
  
  
  OR it will look like:
  
  
  
  
• <a href="http://s356.photobucket.com/albums/oo10/ashleywebb3/?action=view&current=IMG_8567a.jpg" target="_blank"><img src="http://i356.photobucket.com/albums/oo10/ashleywebb3/IMG_8567a.jpg" border="0" alt="Photobucket"></a>

DO NOT BE AFRAID OF THE CODE. If you accidentally delete some, or you mess it up somehow, that's okay. Just go back and copy it again.

Embed the photo to your blog

We are going to go paste the code into the HTML editor on your blog. Again, this will tell your blog entry "look over here on this server, grab that image/video, and put it on MY blog."

Open up a new blog post, and click on the "Edit HTML" tab on the top right. Paste the code right into this HTML editor. It will look like this:


Click back to the "Compose" tab to see what you have embedded. Here is what I see after I pasted that code in:


When you are ready, click to publish the post! You have embedded media into your blog.



DON'T FORGET - MANY STUDENTS HAVE TRIED TO BE TRICKY AND JUST UPLOAD AN IMAGE TO BLOGGER USING THE BLOGGER IMAGE UPLOADER. Well, I can tell where the image is being hosted online. So just host it somewhere besides blogger so that you don't have to redo the assignment. Okay? :)