BOTONES DE REDES SOCIALES CON EFECTO DESLIZANTE

Pues como dice el título estoy intentando poner estos botones, siguiendo el tutorial de ésta web y sólo consigo que salga Face y Twitter.
Los demás no salen, además, no se deslizan, simplemente cambian de color.

Los códigos que he usado son los mismos que pone la web.
Lo que me extraña es que no lleve imágenes que haya que meter vía FTP.

Sin más, por favor, necesito ayuda para poder ponerlo en mi foro.

Muchas gracias.

Código PHP:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$(&#39;.botones-sociales .social').mouseenter(function(){
$(this).stop();
$(this).animate({width:&#39;160'}, 500, 'easeOutBounce',function(){});
});
$(&#39;.botones-sociales .social').mouseleave(function(){
$(this).stop();
$(this).animate({width:&#39;43'}, 500, 'easeOutBounce',function(){});
});
});
</script> 

Código PHP:
<style type="text/css">
.botones-sociales {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.izquierda {
left: 0;
}
.derecha{
right: 0;
}
.botones-sociales #twitter-btn .social,
.botones-sociales #facebook-btn .social,
.botones-sociales #google-btn .social,
.botones-sociales #rss-btn .social,
.botones-sociales #pinterest-btn .social,
.botones-sociales #youtube-btn .social {
background-color: #33353B;
background-image: url(http://3.bp.blogspot.com/-opXRPqX4Ia4/UfFh1sDxJ1I/AAAAAAAAOps/Kl_mb2q-AZM/s1600/mas-icons.png);
}
.izquierda #facebook-btn span {
background-position: right 10px;
}
.izquierda #twitter-btn span {
background-position: right -35px;
}
.izquierda #google-btn span {
background-position: right -127px;
}
.izquierda #rss-btn span {
background-position: right -80px;
}
.izquierda #pinterest-btn span {
background-position: 11px -177px;
}
.izquierda #youtube-btn span {
background-position: 11px -223px;
}
.derecha #facebook-btn span {
background-position: 12px 10px;
}
.derecha #twitter-btn span {
background-position: 11px -35px;
}
.derecha #google-btn span {
background-position: 10px -127px;
}
.derecha #rss-btn span {
background-position: 11px -80px;
}
.derecha #pinterest-btn span {
background-position: 11px -177px;
}
.derecha #youtube-btn span {
background-position: 11px -223px;
}
.botones-sociales #facebook-btn:hover .social {
background-color: #3B5998;
}
.botones-sociales #twitter-btn:hover .social {
background-color: #62BDB2;
}
.botones-sociales #google-btn:hover .social {
background-color: #DB4A39;
}
.botones-sociales #rss-btn:hover .social {
background-color: #FF8B0F;
}
.botones-sociales #pinterest-btn:hover .social {
background-color: #D43638;
}
.botones-sociales #youtube-btn:hover .social {
background-color: #C4302B;
}
.botones-sociales a:hover .texto{
display: block;
}
.izquierda .social {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;}

.izquierda .texto{
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.derecha .social {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;}

.derecha .texto {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.botones-sociales .texto{
color: #FFFFFF;
}
</style>

<div class='botones-sociales derecha hidden-phone hidden-tablet'>
<a class='itemsocial' href='url de facebook' id='facebook-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Facebook</span></span></a>
<a class='itemsocial' href='url de twitter'id='twitter-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Twitter</span></span></a>
<a class='itemsocial' href='url de google+' id='google-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Google</span></span></a>
<a class='itemsocial'href='url de pinterest 'id='pinterest-btn' target='_blank'><span class='social'>
<span class='texto'>Síguenos via Pinterest</span></span></a>
<a class='itemsocial' href='url de youtube' id='youtube-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via Youtube</span></span></a>
<a class='itemsocial' href='url del feed' id='rss-btn' target='_blank'><span class='social'><span class='texto'>Síguenos via RSS</span></span></a>
</div> 

Hola, tienes 2 versiones de jQuery cargadas y de diferente versión, quizás por eso tienes el error. No es difícil integrar este tipo efectos a una página en general, voy a revisar el código y pues si tengo algo te respondo.

Yo vi unos botones de redes sociales similar a éste pero más bonito, y no tenía acceso al código así que me quedé con las ganas de tenerlo pero ni modo xD, personalmente prefiero que los botones de redes sociales vayan en el header, en la parte superior del foro de forma estática, ya que verlos en todo el foro a un lado apartado hace que pareciera una publicidad molestosa jaja pero bueno gustos son gustos.

Si tengo algo te aviso, saludos y gracias por compartir esta pequeña muestra, estoy seguro que muchos también querrán implementarlo a sus foros...

Última modificación: 20 Feb, 2014, 11:43 am por Jean Pierre.

Listo, ya encontré el error, es una vergüenza realmente que el código que está en aquel blog esté mal escrito con errores de sintaxis y razón por la cual no les funciona a muchos.

Voy a postearlo como tutorial mejor para que no solo tú sino muchos de los compañeros de esta comunidad puedan aplicarlo a sus foros ya que me pareció bastante interesante, además que... el código lo he visto en otros blogs.

Aún así, personalmente yo prefiero los botones de redes sociales en el header bien posicionados, pero en vista de que a muchos les gusta este estilo pues haré el tutorial para que lo integren en sus foros, espera pacientemente el tema.

Saludos...

Cojonudo Jean Pierre, muchas gracias!