Vídeos são uma das melhores maneiras de aumentar o engajamento do usuário. Recentemente, um de nossos usuários nos perguntou sobre uma maneira de criar sobreposições de botões de compartilhamento em vídeos, semelhante ao popular site UpWorthy. Neste artigo, mostraremos como adicionar botões de compartilhamento como sobreposição em vídeos do YouTube no WordPress.
Exemplo de como ficaria:
Adicionando Botões de Compartilhamento como Sobreposição em Vídeos do YouTube
Havia várias maneiras de fazer isso. A maioria das maneiras exigiria que você colasse pedaços de código HTML toda vez que adicionasse um vídeo. Em vez de fazer isso, decidimos criar um shortcode que automatizaria esse efeito de sobreposição.
Simplesmente copie e cole o seguinte código em um plugin específico do site ou no arquivo functions.php do seu tema:
/// WPBeginner's YouTube Share Overlay Buttons
function wpb_yt_buttons($atts) {
// Get the video ID from shortcode
extract( shortcode_atts( array(
'video' => ''
), $atts ) );
// Display video
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook share button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video .'" target="_blank">
Facebook</a></li>';
// Add Tweet button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// Return output
return $string;
}
// Add Shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
Este código cria um shortcode que adiciona automaticamente links de compartilhamento do Twitter e Facebook aos seus vídeos. Esses botões só ficam visíveis quando o usuário passa o mouse sobre o vídeo. Você pode usá-lo para adicionar qualquer outro canal de mídia social também.
Para usar este shortcode, tudo o que você precisará fazer é adicionar o ID do vídeo do YouTube no shortcode, assim:
[wpb-yt video="qzOOy1tWBCg"]
Você pode obter o ID do vídeo do YouTube a partir da string da URL. Assim:
Agora, quando você adicionar um vídeo, poderá ver seu vídeo do YouTube e links de texto simples para compartilhar o vídeo no Facebook ou Twitter. Você notará que esses links não são estilizados de forma alguma.
Então, vamos estilizar esses links para criar botões, para que fique um pouco mais bonito. Também ocultaremos esses botões e os faremos aparecer apenas quando o usuário passar o mouse sobre o contêiner do vídeo. Para fazer isso, adicione o seguinte CSS à folha de estilos do seu Tema Filho.
#share-video-overlay {
position: relative;
right: 40px;
top: -190px;
list-style-type: none;
display: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, top .25s;
-moz-transition: opacity .4s, top .25s;
-o-transition: opacity .4s, top .25s;
transition: opacity .4s, top .25s;
z-index: 500;
}
#share-video-overlay:hover {
opacity:1;
filter:alpha(opacity=100);
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
Isso é tudo. Agora você terá botões de compartilhamento sobrepostos aos seus vídeos do YouTube no WordPress.
Adicionando Botões de Compartilhamento como Sobreposição para Playlists de Vídeo do YouTube no WordPress
Após a publicação deste artigo, muitos de nossos leitores perguntaram como esse código poderia ser modificado para funcionar para playlists do YouTube, bem como para vídeos. Se você incorporar vídeos e playlists do YouTube em seu site WordPress, deverá usar este código em vez disso.
/*
* WPBeginner's Share Overlay Buttons
* on YouTube Videos and Playlists
*/
function wpb_yt_buttons($atts) {
// Get the video and playlist ids from shortcode
extract( shortcode_atts( array(
'video' => '',
'playlist' => '',
), $atts ) );
// Check to see if a playlist id is provided with shortcode
if (!$playlist == '' ) :
// Display video playlist
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '?list=' . $playlist . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video . '%26list%3D' . $playlist . '" target="_blank">Facebook</a></li>';
// Add Twitter button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video . '%26list%3D' . $playlist . '">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// If no playlist ID is provided
else :
//Display video
$string .= '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video .'" target="_blank">
Facebook</a></li>';
// Add Twitter button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
endif;
// Return output
return $string;
}
// Add shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
Usando o código acima, você também pode adicionar uma playlist com botões de compartilhamento sobrepostos. Para exibir sua playlist, você terá que fornecer o ID do vídeo e o ID da playlist no shortcode, assim:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Você pode obter os IDs do seu vídeo e da sua playlist visitando a playlist no YouTube e copiando o ID da lista da URL, assim:
Adicionando o Link de Postagem do WordPress no Botão de Compartilhamento Sobreposto em Vídeos do YouTube
Após publicarmos este artigo, alguns de nossos usuários perguntaram que gostariam que os botões de compartilhamento compartilhassem o link de sua postagem do WordPress em vez do link do vídeo do YouTube. Para fazer isso, você precisa substituir o URL do vídeo nos botões de compartilhamento pelo permalink da postagem do WordPress. Use este código em seu functions.php ou plugin específico do site:
/// WPBeginner's YouTube Share Overlay Buttons
function wpb_yt_buttons($atts) {
// Get the video ID from shortcode
extract( shortcode_atts( array(
'video' => ''
), $atts ) );
// Display video
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Get post permalink and encode URL
$permalink_encoded = urlencode(get_permalink());
// Add Facebook share button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u='. $permalink_encoded .'" target="_blank">
Facebook</a></li>';
// Add Tweet button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url='. $permalink_encoded .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// Return output
return $string;
}
// Add Shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
Sinta-se à vontade para modificar os trechos de CSS ou de shortcode para atender às suas necessidades. Para otimizar ainda mais seus vídeos, você pode tornar seus vídeos do YouTube responsivos usando o plugin jQuery FitVids. Você também pode desativar vídeos relacionados que aparecem no final do vídeo. ou até mesmo criar imagens de destaque a partir de miniaturas de vídeos do YouTube.
Esperamos que este artigo tenha ajudado você a adicionar botões de compartilhamento personalizados como sobreposição em vídeos do YouTube no WordPress. Informe-nos quais canais de mídia social você planeja adicionar aos seus vídeos, deixando um comentário abaixo.
Tracy
considerando que isso é seis anos depois, não estou realmente esperando uma resposta, mas, no último shortcode, você diz para colocar a URL do WordPress em vez do YouTube, mas você não diz qual é esse código ou onde colocá-lo. Você pode, por favor, ter em mente que iniciantes muito novos não vão simplesmente saber como fazer isso?
WPBeginner Support
Pedimos desculpas por qualquer confusão, faremos o possível para melhorar nossa redação no futuro para tornar isso mais claro.
Admin
Craig
“A maioria das formas exigiria que você colasse trechos de código HTML toda vez que adicionasse um vídeo”
Eu gostaria de aprender dessa forma... como é feito?
Obrigado
Martin Dekker
Estou procurando uma imagem estática diferente de um vídeo do YouTube que tenho em meu site. Aquela que o proprietário do vídeo tem eu não gosto e ouvi dizer que você pode escolher uma imagem da linha do tempo do vídeo para se tornar sua imagem estática quando o vídeo terminar. Como não é meu vídeo, preciso ser capaz de fazer isso no código iframe incorporado.
Isso é possível e, se for, você poderia me dar o código. Obrigado
Tizy
Olá,
este é um tutorial incrível. É possível mostrar o botão de compartilhamento no final do vídeo do YouTube e como? Agradeço desde já pela sua ajuda.
Equipe WPBeginner
Dave, atualizamos o artigo para incluir um método que compartilhará o link do seu post em vez do vídeo do YouTube. Siga as instruções na seção “Adicionando o Link do Post do WordPress no Overlay do Botão de Compartilhamento em Vídeos do YouTube”.
Dave
Eu ia voltar e editar meu comentário porque tive um momento “D’oh” e percebi que nunca ativei o plugin do site. Não consegui editar porque meu comentário precisava ser aprovado.
Quando o ativei, minhas opções de compartilhamento no Facebook e Twitter não sobrepunham o vídeo. Elas estavam abaixo do vídeo.
Não sei, talvez eu tenha feito algo errado no processo.
Eu gosto do seu site e continuarei voltando para mais ótimos artigos.
Jessie Delmo
como ajustar o enorme espaço na parte inferior após o vídeo?
Christenger
Esta é uma ótima solução, mas tenho um problema estranho. Alguns IDs funcionam, mas outros não.
Por exemplo, este ID funciona para mim [wpb-yt video=”7vJdBec_B6A”], mas este outro não [wpb-yt video=”CYveDEem5VA”]
Rednasil
Olá pessoal, obrigado pelo tutorial.. Consegui fazer isso funcionar rapidamente no meu site.
Mas estou usando o plugin de SEO de vídeo do Yoast, e notei que ele não está reconhecendo vídeos do YouTube incorporados com o shortcode.
Existe uma maneira de fazer isso acontecer? Talvez uma solução alternativa onde você não precise usar shortcodes??
WPBeginner Support
Não tentamos com o plugin Video SEO do Yoast. Veremos o que podemos fazer.
Admin
Rednasil
Obrigado, espero que vocês consigam encontrar uma solução para isso.
Mat
Olá a todos,
Como posso adicionar "Botões de Compartilhamento como Sobreposição em Vídeos do YouTube" com um embed do YouTube dentro do Revolution Slider?
Em quais arquivos php e css devo colar os códigos?
Agradeço muito a sua ajuda!!
Mat
Jay
Olá — realmente aprecio a postagem.
Estou tentando modificar o snippet do functions.php para que os botões de compartilhamento/tweet se refiram ao meu site em vez do site youtube.com. Infelizmente, estou tendo todo tipo de problemas. Você pode me ajudar ou me indicar alguém que possa ajudar?? Tenho mexido nisso por uma hora sem progresso.
Fico muito feliz que você tenha postado isso. É incrivelmente útil!!
WPBeginner Support
Jay, atualizamos a postagem e adicionamos um novo snippet que compartilha o link da postagem em vez do vídeo do YouTube. Esperamos que isso ajude.
Admin
Ike Brown
Por favor, quando clico no link, ele não funciona. os botões aparecem, mas quando você clica neles, nada acontece
Farhan Shah
É incrível e descritivo.
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
WPBeginner Support
Provavelmente você precisará ajustar o CSS. Não podemos ter certeza de que isso funcione com todos os temas, pois existem milhares de temas.
Admin
Martin
Já criei este plugin 27 vezes e ainda não funciona! Preciso muito dessa função, você poderia explicar isso novamente e passo a passo. Por favor, evite começar com "apenas faça.." porque sou um novato de verdade e quando sento aqui, não sei nada.. Já segui seu tutorial do functions.php e meu site travou completamente. Entendo que você oferece um ótimo suporte aqui, incrível! Polegar para cima!! Super!!! Mas por favor, entenda que é realmente frustrante criar e seguir os passos tantas vezes e sem resultado. Este plugin não aparece na minha instalação do wp de forma alguma.
Martin
“é só copiar no functions.php..” você sabe, onde no functions.php?? no topo onde começa com 1 ou na parte inferior onde há números 300 e assim por diante?? ou no meio em algum lugar? Obrigado <3
WPBeginner Support
na parte inferior do seu arquivo functions.php
Admin
WPBeginner Support
Martin, entendemos sua frustração. Você consegue instalar outros plugins no seu site?
Admin
Martin
Claro, sem problemas para instalar plugins. Eu também corrigi isso sozinho no final, mas o resultado foi mais ou menos, não ficou muito arrumado, para ser honesto. Então eu o deletei novamente. Eu estava procurando por outras soluções, mas elas não parecem existir, tudo está relacionado a “ganhar dinheiro” ou “bloquear conteúdo” .. por que alguém gostaria de uma página para bloqueá-la? Eu realmente preciso deste plugin e não tenho dinheiro para contratar pessoas. Por favor, me ofereça algum suporte por e-mail, você poderia me explicar como posso estilizar tudo para que fique melhor. Por favor, por favor, por favor! Eu realmente apreciaria isso. Obrigado <3
Patrycja
O mesmo aqui. Tentei adicioná-lo ao functions.php, depois com um plugin específico do site. Nada. Nada. E eu realmente gostaria que funcionasse. Funciona em todos os temas?
Pular
Código incrível que adaptei e implementei em uma página de teste, incluindo o Google+. Eu sei que o impulso não é CSS, mas só queria ressaltar que acho que opacidade 0 é uma péssima ideia, pois cada vez mais navegação é feita em telas sensíveis ao toque onde não há evento de hover e os botões nunca seriam vistos. Eu esqueceria os efeitos de opacidade completamente ou definiria uma opacidade inicial em 0,5 ou usaria media queries para direcionar diferentes dispositivos com configurações de opacidade individuais.
Jason Gooljar
Isso pode ser feito com o atributo IMG também?
Kannan M
Truque Incrível
Pam Simmons
Isso é muito útil. Parece que os botões de compartilhamento neste exemplo realmente compartilham o link do vídeo do YouTube, em vez da página que contém o vídeo incorporado, como as sobreposições de botões do UpWorthy fazem. Como alterar o código para obter o permalink da página em vez do link do YouTube?
Dave
I just wasted 30 minutes of my life. I did everything the tutorial said to do and it just showed a short code on my post. But even if it did work, according to the comment I am replying to, it would have driven traffic to youtube and not my site.
Madeline
Obrigado. Estou animado para experimentar isso e te contar os resultados.
Manish Misra
É muito bom e nos ajuda no meu trabalho....
Chris
Isso é bom. E quanto a usar um ID de playlist no shortcode?
A maioria das pessoas usa vídeos estáticos em posts, mas nas páginas iniciais usamos playlists.
Como este código poderia ser modificado para adicionar os botões de compartilhamento sobre os vídeos da playlist?
Ou seja, para funcionar com o plugin YouTube Channel Gallery.
Aliás – ABAIXO do código, seu texto diz isto: “O código a seguir cria um shortcode que adiciona automaticamente botões do Twitter e Facebook aos seus vídeos.”
Não deveria dizer “...código ANTERIOR…”?
WPBeginner Support
Chris, atualizamos o artigo, agora você pode usá-lo com playlists também.
Admin
Krish Murali Eswar
Bom. Geralmente sou avesso a mudar qualquer coisa no nível do código. Isso parece um candidato a plugin direto. Você tem certeza de que não há um plugin?
WPBeginner Support
Este código pode ser usado em um plugin específico do site.
Admin
Maio
Isso parece ótimo. Você poderia dar uma instrução passo a passo muito simples sobre como instalá-lo – talvez no YouTube?
Subbareddy
Isso é incrível
Steven
Ótimo artigo!
Como adiciono este shortcode agora ao editor de shortcode HTML que aparece na barra do tinymce?
Steve Wharton
Código muito legal. Ansioso para brincar com ele e adicioná-lo ao meu novo site. Obrigado!
Tom Horn
Existe alguma maneira de utilizar um plugin para adicionar este código para que não estraguemos tudo se não estivermos acostumados a trabalhar nos bastidores? Obrigado por isso, já vi coisas assim antes e realmente queria saber como fazer.
WPBeginner Support
Sim, você pode adicionar isso a um plugin específico do site.
Admin
Pam Blizzard
Obrigado por compartilhar isso, é uma solução elegante.
Você acha que também funcionaria para Playlists do YouTube, com a sintaxe “PLxxxetc”?
WPBeginner Support
Basicamente, você pode modificar o shortcode para gerar qualquer tipo de embed e, em seguida, usar CSS para posicionar os botões de compartilhamento nesse embed. Então, sim, deve funcionar.
Admin
Steven Jacobs
Haveria alguma maneira de fazer isso com players do SoundCloud também?
Ótimo artigo, aliás.
WPBeginner Support
Sim, deve funcionar com embeds do SoundCloud, mas você terá que adicioná-los no shortcode e, em seguida, usar CSS para o posicionamento correto.
Admin
Zimbrul
Isso é uma coisa muito legal de se fazer em seus vídeos do YouTube: botões de compartilhamento. Eu também gosto daqueles botões flutuantes em imagens adicionados pelo FooBox
Pam
Isso é incrível, obrigado!
Você acha que poderia ser ajustado para funcionar com playlists, assim como com vídeos individuais?