@AnyWhere es el no tan nuevo servicio de Twitter, el objetivo con esto es brindar a todos los usuarios una manera más fácil y dinámica de interactuar con Twitter desde cualquier página Web.
Los elementos que conforman @AnyWhere son embeds y botones y Tooltips que tienen una gran funcionalidad como de tweetear automáticamente, loguearte con Twitter OAuth, y seguir a otros usuarios sin tener que salir de tu Web.
Para poder utilizar @AnyWhere tenemos que registrar previamente una aplicación, luego podremos trabajar directamente en nuestra Web.
Registrar una aplicación en Twitter:
Para crear una aplicación en Twitter deberán loguearse e ingresar al siguiente enlace:
Luego del registro exitoso, nos mostraran la configuración que luego necesitaremos para integrar la aplicación con nuestro sitio Web.
Incluir Librería @AnyWhere
En nuestro .html debemos de llamar a un script alojado en el servidor de Twitter, este nos permitirá dar la funcionalidad a base de JavaScripts en nuestra Web.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Anywhere Sample</title>
<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>
</head>
<body>
...
</body>
</html>
HoverCards
Los HoverdCards son una funcionalidad que podemos ver en la página de Twitter.com, donde al hacer hover a cualquier usuario nos lanza un Tooltip con información precisa sobre el mismo como numero de followers, following, dando la facilidad para poder hacer Follow o Unfollow dependiendo.
Para implementarlo solo tenemos que incluir este script dentro de nuestro html justo antes de cerrar el .
<div id="main-content"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#main-content").hovercards({ linkify: false });
});
</script>
Esto realizara un proceso de convertir en HoverCards a todas las palabras que contengan un @usuario dentro del contenedor #main-content, el parametro linkify: false inhabilitara al hacer click el enlace a su cuenta en Twitter.
Tweet Box
El Tweet Box es un Formulario para tweetear automáticamente desde tu Web, incluyendo el contador de caracteres y un botón para loguearse a Twitter.
<div id="tbox"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tbox").tweetBox({
height: 100,
width: 400,
defaultContent: "Titulo post"
});
});
</script>
Podemos personalizarlo con ciertos parámetros por JavaScript, defaultContent servirá para incluir un texto por defecto en el Tweet Box.
Follow Buttons
Los Follow Buttons servirán para que los usuarios que visitan nuestra Web puedan seguirnos con un simple click y sin tener que ir a Twitter. El botón con funcionalidad de detectar si ya los usuarios ya te siguen mostrara un mensaje haciendo saber que ya son followers.
<span id="follow-twitterapi"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
T('#follow-twitterapi').followButton("craftyman");
});
</script>
Le pasamos como parametro el id del contenedor del botón, en el método followButton tendremos que pasar como parametro el usuario al que se deberá seguir.
Connect Button
Este botón permite autorizar a tu Sitio Web para poder acceder mediante Twitter OAuth, luego de esto podrás realizar las diversas funcionalidades que brinda @AnyWhere sin tener que autorizar accesos nuevamente.
<span id="login"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#login").connectButton({ size: "large" });
});
</script>
El botón aparecerá mediante este script, pasamos como parametro el id del contenedor del botón, luego en el método connectButton podemos personalizar ciertas características como el tamaño, que pueden ser: small, médium, large, xlarge.
Login Button personalizado
Otra opción si deseamos personalizar mejor el botón es, dándole la funcionalidad a un enlace cualquiera mediante este script:
<button type="button" id="signin-btn">Conectar con Twitter</button>
<script type="text/javascript">
twttr.anywhere(function (T) {??
document.getElementById("signin-btn").onclick = function () {
T.signIn();
};
});
</script">
Esto hará que el botón de id=signin-btn sea el responsable de loguear a los usuarios con tu sitio web por medio de Twitter OAuth.
Usuarios conectados
Cuando un usuario ya se autorizo a nuestra Web para que podamos interactuar con Twitter mediante ella es ilógico que siga saliendo el botón de “Conectar con Twitter”, así que con este script podemos trabajar con los datos del usuario logueado.
<span id="twitter-connect-placeholder"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
var currentUser,
screenName,
profileImage,
profileImageTag;
if (T.isConnected()) {
currentUser = T.currentUser;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "'/>";
$('#twitter-connect-placeholder').append("Logged in as " + profileImageTag + " " + screenName);
} else {
T("#twitter-connect-placeholder").connectButton();
};
});
</script>
Esto hará que una vez logueados con Twitter muestren algunos datos del usuario para informarle que están conectados con la Web mediante Twitter.
Más info:
Tags:
Soy
Comentarios