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 parâmetro 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.