23Sep 2010 7 Comments */?>

Como integrar Twitter @anywhere en 5 minutos

Categorías: Tutoriales - Tags:

Twitter anywhere es el nuevo framework de Twitter que tan solo con unas lineas de código javascript puede ser implementando en tu blog o web. A partir de ahora será más fácil todo, desde seguir a una persona (@chifliiiii) tan solo pasando el mouse por encima , activando los hovercards. O simplemente permitir que twiteen desde tu web.

1. El primer paso es registrar tu aplicación y obtener el API key

Para ello registramos una aplicación nueva en Twitter anywhere de la misma manera que se explico en mi post “Actualizar Twitter con PHP + OAuth”.
Una vez obtengamos el API Key pasamos al paso número 2.

2. Insertamos el siguiente código Javascript en la cabecera de nuestra web.

Como siempre insertar el siguiente código entre las etiquetas <head> y </head>

1
2
3
<head>
<script src="http://platform.twitter.com/anywhere.js?id=TuApiKey&v=1"></script>
</head>

A partir de ahora tan solo queda un paso.

3. Por último insertamos el código javascript en el footer de nuestra web

En el último paso es donde elegimos las opciones de @anywhere . Acá podremos decidir si mostrar las hovecards o no , o si queremos añadir una caja para twittear desde nuestra web.

Las opciones disponibles son:

  • Auto-linkification of Twitter usernames
  • Hovercards
  • Follow buttons
  • Tweet Box
  • User login & signup

Si queremos por ejemplo que se creen links automáticamente a nuestra cuenta Twitter tan solo poniendo @chifliiiii y además queremos que se active el hovercard , pero todo esto solo dentro de nuestro div con class=”post” ,debemos añadir el siguiente código:

1
2
3
4
5
6
7
8
<footer>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
	twitter(".post").hovercards();
	twitter(".post").linkifyUsers();
});
</script>
</footer>

Si en cambio queremos crear un botón para que nos sigan o Twitter Follow Button podemos hacerlo de la siguiente manera:

1
2
3
4
5
6
7
8
9
<span id="follow"></span>
</body>
<script type="text/javascript">
 
  twttr.anywhere(function (T) {
    T('#follow').followButton("chifliiiii");
  });
 
</script>


Y si lo que queremos es agregar un Tweet Box para que twiteen desde nuestra web agregamos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
 
    T("#tbox").tweetBox({
      height: 100,
      width: 400,
label:Twiteando desde http://masquewordpress.com
      defaultContent: "Como integrar @anywhere en mi web via @chifliiiii http://masquewordpress.com"
    });
 
  });
 
</script>

Y por último pero no menos importante para que los usuarios se conecten a twitter desde nuestra web, como añadir el twitter connect button:

1
2
3
4
5
6
<span id="login"></span>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#login").connectButton();
  });
</script>

Con esto tienen bastante información para jugar un buen rato 😀 . Igualmente pueden encontrar la documentación completa en Anywhere dev. Y si tienen dudas, déjenlas en los comentarios. Saludos!!!


Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus