Player incorporável para podcasts - Mundo Podcast 

Player incorporável para podcasts

21 outubro 2016 Por Thiago Miro
Player incorporável para podcasts

Há alguns anos publicamos aqui no Mundo Podcast uma tendência que era colocar os players de podcasts no topo dos posts, junto a vitrine. A intençío era fazer o player de podcasts ficar o mais similar possí­vel ao player do Youtube e dessa forma chamar a atençío de leitores acidentais, fazê-los apertar o play e entío descobrir o podcast.

Essa ideia evoluiu. Um código foi criado para tornar toda a estrutura do player (player, botões e imagem) incorporável assim como sío os ví­deos do Youtube para permitir que outros produtores possam compartilhar seus episódios como se estivessem compartilhando um ví­deo.

O código foi desenvolvido pela Rádiofobia Podcast e Multimí­dia para a Rede Geek, que por sua vez decidiu disponibilizá-lo para toda a comunidade. Abaixo vamos fazer um passo-a-passo detalhado para aplicá-lo. Todo esse trabalho visa fazer com que mais pessoas descubram a mí­dia.

Exemplo de Player incorporável

Demo -> https://goo.gl/8PQuh3

Player incorporado abaixo:

Quais as funcionalidades desse player?

  • Download do episódio em formato mp3
  • Download do episódio em formato zip
  • Opções de assinatura para várias plataformas
  • Opções para compartilhamento em redes sociais
  • Código de incorporamento

FUncionalidades do player incorporável

Construindo o player

Aparentemente, pelo tamanho do post e quantidade de códigos, essa parece uma tarefa difí­cil, mas garanto que nío é. Siga os passos í  risca e você conseguirá reproduzir esse resultado em seu site. 🙂

Recomendo o uso do Notepad++ ou outro editor de código similar. No final desse artigo há um ví­deo com a execuçío desse tutorial para auxiliar no processo. Vamos lá.

1º passo: plugin e configuraçío

Para toda a estrutura funcionar você precisa ter o plugin Powerpress instalado e ativo em seu WordPress. Vamos as configurações especí­ficas.

Acesse o menu Powerpress ~> Configurações, vá na aba Website e DESATIVE as seguintes opções:

  • Mostrar mí­dia e links
  • Exibir link “Reproduzir em uma nova janela”.
  • Exibir link de download
  • Exibir links para assinatura sob o player e os links de mí­dia.

Salve.

Você perceberá que o player nos posts desapareceu. Mas calma, nío se desespere.

2º Passo: Inserindo o player junto a vitrine

Todos os arquivos que editaremos neste tutorial estío armazenados dentro da pasta do template do seu site. Comumente, a pasta do tema fica em: /public_html/wp-content/themes/. Esse endereço pode variar em casos especiais.

Abra, no tema do seu site, o arquivo single.php (ou o responsável por construir seus posts) e insira o seguinte código logo abaixo da chamada das vitrines do post:

Caso nío saiba como encontrar o código da vitrine, veja aqui como fazer.

O código acima irá chamar, automaticamente, o player logo abaixo da vitrine sempre que o post tiver um arquivo mp3 anexado através do Powerpress.

3º Passo: criando os botões

Para essa etapa precisaremos de alguns í­cones. Você pode BAIXAR AQUI os í­cones usados no exemplo ou procurar/criar í­cones de sua preferência para cada botío.

Descompacte o arquivo e salve a pasta em public_html/wp-content/uploads/ via FTP.

Adicionando botões ao player

O código dos botões será integrado ao código do player visto acima. Perceba abaixo que as 3 primeiras e 2 últimas linhas sío as mesmas do código anterior. Substitua o código anterior por este completo listado abaixo.

Explicando o código e todas as alterações que você deverá fazer de acordo com seu site.

  • Linha 5: Responsável por chamar o arquivo mp3. Nío há alterações a serem feitas.
  • Linha 6: Responsável por adicionar o arquivo zip í s opções de download. Há alguns procedimentos a serem feitos aqui.

Você deverá substituir nesta linha o trecho TRACKER BLUBRRY + URL PASTA ZIP pelo seu rastreador do Blubrry mais a URL da pasta onde você hospeda os arquivos zipados.

Exemplificando.

  1. Sua URL de track do Blubrry: http://media.blubrry.com/podcast-x/
  2. Sua pasta onde estío arquivos zip: http://site.com.br/podcasts/zip/

Você substituirá o trecho indicado por:
http://media.blubrry.com/podcast-x/site.com.br/podcasts/zip/

A linha 6 completa ficaria assim:

Qual a mágica que acontecerá aqui?

Através da URL do arquivo mp3, o código irá “adivinhar” qual a URL do arquivo zip e disponibilizá-lo para download. Lembre-se de nío esquecer de subir o arquivo zip sempre na pasta que você definiu na linha 6.

  • Linhas 7, 8 e 9 apenas sío botões que abrirío opções abaixo dele.
  • Linhas 11 a 14 sío os botões que abrirío abaixo do botío ASSINAR. Substitua os LINK PARA PíGINA pelos links de páginas em seu site ensinando a assinar podcasts em cada plataforma.

Eu tenho que ter uma página para cada plataforma?

Sim, o usuário é preguiçoso e você deve sempre puxá-lo pela mío. Crie uma página ensinando a assinar podcasts no iOS, Android e até mesmo no Windows Phone. 😉

  • Linhas 16 a 23 sío responsáveis por criar os links de compartilhamento abaixo do botío COMPARTILHAR. Apenas uma alteraçío é necessária. No final da linha 18 altere USUíRIO-TWITTER pelo perfil do seu podcast sem @.
  • Linhas 24 a 26 sío responsáveis por gerar o código para incorporar seu player em outros sites. Nío há alterações a serem feitas, por enquanto.

Salve o arquivo.

Nesse momento você verá os botões aparecendo abaixo do player, mas ainda desconfigurados. Vamos ao próximo passo.

4º Passo: Estilizando os botões

Abra o arquivo css do seu site (geralmente é o style.css) e insira as 137 linhas do código abaixo no final dele. Em seguida explicarei como customizá-lo com as cores do seu site.

Esse código CSS deixará os botões em seu site iguais aos do exemplo usado na Rede Geek. Para customizar as cores faça o seguinte:

Ao lado de cada linha customizável há um /* comentário */ indicando a qual botío ela se refere. Altere o código HEX da cor ou URL do arquivo para sua preferência e salve o arquivo.

Abertura dos botões ao clicar

Para habilitar a funçío abrir dos botões Assinar, Compartilhar e Incorporar, abra seu arquivo footer.php e insira, antes da tag </body>, os scripts abaixo.

Salve o arquivo.

O player estará pronto para uso, leve e responsivo. 🙂

Exemplos do playe responsivo em diversas telas

Observe na imagem acima que em versões de tablet e smartphone decidimos por ocultar os botões de download em ZIP e incorporamento por julgar que tais funções só seriam úteis em desktop.

 

Construindo o incorporamento

O incorporamento do player será feito exatamente igual a forma que se incorpora um ví­deo do Youtube ou um post do Twitter, através de um iframe. O incorporamento padrío oferecido pelo Powerpress é composto apenas do player, nós precisamos fazer com que esse incorporamento tenha, além do player, os botões de download e a vitrine do post, fazendo assim com que, em outros sites, seu episódio tenha a aparência de um ví­deo (como vimos no iní­cio desse post).

Caso ainda nío saiba, um iframe é um código que permite carregar dentro do seu site uma página externa.

Vamos agora codificar um iframe dos posts com episódio contendo apenas a vitrine, o player e os botões. Para isso vamos criar variáveis nas URLs. Mas o que é uma variável?

Variável é um parmetro em uma URL para gerar um comportamento diferente do normal. Neste tutorial, ao abrir a URL de um post, você verá o conteúdo completo. Ao abrir essa mesma URL com uma variável, você verá apenas o conteúdo essencial para o iframe. Vamos testar:

– Abre essa URL: http://www.redegeek.com.br/2016/10/11/ultrageek-261-harley-davidson/
– Agora a mesma URL com variável: http://www.redegeek.com.br/2016/10/11/ultrageek-261-harley-davidson/?player=23988

Viu? O layout muda e carrega apenas o essencial para o incorporamento.

1º Passo: Arquivos do layout e css

Clique aqui para baixar um arquivo zip com dois arquivos dentro. Sío eles: episode.php e player.css. Descompacte o arquivo e abra ambos para ediçío no Notepad++.

A linha 23 do arquivo episode.php é a linha responsável por gerar o botío ZIP. É o mesmo caso da linha 6 exemplificada no 3º passo da inserçío dos botões. Troque URL TRACK + URL PASTA PODCASTS ZIPADOS pela sua url do tracker mais a url da pasta onde os episódios em formato zip estío hospedados.

Salve o arquivo.

No arquivo player.css há diversas linhas com /* comentários */ indicando as cores e í­cones do player. Altere-as para as mesmas cores já ditas anteriormente no 4º passo, estilizando botões.

Salve o arquivo.

Suba os dois arquivos para a pasta do seu tema.

2º Passo: identificar a variável

Vamos definir a variável como player, ou seja, sempre que tiver um “?player” no final da URL, o sistema identificará e tomará uma açío.

Abre, no seu tema, o arquivo functions.php e insira no final o código abaixo:

Nada precisa ser alterado, agora seu sistema sabe identificar a variável. Salve o arquivo.

3º Passo: Carregando um layout diferente

Esse é um ponto crucial. Preste muita atençío.

O que acontece ao abrir a URL de um post?

Ao carregar um post, o WordPress solicita o arquivo single.php (ou similar a depender do tema). Dentro deste arquivo haverá uma chamada para o cabeçalho, para o conteúdo do post, barra lateral, rodapé… enfim, todo o conteúdo do post.

Nós vamos fazer uma modificaçío nisso, vamos colocar uma condicional. Se ao carregar o post a URL tiver a variável “player”, ele abrirá o layout em episode.php. Se a URL nío tiver variável, ele abrirá o post normal.

Entendido isso, abra seu arquivo single.php. No topo dele crie uma linha e cole o seguinte código na linha 1.

Repare. Na linha 3 ele diz que se houver “player” na variável, a linha 5 deve ser executada chamando o arquivo episode.php. Caso nío tenha variável, ele chamará todo o código do arquivo single.php.

Na linha 11 ele conclui fechando a condicional.

O que você fará aqui? Você vai MOVER todo o conteúdo original do arquivo single.php substituindo a linha 9 desse código acima.

Salve o arquivo.

Feito isto, seu player incorporável estará pronto! O código de incorporaçío gerado em cada player já está com a variável nele. Vá lá, pegue a URL com variável e teste. 🙂

Observações finais:

  • É possí­vel fazer um plugin disso? Talvez, mas como cada um usa um template diferente, isso acarretaria uma quantidade de bugs enorme. Fazer individualmente reduz os erros.
  • As alterações feitas nío afetam os plugins. Você pode atualizar todos, inclusive o Powerpress, sem perder as alterações.
  • O tema do site nío pode ser atualizado

Ví­deo tutorial

Registro de uso:

Caso você tenha se interessado em implantar esse player em seu site, por favor preencha o formulário abaixo. Nós gostarí­amos de saber onde o player está sendo usado e em caso de atualizaçío do código, lhe avisaremos. Obrigado.