Hola pequeñuelos! Les cuento, implementé @anywhere acá y quería aprovechar para explicarles como hacerlo y para mostrarles como quedaba.
Es muy facil de hacer, yo aprendí gracias a este post pero como quería escribir algo un poco mas copado, y en español decidí mostarselos con mis propias imagenes y demás.
Para empezar, tienen que entrar aquí y registrar su aplicacion, los datos son simples, pero les voy a mostrar como me quedó a mí para que vean.
Una vez registrada su aplicación, van a copiar el siguiente codigo entre las etiquetas <header> y </header> en el header.php de su sitio.
<script src=”http://platform.twitter.com/anywhere.js?id=ACASUCODIGOAPI=1” type=”text/javascript”></script>
Ahora, para poder implementar la ‘tarjeta’ sobre el usuario, vamos a tener que agregar el siguiente codigo javascript. Para que vean como es esta tarjeta, o hovercard pasen el cursor por arriba de cualquier usuario -> @tato95
<script type=”text/javascript”>
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.hovercards();
};
</script>
Otra de las funciones que tenemos, es la de un botón que permite seguir cualquier usuario desde la misma pagina, vamos a conseguirlo agregando el siguiente codigo al header.php por debajo de el codigo de la tarjeta y el primero de @anywhere, pero no se olviden de agregar su usario donde dice claramente “TUUSUARIO“.
<script type=”text/javascript”>
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter(‘#follow-TUUSUARIO’).followButton(“TUUSUARIO”);
};
</script>
Pero, este boton no aparece solo, cada vez que quieran ponerlo van a tener que agregar el siguiente codigo:
<div id=”follow-USUARIODETWITTER”></div>
Quedaría algo como esto:
Y por ultimo tenemos una
copadisima caja de texto donde podremos twittear desde cualquier sitio en donde este se encuentre, para eso como en los otros casos agregaremos un codigo al
header.php
<script type=”text/javascript”>
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter(“#custom-tweetbox”).tweetBox({
label: “Live Tweet Box:”, <!–ese texto entre “” puede ser cambiado por lo que te guste–>
defaultContent: “ACA IRÍA EL TEXTO POR DEFECTO EN LA CAJA”,
height: 50,
width: 480,
});
};
</script>
Y para poder implementarlo tendremos que poner el siguiente codigo:
<div id=”custom-tweetbox”></div>
Quedaría algo como esto:
Espero les sirva, les guste y lo implementen, la verdad esta muy copado, mas que nada la primera funcion de las hovercards, el resto son un poco incomodas me parece. Pero como es facil implementarlo, puse todas las funciones por si alguna vez me toca usarlo. Saludos!
