wordpress: getting started

Many sites, such as YouTube and Vimeo, let you embed content into other sites (such as into your blog). This is also true of Google Maps and Charts, video services, widget providers, and more. Look for the "Embed" option on those sites. Here's what it looks like on YouTube:

After clicking the Embed option, YouTube gives you a bunch of options. The most important one to notice is the Size selector. You should select the size that most closely matches the width of the content area in your site's theme. For example, if your site's content area is 700px wide, select the option that's 640px wide. Notice that you can also embed the content at custom dimensions.

Copy the embed code provided to your clipboard, return to your Post, and switch to HTML mode. This is critical - you cannot paste raw HTML into the editor when in Visual mode.

In addition, there is a potential limitation - only users who have the role of Administrator on the WordPress site can post embed code without having it stripped out.

If you are not an administrator and/or don't want to use HTML mode, there is an alternative for users of WordPress 3.1 and higher. Go to the Settings section of the Dashboard and enable the Auto-embeds option. Set a maximum width and height at which you want embedded media to appear.

Now, returning to the example YouTube video, don't grab the embed code. Instead, copy the URL of the page hosting the video to your clipboard:

Back in the WordPress post editor, paste the URL on a line by itself, directly into the body of the post. You do not need to be an administrator, and you do not need to be in HTML mode for this to work. If the service you pasted the URL from is a cooperating "oembed" provider, the media embedding will be taken care of for you, automatically. A list of supported providers can be seen here.

Notice that this technique does not work with Google Maps or Charts.

Flickr Slideshows

To embed a Flickr slideshow, try this: On Flickr.com, go to any Set, Album, or Photostream, and click the Slideshow button. Once in the slideshow, click the Share link at the top right.

At this point, you can copy the code provided in the embed field, but notice that it defaults to 400px wide, which is probably not wide enough. Instead, click the Customize link and you'll be taken to a new page where you can enter a custom width and grab updated embed code for posting.