Voldemorth
Épsilon
No recomendado
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Este é um truque que eu estava guardando para um template WordPress em que estava trabalhando, mas como perdi a maioria dos arquivos em um acidente com um pendrive, decidi compartilhá-lo publicamente com o fórum.
O que vamos fazer é um par de botões para compartilhar nosso artigo no Twitter e no Facebook, com a particularidade de que eles aparecerão sobre um player do youtube quando o cursor passar sobre ele.
Esclareço que o que vou compartilhar é a lógica e um css; este último certamente vai variar de acordo com o tema que vocês usarem, mas arrumar isso é a parte fácil.
No arquivo functions.php (como sempre) vamos adicionar este código, que é o responsável por criar, por meio de um shortcode, o player e os botões. Vale esclarecer que este código será válido tanto para vídeos individuais quanto para playlists do youtube.
Como podem ver, o código está comentado e é totalmente compreensível; quanto ao css, aqui deixo um de exemplo, mas insisto que vocês o trabalhem de acordo com o seu tema.
Agora só resta usar o shortcode da seguinte forma:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Note que só será considerado 1 dos 2 parâmetros, ou seja, caso se coloque um id de um vídeo e uma lista, a lista terá preponderância e o vídeo não será exibido.
O que vamos fazer é um par de botões para compartilhar nosso artigo no Twitter e no Facebook, com a particularidade de que eles aparecerão sobre um player do youtube quando o cursor passar sobre ele.
Esclareço que o que vou compartilhar é a lógica e um css; este último certamente vai variar de acordo com o tema que vocês usarem, mas arrumar isso é a parte fácil.
No arquivo functions.php (como sempre) vamos adicionar este código, que é o responsável por criar, por meio de um shortcode, o player e os botões. Vale esclarecer que este código será válido tanto para vídeos individuais quanto para playlists do youtube.
Inserir CODE, HTML ou PHP:
function wpb_yt_buttons($atts) {
// Obtenemos dese el shorcode la id de la lista o el vídeo a publicar.
extract( shortcode_atts( array(
'video' => '',
'playlist' => '',
), $atts ) );
// Guardamos el link del post codificado en una variable
$permalink_encoded = urlencode(get_permalink());
// Comprobamos si se trata de una playlist
if (!$playlist == '' ) :
// Mostramos la playlist
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '?list=' . $playlist . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Agregamos el boton de Facebook
$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>';
// Agregamos el boton de Twitter
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url='. $permalink_encoded .'">Tweet</a></li></ul>';
// Cerramos el contenedor del video
$string .= '</div>';
// Si no es una playlist
else :
// Mostramos el video
$string .= '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Agregamos el boton de Facebook
$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>';
// Agregamos el boton de Twitter
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url='. $permalink_encoded .'">Tweet</a></li></ul>';
// Cerramos el contenedor del video
$string .= '</div>';
endif;
// Lo retornamos
return $string;
}
// Agregamos el shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');Como podem ver, o código está comentado e é totalmente compreensível; quanto ao css, aqui deixo um de exemplo, mas insisto que vocês o trabalhem de acordo com o seu tema.
Inserir CODE, HTML ou PHP:
#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;
}Agora só resta usar o shortcode da seguinte forma:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Note que só será considerado 1 dos 2 parâmetros, ou seja, caso se coloque um id de um vídeo e uma lista, a lista terá preponderância e o vídeo não será exibido.
