Estilizar boton compartir y otros en Facebook

En las paginas facebook, a través de la aplicación FBML, podemos colocar botones de facebook, ej: botón compartir, que ya tiene un estilo previo, y en principio no es modificable.

Pero podemos darle un nuevo estilo a estos botones, con solo agregar style.

(esto funciona con cualquier tipo de boton, solo asegurate de colocar el mismo id en el div y el style)

Este es el código que le dará el estilo al botón, debes colocarlo al principio.

<style >
#share a {
text-indent:-999px;
border:0;
width: 122px; height: 49px;
display: block;
background:url('http://img53.xooimage.com/files/2/b/4/btn_21-23f731b.png') top left no-repeat;
overflow: hidden;
text-decoration:none !important;
}
</style>

Debajo pega el código del botón correspondiente, en este caso botón compartir:

<div id="share">

<fb:share-button class="meta" type="icon_link"> <meta name="medium" content="blog"/> <meta name="title" content="Acabo de instalar los emoticones en el chat !! :)"/> <meta name="description" content="Pude instalar los emoticones en el chat de facebook ...

entra e instala tu también la ultima versión de los emoticones de Facebook ,es muy facil ! :D "/> <link rel="image_src" href="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs236.ash2/50513_136811729710887_6393392_n.jpg"/> <link rel="video_src" href="#"/> <link rel="target_url" href="http://www.facebook.com/instalaremoticones"/> </fb:share-button></div>

(en este boton esta modificado lo que se compartira, title - description - imagen_src - target_url )

De esto:



Pasara a esto:

La imagen, publicar, corresponderá a "background:url('http://img53.xooimage.com/files/2/b/4/btn_21-23f731b.png')", modifica lo que esta dentro de los paréntesis por tu imagen.


Cambiar de imagen al pasar el mouse: 

para esto solo debemos agregarle una porción mas de código al style.

#share a:hover {

background: url('http://img51.xooimage.com/files/6/0/c/btn_2111-23f7b98.png') top left no-repeat;

}

Lo que esta entre paréntesis corresponde a la imagen que aparecerá al pasar el mouse.

Todo el codigo style completo quedara asi:

<style >
#share a {
text-indent:-999px;
border:0;
width: 122px; height: 49px;
display: block;
background:url('http://img53.xooimage.com/files/2/b/4/btn_21-23f731b.png') top left no-repeat;
overflow: hidden;
text-decoration:none !important;
}
#share a:hover {
background: url('http://img51.xooimage.com/files/6/0/c/btn_2111-23f7b98.png') top left no-repeat;
}
</style >

Y el resultado sera este:

Los ejemplos son de Emoticones Chat Fcaebook