OEmbed plugin para jQuery

Publicado em Publicado por gserrano

Estou fazendo alguns testes para um sistema que lê tweets para agregar conteúdos e pensei: como fazer para que quando um texto que contenha um link pro Twitpic (por exemplo) exiba a foto?

Primeiro passo: baixe a biblioteca jquery-oembed para o seu projeto.

Imagine que você tenha a seguinte marcação html:

<p class="post">Esse é o teste com <a href="http://twitpic.com/2qabs0">http://twitpic.com/2qabs0</a> sadsa dsaff adsfdsaf dsf sadsa dsaff adsfdsaf dsf sadsa dsaff adsfdsaf dsf sadsa dsaff adsfdsaf dsf</p>

Usando jQuery e essa biblioteca, você pode percorrer todos os p.posts e seus links e para cada um deles, jogar em uma div com classe imgarea o embed

$(" p.post a").each(function() {
   $("div.imgarea").oembed($(this).attr("href"));
});

Fontes que podem ser embedadas:

  • 5min
  • Amazon Product Images
  • Flickr
  • Google Video
  • Hulu
  • Imdb
  • Metacafe
  • Myspace Videos
  • Qik
  • Revision3
  • Screenr
  • Slideshare
  • Twitpic
  • Viddler
  • Vimeo
  • Wikipedia
  • WordPress
  • YouTube

Como inserir livros do Google Books em uma página

Publicado em Publicado por gserrano

O serviço de livros do Google, o Google Books, oferece uma forma de você inserir os livros que eles disponibilizam por lá (em alguns casos trechos dos livros, em outros a obra inteira) no seu site.

É muito simples: só fazer a chamada a um javascript disponibilizado – e hospedado – pelo Google e depois usar a função GBS_insertEmbeddedViewer(id_do_livro,largura,altura);
No caso abaixo, vamos inserir trechos do livro O Leão, a Feiticeira e o Armário (Crônicas de Narnia) em um html, com dimensões de 600 por 500:

<html>
<head>
<title>Google - Books</title>
<script type="text/javascript" src="http://books.google.com/books/previewlib.js"></script>
</head>
<body>
<script type="text/javascript">
GBS_insertEmbeddedViewer(´xsWdgS6eFsYC´,600,500);
</script>
</body>
</html>

Para pegar o ID do livro, é só entrar em http://books.google.com e fazer a busca; o id fica exposto na URL.

Simples e interessante 🙂