Basic Mashups (MT 3)

Blog Team's picture

You can embed many media objects within your blog site including YouTube Videos, your personal Flickr Photos and other objects by including the "HTML Embed code" within your blog entry

YouTube Videos

  1. Log on to http://blogs.psu.edu and create a New Entry.
  2. Make sure you are within the default Convert Line Breaks format. If you have set up WYSIWYG editing, you may need to return to the to Convert Lines format.
  3. Open a new browser window and search for a video on YouTube.
    Note: Please be sure that the YouTube video is free of copyright issues.
  4. Look for the Embed code on the YouTube page and cut and paste it into the text body.
    Note: The embed code begins as "<object width =..."
  5. Save and publish the entry. The video stream will be displayed in your blog.
    Note: If the entry shows the code instead of the video, make sure are outside WYSIWYG mode.

Flickr Photos

These instructions only work for your own Flickr photos.

  1. Upload any image files you wish to post on to your blog into your Flickr account.
  2. Log on to http://blogs.psu.edu and create a New Entry.
  3. Make sure you are within the default Convert Line Breaks format. If you have set up WYSIWYG editing, you may need to return to the to Convert Lines format.
  4. Open a new browser window and search for the uploaded Flickr photo.
  5. Select the All Sizes button in the Flickr Toolbar and select the appropriate size. See Screen Capture.
  6. Save and publish the entry. Your Flickr photo will be displayed in your blog.
    Note: If the entry shows the code instead of the photo, make sure are outside WYSIWYG mode.

Google Maps

These instructions only work for your own Google Maps and Google Maps released to the public.

  1. Create a custom Google Map following the Google MyMaps Instructions.
  2. Click Link to this Map in the upper right, then click Customize and preview embedded map
  3. Set the zoom and location in the preview window to the appropriate settings.
  4. Close the window, then cut and post the HTML code into your blog entry. The code looks something like

    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?MAP DETAILS HERE
    </iframe><br />
    <small><a href="http://maps.google.com/maps?MAP DETAILS HERE style="color:#0000FF;text-align:left">View Larger Map</a></small>

See Google Maps for instructions with screen captures.

Other Content

The capability of embedding content from other sites depends on whether they release an embed code or not. Some sites may only allow you to embed your own items, and others may not offer that option at all.