Como incorporar os videos do Facebook no Blogger

O Facebook recentemente lançou sua ferramenta de vídeos para concorrer principalmente com o Youtube, e a incorporação deles em sites/blogs pode ser um pouco confusa, pois a princípio parece não haver um código para tal.

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

Clique para expandir a seta no canto superior direito da postagem:

2ª imagem

Ao clicar em incorporar, uma popup se abre com o código, é só copiar e colar na sua postagem:

3ª imagem

O código de incorporação de qualquer vídeo do Facebook é sempre da forma:

<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&amp;show_text=0&amp;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

Aqui no blog costumo sempre usar 500px de comprimento. Um detalhe, o width aparece duas vezes no código, certifique-se de trocar o valor de width nesses dois campos!

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&amp;show_text=0&amp;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!