Como hacer un simple y elegante widget social para wordpress

Hace unos dias les mostraba como hacer una barra social con CSS3, pero un lector del blog me mando un mail preguntandome como hice ese widget social que tengo a la derecha. Donde ademas de los enlaces sociales tenemos el boton de "Me gusta" de facebook. Este post es para enseñarles como hacer eso.

Ya saben que mientras menos plugin usen mejor para su servidor (hosting) y mejor para sus visitas pues se carga mas rapido el blog.

El resultado final deberia verse asi:

Como hacer un simple y elegante widget social para wordpress

Paso 1- Buscar las imagenes, como siempre. Que sean chiquitas esta vez.

Paso 2- En un widget de texto pegar esto:

<div class="right like-box">
<p>
<strong>Te gusta<br/>
ParaisoLinux?</strong>
</p>
<iframe class="aligncenter" src="http://www.facebook.com/plugins/like.php?href=http://facebook.com/paraisolinux&amp;layout=box_count&amp;show_faces=true&amp;width=100px&amp;action=recommend&amp;font=lucida+grande&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:65px; margin: 4px auto 0 auto;" allowtransparency="true"></iframe>
</div>

<div class="left">
<center>
<p class="rss2"><a rel="nofollow" href="http://feeds.feedburner.com/paraisoLinux">Via RSS</a></p><br/>
<p class="delicious"><a rel="nofollow" href="http://del.icio.us/post?url=paraisolinux.com/">En Delicious</a></p><br/>
<p class="facebook"><a rel="nofollow" href="http://facebook.com/paraisolinux">En Facebook</a></p><br/>
<p class="twitter"><a rel="nofollow" href="http://twitter.com/sefsinalas">En Twitter</a></p><br/>
</center>
</div>
<div class="clear"></div>

Paso 3- En el archivo style.css de su theme pegar lo siguiente:

p.rss2 {
	line-height: 30px;
	background: url('images/trss.png') no-repeat 0px 7px;
	padding: 0 0 0 23px;
	float: left;
	color: #C16518;
	}

p.twitter {
	line-height: 30px;
	background: url('images/ttwitter.png') no-repeat 0px 7px;
	padding: 0 0 0 23px;
	float: left;
	color: #C16518;
	}

p.facebook {
	line-height: 30px;
	background: url('images/tfacebook.png') no-repeat 0px 7px;
	padding: 0 0 0 23px;
	float: left;
	color: #C16518;
	}

p.delicious {
	line-height: 30px;
	background: url('images/tdelicious.png') no-repeat 0px 7px;
	padding: 0 0 0 23px;
	float: left;
	color: #C16518;
	}
.left,.alignleft {float: left;}
.right,.alignright {float: right;}

.like-box{
background: #6D84B4;
border: 1px solid #FFFABB;
color: white !important;
padding: 6px;
text-align: center;
}

Otra vez es un codigo sencillo donde lo unico que tienen que revisar son las url de los servicios y las imagenes. Espero que les sirva

Info del articulo
Categoria: wordpress
Autor:
Comentarios
  • lf

    Muy buenas, estoy intentando utilizar este plugin y en firefox se ve perfecto, pero en ie al menos en la version 7 el formato se descuadra, deduzco que sera por el css, he intentando solucionarlo pero sinceramente eso de la progamación no es lo mio, alguien podria solucionarlo? o almenos indicar como hacerlo. gracias a todos.

    • http://blogjapon.com.ar perro

      Yo no uso ni usare IE asi que no podre ayudarte. Esperemos que alguien mas lo haga

  • http://deckerix.com deckerix

    “lf” pásanos el link con las pruebas que estás haciendo y te miro lo del explorer a ver porque puede ser

    PD: Como odio el explorer xD

    • http://blogjapon.com.ar perro

      Pero yo lo tengo en mi blog. Se te ve bien a vos el que yo tengo?