How to Embed Almost Anything in your Website

Learn how to embed almost anything in your HTML web pages from Flash videos to Spreadsheets
to high resolution photographs to static images from Google Maps and more.

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 oneusing 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 – it's 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 theGoogle
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.

Embed LinkedIn Profile

If you wish to display your LinkedIn profile in the sidebar of your blog, tryLinkInABox. 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 anIFRAME 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 theOBJECT 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.