- Desde
- 10 Ene 2012
- Mensajes
- 927
Este es un truco que me lo estaba guardando para una platilla Wordpress en la que estaba trabajando, pero como perdi la mayoría de los archivos en un accidente con un pendrive he decidido compartirlo de forma publica con el foro.
Lo que haremos es un par de botones para compartir en Twitter y Facebook nuestro articulo, con la particularidad que estos se mostraran sobre un reproductor de youtube cuando el cursor pase sobre el mismo.
Aclaro que lo que compartiré es la lógica y un css, este ultimo seguramente varié de acuerdo a el theme que usen pero arreglar eso es la parte fácil.
En su archivo functions.php (cuando no) agregaremos este código que es el responsable de crear por medio de un shortcode el reproductor y los botones. Cave aclarar que este código sera valido para vídeos individuales como playlist de youtube.
Como pueden ver el código esta comentado y es totalmente entendible, respecto al css aquí dejo uno de ejemplo pero insisto en que lo trabajen acorde a su theme.
Ahora solo queda usar el shortcode de la siguiente forma:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Notar que solo se tomara 1 de los 2 parámetros, es decir en caso de colocar un id de un vídeo y una lista tendrá preponderancia la lista y el vídeo no se mostrara.
Lo que haremos es un par de botones para compartir en Twitter y Facebook nuestro articulo, con la particularidad que estos se mostraran sobre un reproductor de youtube cuando el cursor pase sobre el mismo.
Aclaro que lo que compartiré es la lógica y un css, este ultimo seguramente varié de acuerdo a el theme que usen pero arreglar eso es la parte fácil.
En su archivo functions.php (cuando no) agregaremos este código que es el responsable de crear por medio de un shortcode el reproductor y los botones. Cave aclarar que este código sera valido para vídeos individuales como playlist de youtube.
Insertar CODE, HTML o 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 pueden ver el código esta comentado y es totalmente entendible, respecto al css aquí dejo uno de ejemplo pero insisto en que lo trabajen acorde a su theme.
Insertar CODE, HTML o 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;
}Ahora solo queda usar el shortcode de la siguiente forma:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Notar que solo se tomara 1 de los 2 parámetros, es decir en caso de colocar un id de un vídeo y una lista tendrá preponderancia la lista y el vídeo no se mostrara.
