O WordPress em sua imensidão de recursos e facilidades, nos presenteia a cada descoberta de algo novo e totalmente útil. Muitas ferramentas da plataforma são de uma sutileza que nos faz indagar como não havíamos pensado nisso antes.
Dentre muitos motivos para desenvolver com o WordPress está a facilidade de integração com as mídias digitais. Um dos formatos que permite fazer essa integração é o oEmbed. Ele te permite embutir um URL de outro site dentro do seu. Por exemplo: YouTube, Vimeo, Flickr, Google vídeos e WordPress TV.
Incorporar um vídeo usando oEmbed
- Em um computador, vá até o vídeo da Mídia Digital que deseja incorporar.
- Próximo ao vídeo, clique em Compartilhar .
- Copie o código HTML da caixa que aparecerá.
- Cole o código no HTML de seu blog ou website.
Pronto!
É super fácil de incorporar vídeos, imagens, tweets, áudio e outros conteúdos em seu site WordPress e você pode incorporar todas essas opções sem qualquer problema ou conhecimento avançado de programação ou até mesmo de HTML. Esta funcionalidade foi adicionada na atualização do WordPress 2.9.
oEmbed foi projetado para evitar a necessidade de copiar e colar HTML do site que hospeda a mídia que você deseja inserir. Ele suporta vídeos, imagens, texto, e muito mais.
Confira de onde você pode incorporar conteúdo usando a integração oEmbed
notas
- Twitter – versões mais antigas do WordPress tem problemas com incorporações de HTTPS, basta remover o ‘s’ dos https para corrigir.
- YouTube – Apenas vídeos públicos e vídeos e playlists “não listados” – vídeos “privados” não vão incorporar.
- Tumblr – apenas mensagens (name.tumblr.com/post/etc) são reconhecidos, não imagens independentes (name.tumblr.com/image)
Considerações de Segurança
Quando um consumidor exibe quaisquer URLs, eles provavelmente vão querer filtrar o esquema de URL para ser um dos http
, https
ou mailto
, embora os provedores são livres para especificar qualquer URL válida. Sem filtragem, URLs estilo Javascript: ...
poderiam ser usadas para ataques XSS.
Quando um consumidor exibe HTML (como com vídeo embedado), pode haver uma brecha para ataques XSS no provedor. Para evitar isso, recomenda-se que os consumidores exibir o HTML em um iframe
, hospedado em outro domínio. Isso garante que o código HTML não é possível acessar os cookies a partir do domínio do consumidor.
Descoberta
Prestadores oEmbed pode optar por fazer o seu apoio oEmbed detectável, adicionando elementos para a cabeça de seus documentos (X) existentes HTML.
Por exemplo:
<Link rel = tipo "alternativo" = "application / json + oEmbed" href="http://flickr.com/services/oembed?url=http%3A%2F%2Fflickr.com%2Fphotos%2Fbees%2F2362225867%2F&format=json" title = "Bacon Lollys oEmbed Perfil" /> <Link rel = tipo "alternativo" = "text / xml + oEmbed" href="http://flickr.com/services/oembed?url=http%3A%2F%2Fflickr.com%2Fphotos%2Fbees%2F2362225867%2F&format=xml" title = "Bacon Lollys oEmbed Perfil" />
As URLs contidas no atributo href
devem ter o ponto final oEmbed completo + URL e qualquer outro formato de parâmetro necessário. Nenhuma outra solicitação de parâmetros deve ser incluído neste URL.
O tipo de
atributo deve conter application / json + oEmbed
para respostas JSON, ou text / xml + oEmbed
para XML.
Exemplo de integração de vídeo
Pedido:
http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json
Resposta:
{ "Versão": "1.0", "Type": "video", "Provider_name": "YouTube", "PROVIDER_URL": "http://youtube.com/", "Width": 425, "Altura": 344, "Title": "Incrível Nintendo Facts", "Author_name": "ZackScott", "Author_url": "http://www.youtube.com/user/ZackScott", "Html": "<Object width = \" 425 \ "height = \" 344 \ "> <Param name = \ valor "filme \" = \ "http: //www.youtube.com/v/M3r2XDceM6A&fs=1 \"> </ param> <Param name = \ valor "allowFullScreen \" = \ "true \"> </ param> <Param name = \ valor "allowscriptaccess \" = \ "sempre \"> </ param> <Src = \ incorporar "http: //www.youtube.com/v/M3r2XDceM6A&fs=1 \" type = \ "application / x-shockwave-flash \" width = \ "425 \" height = \ "344 \" allowscriptaccess = \ "sempre \" allowFullScreen = \ "true \"> </ embed> </ Object> ", }
Conta pra gente o que você achou do oEmbed, deixe sua contribuição nos comentários. Abraços 🙂