How to Embed Almost Anything in your Website

Credit is given to Digital Inspiration website for this information.

Embed RSS Feeds in Web Pages

Go to this page, replace the feed URL with your own feed, use the default color scheme or change it to something else and then click Get Code. You’ll get a JavaScript snippet that can be easily placed in the sidebar of your blog.

If you like to embed feeds from multiple sources, merge all of them into one using Yahoo Pipes and then pass the combined feed to the Google Gadget. You can also use RSS widgets like WidgetBox or YourMinis that are done in Flash and not JavaScript.

Embed High Quality or HD YouTube Videos

To embed a high resolution version of YouTube clip in your web pages, first make sure that “Watch in High Quality” or “Watch in HD” link exists next to the YouTube player as most videos are only available in standard format.

Next copy the YouTube embed code and append &ap=%2526fmt%3D18 (for high quality) or &ap=%2526fmt%3D22 (for 720p High Definition) to the URL value of the movie parameter in both instances (see YouTube HD example).

Embed MP3 music and other Audio

If you like to embed audio files like songs, podcasts or interviews in your web pages, use Yahoo! Media Player – its a free Flash music player that automatically detects all links to MP3 files in the current web page and turns them into a music player.  Another alternative is the Google MP3 Player.

To embed other audio formats like 3GP, Midi, Real or Windows Media, it may be a good idea to convert these files into MP3 using Zamzar so that they play on almost any web browser.

Embed Flickr Photos and Slideshows

To embed an individual Flickr photograph in your blog, click the “Share This” link (available next to the photo title) and choose embed it. Flickr requires that the embedded image should link back to Flickr and this built-in embed option automatically takes care of that requirement. (see example)

To embed a Flickr photo slideshow in your web page, open any Slideshow in a new page (see example) and choose “Customize HTML” from the embed option (see example). Here you can specify a custom size for your Flash slideshow so that it fits just right into your web page.

Embed Picasa Web Albums

When you open a photo album inside Picasa, click the link in the right sidebar that says “Link to this album” and choose “Embed Slideshow”. You can use the same approach to embed individual photographs that are available inside Picasa.

Embed Events from Google Calendar

Click the drop-down arrow next to any Google Calendar and select Calendar settings. Open the Google Embeddable Calendar Helper program by clicking the customize button and choose elements that you want to display or hide in the calendar.

Embed Very Large Photographs

To embed really large images in your blog, you may either use Deep Zoom or the Google Maps viewer. These programs break your photographs in small tiles and you can even pan / zoom across these images very similar to the default interface of Google Maps.

Embed Charts and Graphs in Web Pages

My personal favorite is Zoho Sheet – any chart created inside Zoho Sheet can be published as an external image without exposing the full spreadsheet. If you are interested in creating charts with low volume of data, use Google Charts. 

Embed GIF Animations and Screencasts

GIF animations (see example) are a perfect way to embed short screencasts in web pages as they require no plugins and auto-play inside feed readers. You should upload GIF files to your Flickr account as it preserve all the frames while lot of other image hosting website will drop anything after the first frame.

Embed Chat in your Blog

If you like to chat with visitors who are currently on your site, get the chat widget from Meebo Me and place it in the sidebar of your website. Visitors show up in your Meebo buddy list so you can strike up a conversation, answer questions, or just keep tabs on guests. Also see some more options to embed chat in blogs.

Embed Word Documents

Upload your document to Scribd and they’ll give you the embed code in Flash. Scribd supports both doc and the new Office 2007 docx format in addition to Open Office documents. Even Barack Obama is using Scribd to upload his public documents and upcoming plan.

Embed PowerPoint Presentations

While the popular choice is Slideshare, you should also consider using Issuu (best web application) for presentations that are either large or formatted in the form of magazines or catalogues (see example). The only downside is that Issuu accepts PDFs so you need to convert the presentation before uploading onto Issuu.

Embed Spreadsheet Data

Both Zoho Sheet and Google Docs allow you to publish a range of cells from a spreadsheet into a web page but the embedding process in Zoho is less complicated – select a range and choose “Publish” from the contextual menu to embed that range into your web page.

Embed Adobe PDF Files

To embed PDFs in a web page, you can either use Issuu (for magazine style PDFs) or Scribd for PDFs has either have lot of text or have a top-to-bottom reading layout similar to Word documents.

Embed Flash (SWF) or Flash Video (FLV)

The best option to embed Flash content is via swfobject. It improves the overall user experience by providing alternatives in case Flash is missing and your Flash content also becomes more searchable. This tutorial has all the files and other details to help you get started with SwfObject 2.

Related: How to Embed FLV Flash Videos

Embed LinkedIn Profile

If you wish to display your LinkedIn profile in the sidebar of your blog, try LinkInABox. People (site visitors) can read a summary of your LinkedIn profile without leaving the site.

Embed Google Maps in Web Pages

Embedding a Google Map in your website is now almost as easy as adding an image – just open the Static Maps wizard, search for location that you want to embed and specify the dimensions of your map. They’ll provide a simple URL that actually points to a static image of that map.  

Embed Another Webpage in your Blog

If you like to embed another website into your web page, your best bet is an IFRAME tag also known as an Inline Frame. Just set the SRC value to the address of the web page that you want to embed into your current HTML document. You could try IFRAMEs for inserting live search results from Google into your web page without having to worry about APIs.

Embed Windows Media or QuickTime movies

While it is possible to embed mov or wmv videos in web pages directly using the OBJECT tag, I recommend that you put these videos onto blip.tv and then embed them in web pages as Flash video.  That’s because your visitors can then play the video without extra plugins and two, they always have the option to download the video in the original format from blip.tv servers.

Embed Other Fonts in Web Pages

Most web pages use universal fonts like Arial, Times New Roman or Verdana since they are installed on most computers and hence your web pages will render correctly. If you want to try something different and render pages in fonts like Microsoft Calibri or Adobe Garamond Pro that are only available on some machines, all you need is sIFR – it lets you use almost any font for your web pages using JavaScript + Flash and is perfect for writing “newspaper style” headlines.

Embed your Lifestream in a Web Page

You have a presence on YouTube, Flickr, Twitter, Last.fm, Facebook, Amazon and a dozen other online places. It can get really tough for friends to track you at so many places so what you should do is create an account at FriendFeed, import all the different services that you use and then use the FriendFeed Badge to embed your lifestream activity on your main site. You can also create Lifestream with Google Reader.

Related tutorial: How to Embed Video in PowerPoint

Advertisements

SmartBoard Resources

I find so much useful information on Twitter.  Larry Ferrlazo’s recent tweet recommends a great blog, MagistraM on WordPress.com.  Here is the except and link to Teachers Love SmartBoards.

Teachers Love SmartBoards has an enormous collection of SMART Board resources that are easily searched by subject area and by type of activity. What really has impacted my teaching, though, are the tutorials. These are really easy to follow and will show you how to improve and update your Notebook files to really make an impact in your classroom.”

Best Web 2.0 Applications for Elementary School

Thanks to an amazing list of “The Best Web 2.o Application for Education-2007” from Larry Ferlazzo’s Website,  and Sylvia Tolisano from Langwitches Blog,  I am posting their list of the applications that have been the most useful or promising in the Elementary School scene.  Of course, I’m adding ones that I currently use, as well.  New tools are developing daily – keep researching to stay up to date!

  1. Animoto
    Create your own music video, simply by uploading your own images and selecting music. + Students LOVED seeing themselves on the video. – Limit of 30 seconds
  2. Slide.com
    Create your own slideshow, then embed in your classroom blog.
  3. Slideshare
    Upload your students’ or your own powerpoint files in order to embed them on your classroom blog
  4. Lunapic
    Web based image editor. Great effecs and animations.
  5. Voicethread
    Upload your images, record your voice over each image, invite others to collaborate, embed in your blog, collaborative storytelling
  6. Ning
    Create your own social network place for your students. Ning will even remove the ads, if you write to them that they are for elementary school students. Great potential to teach our younger students about social networkign in a safe environment.
  7. Google Earth & Maps
    Take a virtual tour around the world, create placemarks, add your own images or videos. Have students add their own descriptions. Save and share placemarks and virutal tours on your blog. Embed Google Maps on your classroom blog.
  8. Flickr
    THE best photosharing site. Especially love the many other sites, that mash-up and integrate with Flickr. Once your photos are uploaded to Flickr, there is no need to upload again and you can use the URL provided for different sizes for other applications as well
  9. Picasa
    A Google application relative, I use this constantly to create slideshows to embed in our school website.
  10. Mixbook
    Great potential for collaborative classroom creation, editing and publishing of books. Great variety of layouts, including text AND images.
  11. Tikatok
    Kids channel their imagination into stories – and publish those stories into books for you to share and treasure with friends and family
  12. WordPress
    Blogging platform (Free). Can be hosted by WordPress or your own server. I especially like the widget features, plug-ins and theme varieties available.
  13. Flashcard Friends  
    A  free social network for creating, sharing, learning and self-testing using online flashcards created by the students of teachers. It is a great way to build knowledge and boost test scores. The spelling flashcards are really popular.
  14. ePals
    ePals is the social network optimized for K-12 learning.  Students learn by sharing email regarding their studies.  This application is also now available in Spanish – Eduteca   Bienvenido a la versión beta del Portal en Español de ePals, que lo vincula con la comunidad mundial de ePals

New School Year

Another school year has begun and I reflect on the role of being a teacher and how it has changed for me over the years.  I’ve seen it from several points of view – that of a beginning teacher, veteran teacher, musicologist, technologist, and administrator.  One thing remains the same, regardless of the category;  motivated students want to learn and motivated teachers want to teach. 

Teachers’ pedagogy styles are so varied – just as the students’  learning styles are also varied.  It is miraculous that over a short period of time, those various styles and needs become congruent.  It’s the curriculum that binds the two worlds together, and the administrative acumen that propels the dynamics of education. 

I am really enjoying the luxury of Twitter as an educational tool.  People I don’t even know, but who thrive on education and it’s complexities, will contribute their expertise to ‘tweet’ about innovations, reforms, and new tools.  Regardless of the hour, I can simply type in a username and password, and visit fellow educators all over the world to collect new strategies that are freely shared.  My, how things have changed over the years.

School Resumes Aug.24, 2009

After two weeks of intense professional development and planning, the doors will swing wide on Monday morning and a fresh group of little people will walk in, some with anxious parents, some all on their own.  What will they expect?   It’s up to me to provide an inviting atmosphere that has been well prepared and interesting – it’s so important to get their attention from the first encounter.

So many children, even the Pre-K and Kinder babies, have either played games on a computer or watched their parent(s) use one at home.  At least, that takes some of the fear out of walking into a computer lab full of machines for the first time.  I have to remember that I am teaching digital natives, not digital immigrants.   My task is to assure the little ones that this is not only going to be fun, but a growing-up process.

The Houston ISD technology curriculum for PK-5 begins with input/output devices  and acceptable use policies.  With that in mind as a first-week objective,  I  ‘break the ice’ the first day by taking an informal inventory of what technology devices they have at home  and what they might like to explore.  In varying degrees, I am able to dialogue in general about the objectives and give ownership to the students.

Knowing the curriculum I am teaching for an entire school year in advance allows me plenty of room to navigate and adjust through the content.  My goal for this school year is to have my students, all 750+ of them,  accomplish not just the minimum requirements, but to exceed expectations and be proud to demonstrate what they have learned.