14 de junho de 2017

Visualizar imagens e vídeos nos comentários do Blogger

Tags

Um simples código para transformar todos os links de imagens e vídeos comentados em seus posts correspondente aos mesmos. Os vídeos que esse script suporta é do YouTube e Vimeo.


Instale esse pequeno script em seu blog e visualize todos os links de imagens e vídeos comentados no post do seu blog.

Quer ver na prática? Veja o script em funcionamento nos comentários desse post

Agora que você já viu, quer mesmo colocar no seu blog? Então siga os passos abaixo.

Script para visualizar imagens e vídeos nos comentários dos posts


Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Tema do seu blog desejado e clique em Editar HTML
  3. Procure por </body> e acima do trecho encontrado, cole:
  4. 
    <script>//<![CDATA[
    
    !function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi,b=/(\[vid\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?(\[\/vid\])?/gi,c=/(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi,d=document.querySelectorAll(".comment_body p"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="max-width: 100%; height: auto;display: block;" src="$2"" alt=""/>'),j=j.replace(b,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>'),j=j.replace(c,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>'),d[e].innerHTML=j}}();
    
    //]]></script>
    

Pronto salve o modelo e faça o teste em seu blog. Caso não funcione, deixe seu blog abaixo para eu te ajudar :)

Dúvidas? deixe um comentário abaixo

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

1 comentários


Abrir lista de emoticonFechar lista de emoticon