caja-compartir-flotante

Caja de compartir flotante en WordPress

Como ya sabrás, existen varios plugins, dentro del repositorio de WordPress, para compartir las entradas de tu blog.

En un post anterior vimos cómo podías compartir tus entradas en las redes sociales. Mediante CSS Sprites.

En el post de hoy veremos cómo crear una caja de compartir flotante para tus post.


Concretamente haremos:

  • Una caja de compartir con las tres redes sociales más importantes (Facebook, Twitter, Google +1).
  • Ver cómo asegurarse de que comparten la URL correcta.
  • Alinear la caja de compartir en la parte inferior izquierda del navegador del usuario.
  • Ocultar la caja si el navegador del usuario es demasiado pequeño (por lo que nunca se superpone nuestro contenido).

Como en la canción de Paul Oakenfold, Ready, Steady, Go.

La dirección URL y eltexto para compartir

×Nota Para ilustrar este tutorial estamos haciendo uso del tema Twenty Twelve, que tanto nos gusta.

El primer paso es añadir un poco de código WordPress. Edita el archivo footer.php de tu tema, desplázate hacia abajo, y justo antes de <?php wp_footer(); ?> añade el siguiente código:

<?php
// URL para compartir
if( is_singular() ) {
 $url = get_permalink();
 $text = the_title('', '', false);
} else if ( is_category() || is_tag() ) {
 if(is_category() ) {
 $cat = get_query_var('cat');
 $url = get_category_link($cat);
 } else {
 $tag = get_query_var('tag_id');
 $url = get_tag_link($tag);
 }
 $text = single_cat_title('', false) . ' on ' . get_bloginfo('name');
} else {
 $url = get_bloginfo('url');
 $text = get_bloginfo('name') . ' - ' . get_bloginfo('description');
}
?>

Este código trabaja en la dirección URL y el título de texto a compartir, y los guarda en dos variables de PHP ($url y $text).

La forma en que funciona es a través de un “¿en qué clase de página estamos?” Comprobando:

  • Si es una entrada/página – Entonces, usa la URL y el título de la entrada o página.
  • Categoría / Etiqueta – Entonces, usa la URL de etiqueta/ categoría, y “Categoría ” como el texto.
  • Defecto – Comparte la página URL, título del sitio y la descripción de cualquier otra página.

Obtener los códigos de Compartir

El siguiente paso es obtener el código de compartir para cada botón, y pasarlo a HTML, al que podemos poner estilo.

Nuestra estructura HTML para la caja sería algo así:

<div id="social-float">
 <div class="sf-twitter">
 <!-- Él código de Twitter aquí -->
 </div>
<div class="sf-facebook">
 <!-- Él código de Facebook aquí -->
 </div>
<div class="sf-plusone">
 <!-- Él código de Google +1 aquí -->
 </div>
</div><!-- /social-float -->

Ahora, vamos a obtener esos códigos (y ajustar según sea necesario). Paso a paso.

Twitter

Accede al panel de desarrollo de Twitter. Nos centraremos en el botón de conteo vertical.

Aproximadamente algo así pero con tus datos, claro:

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="feevolution">Tweet</a>

Después de data-count y data-via deja un espacio y añade:

data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>"

Facebook

Accede al panel de desarrollo de Faccebook.

Introduce http://google.com en “Dirección para compartir”. Luego lo cambiamos.

Selecciona “box_count” para el diseño.

Haz clic en “Obtener código” copia y pégalo .

Cambia la dirección de Google que pusiste antes por: data-href=”<?php echo urlencode($url); ?>

Google +1

Accede al panel de desarrollo del botón +1.

Copia el script del botón simple.

Reemplaza <g:plusone></g:plusone> por <g:plusone size=”tall” href=”<?php echo $url; ?>”></g:plusone>

Eso es todo. Tu código debería ser parecido al código de abajo, con tus datos, claro está.

El código entero

<div id="social-float">
 <div class="sf-twitter">
 <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="feevolution" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </div>
 <div class="sf-facebook">
 <div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.4";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="<?php echo urlencode($url); ?>" data-layout="box_count"></div>
 </div>
 <div class="sf-plusone">
 <!-- Place this tag in your head or just before your close body tag -->
 <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 <!-- Place this tag where you want the +1 button to render -->
 <g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
 </div>
</div><!-- /social-float -->

Añadiendo el CSS

Ahora vamos a darle estilo a nuestra caja. Mediante el uso de posicionamiento fijo, podemos anclar nuestra caja de compartir en un rincón de la pantalla.

El siguiente código situará la caja a 10px del borde izquierdo y del fondo de tu navegador.

#social-float {
 position: fixed;
 left: 10px;
 bottom: 10px;
}

Así ya funcionaría pero vamos a seguir dando estilo para mejorar el aspecto de nuestra caja de compartir. Añade el resto del código a tu archivo style.css.

#social-float {
 position: fixed;
 left: 10px;
 bottom: 10px;
 width: 80px;
 padding: 10px 5px;
 text-align: center;
 background-color: #fff;
 border: 5px solid rgba(180, 180, 180, .7);
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 display: none;
}
.sf-twitter {
 height: 62px;
 margin-bottom: 10px;
}
.sf-facebook {
 height: 60px;
 margin-bottom: 10px;
}
.sf-plusone {
 height: 60px;
}

Estiliza la caja según tus necesidades.

Y ya está, ya tienes una caja de compartir flotante.

caja-compartir-flotante

Ocultar la caja de compartir en navegadores con resolución pequeña

Vamos a ir un poco más allá y haremos que esta caja no se muestre en navegadores con resoluciones de pantalla pequeñas, para que nuestra caja no solape el contenido.

Para solucionar esto, vamos a usar jQuery para comprobar el tamaño del navegador, y mostrar la caja sólo si es lo suficientemente amplio.

En primer lugar, hay que cargar jQuery añadiendo lo siguiente a tu archivo functions.php.

<?php wp_enqueue_script('jquery'); ?>

Regresemos al footer.php y después de la etiqueta div de cierre </div><!– /social-float –> añade:

<script type="text/javascript">
 jQuery(document).ready(function($) {
 // Mostrar sólo si el navegador es lo suficientemente amplio.
 if( $(window).width() >= 1030 )
 $('#social-float').show();
 // Actualizar cuando el usuario cambia el tamaño del navegador.
 $(window).resize(function() {
 if( $(window).width() < 1030 ) {
 $('#social-float').hide();
 } else {
 $('#social-float').show();
 }
 });
 });
</script>

La sentencia if comprueba el ancho, y muestra la caja si es lo suficientemente amplio.

Hay una función controladora de eventos que se ejecuta cuando el usuario cambia el tamaño de su navegador.

Cuando lo hacen, hacemos la misma comprobación anterior, y, ocultamos / mostramos la caja según proceda.
Hemos establecido el ancho de 1030px, que son 980px (Un ancho de página común), más 150px (El ancho de nuestra caja) por 2 (La página se centra, por lo que hay 150px a cada lado). Cambia los valores a tu gusto, pero recuerda actualizarlos en ambos lugares.

Y lo tienes. Ahora puedes personalizar esa caja añadiendo las redes sociales que quieras y retocando el código CSS para adecuarlo a tus necesidades.

Fuente: Problogdesign

Dado que este post ha sido inspirado en esta web, puedes ver también una demo de la caja flotante en esta dirección.

Como verás, si tratas de cambiar el tamaño de tu navegador, a un tamaño menor,  la caja desaparece.

Espero que este post te haya resultado útil.

Y tú. ¿Qué método usas para compartir tus post?.

Comenta, comparte, difunde. Gracias.

Carlos A para FreelanceEvolution®

 

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *