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

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. 🙂

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.