Arquivos do Website:

Código JavaScript para publicar e exibir vídeos do YouTube nos comentários do Blogger


Publicar e exibir vídeos do YouTube nos comentários de um blog hospedado na plataforma Blogger, sem utilizar códigos especiais, ainda não é possível! Para poder exibir vídeos do YouTube nos comentários do seu blog, você vai precisar instalar um pequeno código JavaScript, direto no código fonte do seu blog.

 
Imagem: http://cidl.ou.edu/d2l/

Antes de realizar este procedimento, faça backup do template do seu blog, salvando uma cópia no seu computador! Acesse o painel de controle do Blogger ==> Modelo ==> Fazer backup/Restaurar ==> Fazer download do modelo completo.


Depois de fazer o backup do template do seu blog, clique em Editar HTML. Localize a tag "</body>", que está no final do código fonte do template, e logo acima dela cole o seguinte código:

<script type="text/javascript">

//<![CDATA[

$('#comments p, #comments dd').each(function() {

  $(this).find('a[href*="youtube.com/embed"]').replaceWith(function() {

    return $('<iframe width="420" height="315" src="' + this.href + '" frameborder="0"></iframe>');

  }); 

});

//]]>

</script>


Você poderá personalizar a largura (width="420") e a altura (height="315") dos vídeos que serão exibidos nos comentários. Personalize conforme a largura da área de comentários, disponível no template do seu blog! Clique em "Salvar modelo".

Acesse o seu blog e poste um comentário com o link de um vídeo do YouTube, para testar o funcionamento do código. Para postar e exibir um vídeo nos comentários, você deverá utilizar mais um pequeno código! Acesse o YouTube, copie o endereço url do vídeo desejado e retire somente os caracteres do final do link (normalmente cada endereço url de vídeo tem um código com 11 caracteres). Cole os caracteres no local indicado no código:

Código para exibir um vídeo do YouTube nos comentários:

<a href="http://www.youtube.com/embed/CÓDIGO DA URL DO VÍDEO">TÍTULO DO VÍDEO</a> 



Exemplo de endereço url de um vídeo:



http://www.youtube.com/watch?v=G3Rzy7YqUVU



Resultado final: 



<a href="http://www.youtube.com/embed/G3Rzy7YqUVU">300 - Rise of an Empire - Official Trailer</a>


Caso o vídeo não apareça nos comentários do seu blog, acesse o painel de controle do Blogger ==> Modelo ==> Editar HTML. Procure no código fonte do seu blog, pela tag "</head>" e, logo acima dela cole a seguinte linha de código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>


Clique em "Salvar modelo". Essa linha de código do Google irá auxiliar o código JavaScript dos vídeos do YouTube a exibir corretamente os vídeos nos comentários!

Para orientar os usuários do seu blog, a postarem vídeos nos comentários, você deverá adicionar o código correspondente, acima da caixa de comentários. Acesse o painel de controle do Blogger ==> Configurações ==> Postagens e comentários ==> Mensagem do formulário de comentário, clique em "Adicionar".

Cole esse código na caixa e clique em "Salvar configurações":

<b>Para adicionar um vídeo do YouTube nos comentários, utilize:</b>
<br/>
&lt;a href=&quot;http://www.youtube.com/embed/CÓDIGO DA URL DO VÍDEO&quot;&gt; TÍTULO DO VÍDEO&lt;/a&gt;
<br/>
<b>Exemplo de código da url:</b> https://www.youtube.com/watch?v=<b>G3Rzy7YqUVU</b>


Você pode personalizar o texto das instruções, do jeito que quiser, só não modifique o código destacado em vermelho, pois é o código que o usuário deverá utilizar para postar o vídeo!