¿Cómo alinear botones de compartir en bitácoras, Twitter y Facebook?

  • Autor Autor Krauzer
  • Fecha de inicio Fecha de inicio
Krauzer

Krauzer

Lambda
SEO
Simplemente esa es mi duda, como puedo alinear los botones de bitacoras, twitter y facebook, por ejemplo como la tiene el sitio Enlace eliminado

Se que es haciendo una clase en css pero no me ha dado resultados.

Me podrían dar una mano?

Desde ya gracias 😀
 
Pues creo que el de twitter y bitacoras se alinean solos, el de facebook es que tiene una parte en el codigo que dice [width="450"] ese "450" es en referencia al espacio que habrá en blanco después del botón, creo que lleva como un 100 o 110 o algo por ahi para que se pueda poner otro botón al lado (Sino, pones el número con el que te sientas conforme)
 
Última edición:
Puedes usar este codigo que es el que yo uso:

CSS:

Insertar CODE, HTML o PHP:
.share-entry {	margin: 0 0 0 0;overflow: hidden;padding: 10px 0px 0px 0px;}

.share-entry ul {float: left;}

.share-entry ul, .share-entry li {display: inline;list-style-type: none;}

.share-entry a,.share-entry iframe {border: none;display: block;float: left;overflow: hidden;width: 105px;height: 21px;}

En el single.php:

PHP:
<div class="share-entry">
 <ul>
  <li><iframe src="http://www.facebook.com/plugins/like.php?href=<?php urlencode(the_permalink()); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:110px; height:px"></iframe></li>

  <li><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="<?php urlencode(the_permalink()); ?>" data-lang="es" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>

 </ul>
</div>

El resultado es algo como esto:

2r2c9le.png

Si quieres agregar el de Bitacoras después del botón de Twitter solo tendrías que colocar:

<li>código Bitacoras</li>

Debajo del <li>Código Twitter</li>
 
Atrás
Arriba