domingo, 5 de junho de 2011

How To Embed Practically Anything On Your Blog or Website

How To Embed Practically Anything On Your Blog or Website: "


If you want the hands-down, easiest way to embed practically anything on your blog or website, have we got a tool for you!

The nature of the web is such that sharing and republishing content is common — and often even encouraged. The problem is, we increasingly store bits of our data on various services scattered across the web. Aggregating that content into one centralized personal hub can be time consuming — requiring user to manually copy text and links or upload files and photos — or fiddling with RSS feeds trying to make content automagically appear.

Twitter released a very cool tool to allow publishers to embed tweets in their blog posts, but the process is overly complex for most users, with plugins needed to streamline the process. Why can’t you just paste a link to a Twitter status in a blog post or webpage? It turns out, you can.


A Quick Introduction to oEmbed


A technology called oEmbed, in existence for a number of years, was built to solve the embeddable content problem. oEmbed is an open format, designed to let web publishers easily embed content such as photos, video, rich content — and automatically display other content by typing in a URL. Providers like YouTube, Hulu, Flickr and Vimeo all support oEmbed, meaning that pasting a URL for one of those services into a system with oEmbed support should allow users to quickly embed rich media.

WordPress, the world’s most popular CMS, has had basic oEmbed support since WordPress 2.9. Plugins for most other popular platforms exist, too. The problem is, keeping an updated list of the providers that support oEmbed and keeping libraries up to date isn’t a streamlined process.


Embedly: Secret Sauce to Web Embed Fun


In March, we wrote about the startup Embedly, which has developed a platform for converting URLs into embeddable content. Embedly is already in use by companies such as Storify, bit.ly and TweetDeck.

Embedly uses the oEmbed spec to add embed functionality to a growing list of services — 218 at the time of this writing — by interfacing just with the Embedly API.

When we first wrote about Embedly, our post focused on how third parties can use Embedly to provide rich-media previews in their own apps or to create their own embed targets. Embedly Pro also lets its users bring rich embeds to mobile users.

Still, the basic free Embedly service is extremely powerful. In fact, when paired with a content management system (CMS) such as WordPress, Drupal or Joomla, it makes embedding rich content a snap.


How to Use Embedly


Embedly has libraries available for a host of different client and server-side web languages, including jQuery, Python, Ruby and PHP. For users who don’t want to mess with writing their own tool, Embedly has built its own JavaScript tag and WordPress plugin. Community-developed plugins for Drupal and Joomla also exist.

Since the WordPress plugin was developed by Embedly itself (and we use WordPress at Mashable), here’s a brief overview of how easy it is to use Embedly to bring rich content to your website.

Install the Embedly Plugin

The first step is to download and install the Embedly plugin. Activate the plugin and you can select what services you want to enable from the Embedly menu in the WordPress dashboard.

Embedly frequently updates its service list, and you can run an “update services” command to get access to more libraries.

Paste URLs Into Your Posts

The next step is to simply enter a URL on its own line into your posts or web pages. Each service has slightly different parameters for how URLs should be entered, but in general, the base URL is all that is needed.

To embed a Twitter status update, for instance, you just need to enter in the URL to that update. The Embedly API page has the parameters for each service supported by Embedly.

Enjoy Rich Media Embeds

That’s it. You can now enjoy and share media from 200+ web services across your site.

The Tumblr support is one of my favorite features — simply entering the URL for a post will embed the content of that post. If it’s a photo, the photo is displayed; if it’s a video, you’ll see the video in its player, and so on.

On the Twitter end, Embedly’s Blackbird Pie implementation is a lot easier than any other method we have seen. The company even has basic support for Twitter Photos.

You can take a look at an example page I created using Embedly on one of my test blogs.

More About: embedly, embeds, oembed, tumblr, twitter, WordPress

For more Dev & Design coverage:



"

Nenhum comentário:

Minha lista de blogs