SummArg | Cursos y recursos para webmasters

17/07/2011

Barra flotante con botones sociales para WordPress

En muchos blogs ya se puede observar un cuadro flotante que contiene los links para compartir en Google+, Facebook, Twitter, etc. En esta oportunidad veremos como implementarlo en WordPress, pudiendo compartir un post individual o la url del inicio del home en un div flotante que queda siempre visible.

Primer paso: Footer.php

Abrimos la plantilla en cuestión e insertamos el siguiente código:

<?php
// URL a 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');
}
?>

Lo que hace este snippet es almacenar en las variables $url y $text un link y texto determinados si nos encontramos en una página de un post o página. Si, en cambio, detecta que está en una categoría, busca el nombre de la categoría y su URL; si es un listado por etiqueta, busca el nombre y link de la misma. En el caso de no ser ninguna de las mencionadas, mostrará la URL y descripción del blog.

Seguido del código PHP ahora insertamos el HTML

<div id="social-float">
<div class="sf-twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="userdetwitter" 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">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>
</div>
<div class="sf-plusone">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
</div>
</div><

El código de arriba debe adaptarse para que funcione con los datos de la cuenta correspondiente. El primer link debe contener el nombre de cuenta de Twitter.
El segundo código, el de Facebook, debe obtenerse de la siguiente manera:

  • Primero vamos a la página para generar el código (click aquí).
  • Ingresamos http://google.com en el campo “Address to Share”.
  • Deseleccionamos el campo “Send Button”, elegimos el layout “box_count” y colocamos 50 para width (ancho).
  • Clickeamos en el botón “Get Code”, copiamos y pegamos el código.
  • En el código iframe, buscamos http%3A%2F%2Fgoogle.com, y lo reemplazamos por <?php echo urlencode($url); ?>
  • Buscamos el valor “80” y lo reemplazamos por “62” (aparece dos veces).

 

Segundo paso: El CSS

El código CSS a utilizar es el siguiente:

#social-float {
position: fixed;
left: 10px;
bottom: 10px;
width: 55px;
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;
}

Con esto ya tenemos nuestros botones funcionando. El único problema restante es que el contenido será tapado por nuestros botones cuando la ventana del navegador sea muy angosta, para solucionarlo los autores del tutorial utilizan jQuery y lo explican al final de su artículo.

Ver código completo en problogdesign | Demo

Dejar un comentario

  1. Disculpa la molestia lo puedes explicar con un poco mas de detalles! Ah y Facebook no me deja crear el boton! Gracias de antemano!

  2. Fijate que ala hora de ejecutar los botones no me funcionan, nose si hay que agregarle mas al codigo o que. Nesecito tu ayuda! Gracias :)

  3. Nekko

    Hola Alex! Si ese código no está funcionando en tu blog, podés probar instalando el plugin que mencionamos en esta nota: http://www.summarg.com/2011/anadir-una-barra-flotante-con-botones-sociales-mediante-un-plugin-wordpress/

    Contame que tal te fue!

  4. Pues ya lo probe y no esta nada mal! Pero no trabaja como yo quisiera. Me hubiera gustado usar el otro, pero bueno no se pudo!

Dejar un comentario