Eu tive que descobrir a duras penas, como incorporar um vídeo de uma música para poder colocá-lo aqui no blog na postagem Crazy Links da semana passada. E é tão fácil que dá vergonha!
Antes de tudo, é necessário que você tenha o código SDK do Facebook em seu site. Com ele, você pode rodar qualquer plugin disponibilizado pela rede social. É um código em javascript que você deve colocar antes da tag </body> no layout de seu template:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
(Vá em Painel de Controle >> Modelo >> Editar HTML >> Aperte as teclas Ctrl + F para localizar a tag e cole o código acima antes dela.)
Agora, localize o vídeo que você quer incorporar e ele tem que ser público:
1ª imagem |
2ª imagem |
3ª imagem |
<iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="315" scrolling="no" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FSuicideSquad%2Fvideos%2F1740866772860623%2F&show_text=0&width=560" style="border: none; overflow: hidden;" width="560"></iframe><
Por padrão, note que vem sempre com 560px de comprimento(width) e 315px de altura (height), que você pode alterar manualmente para o tamanho desejado que você quer. Basta usar uma simples regra de três para calcular os novos tamanhos... humm, você não sabe usar uma regra de três... Que vergonha! Mas o tio Cido dá uma ajuda abaixo com a conversão de alguns tamanhos mais usados:
Simples regra de três |
Para centralizar o vídeo, basta usar uma div com o estilo text-align:
<div style="text-align: center;"><iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="281" scrolling="no" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FSuicideSquad%2Fvideos%2F1740866772860623%2F&show_text=0&width=500" style="border: none; overflow: hidden;" width="500"></iframe></div>
Se preferir colocar uma legenda, acrescente entre
</iframe> e </div> a expressão:
<BR/>[ESCREVA-A-LEGENDA-AQUI]
Pronto, depois é só colar no editor de texto do Blogger no modo HTML (Isso é importante!). Abaixo temos o resultado:
Fácil, não?
Na terceira imagem, podemos notar que existem as configurações avançadas, mas recomendadas para quem tem um mínimo de conhecimento em javascript. Preferi não ir a fundo, pois o objetivo do tutorial é para o blogueiro comum.
Apesar do alvo do tutorial ser o Blogger, ele pode ser usado para qualquer outra plataforma.
Um detalhe: Tem muito site famoso por aí que usa o termo "embedar", que NÃO existe na nossa língua. Ele vem do verbo inglês To Embed, e eu odeio essa "abrasiliação" de palavras inglesas. A tradução é simples, Incorporar e tenho dito!Críticas e sugestões nos comentários!