Let's talk about Twitter

Recuerde que..

Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.

MUY BUENAS NOTICIAS... (nuestra experiencia con Twitter - 29/05/2010)

El equipo de Twitter, despues de meditar nuestros descargos remitidos durante casi 02 semanas, decidió levantar la suspensión de nuestra cuenta Twitter en Inglés que nos había impuesto, lo que habla muy bien de dicha red social, por cuanto, atendió nuestros argumentos, (el cual principalmente se centró en indicarles que nuestro proyecto trata de integrar a la comunidad GTUG mundial para formar una biblioteca de codigos, y que por tanto, resulta imprescindible tratar de comunicarnos con toda dicha comunidad, y por supuesto no somos spam..!); y bueno, Twitter trata de mantener un manejable rango de relación y control de los seguidores de su red que debemos destacar... y esto, unido a su pronunciamiento Twitter loves open source, (el cual compartimos en esta humilde comunidad), y el lanzamiento de @anywhere, y con el reconocimiento que Twitter es la principal red de microblogging vigente en el momento, pues en verdad nos alegra contar ahora con todas nuestras cuentas Twitter completamente operativas, en español, inglés y portugués... por lo que les detallamos a continuación nuestros tips respecto a nuestros avances al jugar con el API que Twitter nos proporciona...

REFERENCIA TECNICA (18/07/2010)

Como siempre, les indicamos las paginas oficiales de Twitter para que las revisemos continuamente y estemos atentos a los cambios y mejoras que nos brindan los servicios de esta red social (y que realmente nos conviene revisar para mantener al día y sin problemas nuestras aplicaciones).

Extras de Twitter, que nos proporciona diversos widgets y botones para emplear en nuestras paginas web, y en la que resaltamos el widget de perfil, que nos muestra en cualquier un listado de los tweets de la cuenta Twitter que indiquemos; pero debemos destacar que dependiendo de cada caso, bien podriamos utilizar los otros widgets tanto para nuestros sitios web como para Facebook, que Twitter nos proporciona... (solo basta ingresar los datos que nos indican y luego probar y observar el resultado, y al terminar y guardar el código, se nos proporciona el mismo para pegarlo en nuestros documentos HTML)

TWITTER ANYWHERE
IMPORTANTE: Twitter Anywhere dejo de funcionar desde el 01 de Marzo del 2013 !
Consulte este enlace: https://dev.twitter.com/blog/sunsetting-anywhere

A diferencias de los Extras, con Anywhere, Twitter busca que interactuemos directamente con nuestra cuenta Twitter en nuestras paginas web, sin ingresar directamente a Twitter, logrando así facilitar el uso de nuestras cuentas, incrementar el trafico de las mismas y su difusión.

Para ello, el APIde Twitter requiere como primer paso que registremos nuestra aplicación (debemos tener presente que si tenemos varias cuentas twitter siempre estemos conectados con la misma para que nuestros desarrollos se muestren agrupados, o que las asignemos a la cuenta Twitter de su respectiva aplicación, el caso es que para poder acceder a los datos de nuestra aplicación luego de creadas -especialmente a nuestro API Key, Consumer Key, Consumer Secret u otros datos que necesitemos-, basta con que ingresemos a la cuenta Twitter con la que accedimos al registrar nuestra aplicación e ingresar a nuestra cuenta de desarrollor utilizando la opción "Siqn", y luego ingresemos a los datos de nuestra aplicación usando la pestaña "Your Apps")

NOTA : Al registrar nuestra aplicación es importante que indiquemos en "Registered Callback URL" la dirección exacta de nuestra pagina web a partir de la cual se va a tener acceso a Anywhere, y asimismo, que indiquemos el "Default Acces Type" (read only o write & read, dependiendo si deseamos que solo se tenga acceso de lectura o se pueda escribir en la cuenta twitter que acceda a la aplicación... nosotros elegimos write&read)

Registrada nuestra aplicación, podemos utilizar en la pagina web que desarrollemos las diversas aplicaciones Anywhere que nos presenta la API, y entre las que destacamos las "Hovercards" (que a diferencia de las linkifyUsers, no solo nos direccionan a nuestras paginas Twitter, sino que nos permite mostrar el logo e información básica, y opción a seguirlas, y en un formato bastante apropiado, con solo pasar sobre el link el mouse), las "Twitter Box", que nos permiten escribir en el muro de la cuenta Twitter de nuestros usuarios, y "User login & SignUp", para controlar el acceso y salida de la cuenta Twitter de nuestro usuario.

Detallamos a continuación el codigo de nuestra aplicación Anywhere que hemos detallado en nuestra pagina "Ayudenos a difundir nuestra comunidad", la cual considera en forma conjunta la aplicación de las figuras de Anywhere que les hemos recomendado, y en la que debemos destacar los siguientes aspectos:

• Utilizamos Anywhere sobre una misma pagina HTML, por lo que las instrucciones de conexion las colocamos en el mismo documento (a diferencia de utilizar el HEAD recomendado en la documentación de Twitter Anywhere), lo que es muy util cuando consideremos el desarrollo de widgets, gadgets o paginas independientes que utilizen Anywhere.
• Utilizamos la conexion a la librería "jsapi" de Google para tener acceso al framework JQuery que ésta nos proporciona (necesario para hacer uso de los comandos JQuery que utilizamos)
• y bueno, se requiere tener conocimientos basicos de JavaScript y JQuery, por lo que aprovecho la oportunidad para indicarles la direccion de un tutorial javascript para consultas rapidas; y en lo que respecta a JQuery, les indico una pagina de introducción bastante util.

Detalle de nuestro codigo :

<!-- loading ID de Aplicacion Twitter -->
<script charset='utf-8' src='http://platform.twitter.com/anywhere.js? id=nQjC8OfVtcUWjVjKW1ATlw&v=1' type='text/javascript'></script>
<script type="text/javascript">
twttr.anywhere(function (T) {
//T("##main-content").linkifyUsers();
T("#main-content").hovercards();
})
</script>
<!-- Twitter Hovercards div -->
<div id="main-content">
..and now, with Twitter @Anywhere you can connect directly with us: @IGCodelab_en
<span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">(Put the mouse on the links)</span></span></div>
<!-- Twitter Anywhere -->
<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
<script type="text/javascript">
google.load("jquery", "1");
twttr.anywhere(function (T) {
var currentUser,
screenName,
profileImage,
profileImageTag;

T("#tbox").tweetBox({
height: 100,
width: 400,
label: 'Post on your Twitter Wall...',
defaultContent: "I like Integracion Google. Check out our fan page into http://tinyurl.com/35ac3on\nhelp us to disseminate our project..!"
});
T("#withus").tweetBox({
height: 100,
width: 400,
label: 'Tell us your thoughts ....',
defaultContent: "@IGCodelab_en ..."
});

function isConectado() {
$("#twitter-connect-placeholder").show();
$("#tbox").show();
$("#withus").show();
};
function noConectado() {
$("#twitter-connect-placeholder").hide();
$("#tbox").hide();
$("#withus").hide();
};
function myAvatar() {
document.getElementById('twitter-connect-placeholder').innerHTML="";
if (T.isConnected()) {
currentUser = T.currentUser;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "' style='cursor: hand; cursor: pointer; display: block; float: left; margin: 0px 10px 5px 0px; text-align: left;'/>";
$('#twitter-connect-placeholder').append('<p>' + profileImageTag + '<b>' + screenName + '</b> esta conectado..!</p>');
$("#twitter-connect-placeholder").append('<p><button id="signout" type="button">Sign out</button><p>');
$("#twitter-connect-placeholder").bind("click", function () {
twttr.anywhere.signOut();
});
};
};

if (T.isConnected()) {
myAvatar();
isConectado();
} else {
noConectado();
};

T("#connect").connectButton( {
authComplete: function(user) {
// alert("It's Connected");
myAvatar();
isConectado();
},
signOut: function() {
// alert("It's not Connected");
noConectado();
}
});
});
</script>
<span id="connect"></span>
<span id="twitter-connect-placeholder"></span>
<div id="tbox">
</div>
<div id="withus">
</div>


(Tenga cuidado con las instrucciones de inicio y fin de parrafo en html ( <p> y </p> ), pues el editor de Blogger usualmente corta la linea despues del primer <p> cuando editamos nuestras paginas, y eso debe corregirse antes de grabarlas, sino nuestras pruebas y desarrollos no funcionaran).

Con dicho código, y si accedemos a nuestra cuenta Twitter, se mostraría los Tweet Box en nuestra pagina como lo indicamos a continuación (si utiliza su propia pagina web, recuerde que debe ingresar el ID de su propia API KEY en el inicio del código):

Les indicamos asimismo, la pagina de la documentación general de la API (disponible en la pagina del desarrollador), en la cual, además de Twitter Anywhere, podremos revisar todas las opciones de desarrollo que nos presenta Twitter; así como la documentación de Twitter para Negocios, cuya lectura tambien nos debe interesar y debemos tener presente.

@Mlaynes

Hablemos sobre Twitter..