Integra @AnyWhere en tu Web o Blog Hovercards, conexión con Twitter, botones de seguimiento, TweetBox...
Dentro de las novedades que se esperaba que Twitter desvelara durante el Chirp (la conferencia oficial de desarrolladores de la API de Twitter), destacaba, junto a la difusión del modelo de negocio, la puesta en marcha de @Anywhere, la plataforma para integrar Twitter en cualquier web o blog.
Para integrar @Anywhere:
1.- Por supuesto, debes de tener una cuenta de Twitter.
2.- Ingresa al nuevo sitio para desarrolladores, Twitter Developers y loguéate con tu cuenta de Twitter.
3.- Crea una nueva aplicación y rellena los datos del formulario:
* Ten en cuenta que no puedes utilizar el término "Twitter" ni para el nombre de tu aplicación ni para el de tu organización.
** En "Application Website" y en "Callback URL" ponemos la dirección de nuestro sitio web.
Se nos proporcionará entonces una APIKey que sólo será valida al utilizarla desde nuestro sitio web.
Las posibilidades de integración que posee @AnyWhere son muchas; En TodoTwitter las siguientes:
Hovercards: (visibles al pasar con el ratón sobre cualquier username de Twitter)
TweetBox: (al final del post, tras los agregadores sociales)
Connect wiht Twitter:
Cerrar sesión:
El listado completo de lo que puedes integrar con @AnyWhere lo tienes en este enlace donde además te proporcionan los códigos necesarios.
A la hora de integrar los códigos en tu sitio debes de tener en cuenta varias cosas:
La llamada a la API debes de hacerla con tu APIKey, para que funcione en tu sitio, y tienes que colocarla preferiblemente entre <head> y </head>
A continuación, puedes poner cualquiera de los códigos que se ofrecen para integrar @AnyWhere con el sitio. Si quieres mostrar varias cosas, como es nuestro caso, deberás "unir todos los script bajo una misma llamada", quedando el código de la siguiente manera:
Es preferible colocar el código completo junto a la llamada a la API al principio del html, entre <head> y </head>, tal y como señalan en Twitter Developers, sin embargo, los usuarios de Blogspot como yo ya conocemos cómo se las gasta Blogger con la incompatibilidad de scripts, y he detectado que a colocarlo en la cabecera del blog éste no se ve desde Explorer (lo tengo actualizado, sip) y no llega a cargar del todo.
La solución ha sido llevármelo al final del código y colocarlo antes de </html>, con esto, tardan más en aparecer las hovercards y el botón de conexión, pero el blog carga correctamente también en el Explorer.
A partir de ese momento, cuando alguien presione sobre el botón para twittear o se conecte a Twitter desde tu sitio aparecerá la siguiente pantalla para realizar la conexión mediante Twitter Oauth:
... y podrá interactuar con Twitter desde tu sitio web ;)
Nota.- Muchas gracias a @JMChia por la cooperación y su paciencia echándome una mano. Si quieres puedes ver la traducción que ha hecho de @anywhere en su blog: Guía Anywhere de Twitter en español
Enlaces: Twitter Developers
Para integrar @Anywhere:
1.- Por supuesto, debes de tener una cuenta de Twitter.
2.- Ingresa al nuevo sitio para desarrolladores, Twitter Developers y loguéate con tu cuenta de Twitter.
3.- Crea una nueva aplicación y rellena los datos del formulario:
* Ten en cuenta que no puedes utilizar el término "Twitter" ni para el nombre de tu aplicación ni para el de tu organización.
** En "Application Website" y en "Callback URL" ponemos la dirección de nuestro sitio web.
Se nos proporcionará entonces una APIKey que sólo será valida al utilizarla desde nuestro sitio web.
Las posibilidades de integración que posee @AnyWhere son muchas; En TodoTwitter las siguientes:
Hovercards: (visibles al pasar con el ratón sobre cualquier username de Twitter)
TweetBox: (al final del post, tras los agregadores sociales)
Connect wiht Twitter:
Cerrar sesión:
El listado completo de lo que puedes integrar con @AnyWhere lo tienes en este enlace donde además te proporcionan los códigos necesarios.
A la hora de integrar los códigos en tu sitio debes de tener en cuenta varias cosas:
La llamada a la API debes de hacerla con tu APIKey, para que funcione en tu sitio, y tienes que colocarla preferiblemente entre <head> y </head>
<head>En Blogger tendrás que utilizar una herramienta como esta para preparar la URL.
...
<script src='http://platform.twitter.com/anywhere.js?id=TU_APIKEY&v=1'></script>
....
</head>
A continuación, puedes poner cualquiera de los códigos que se ofrecen para integrar @AnyWhere con el sitio. Si quieres mostrar varias cosas, como es nuestro caso, deberás "unir todos los script bajo una misma llamada", quedando el código de la siguiente manera:
<script type='text/javascript'>
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
// Botón de conexión
twitter("#twitter-connect-placeholder").connectButton({ size: "medium" });
// TweetBox.
twttr.anywhere("1", function (twitter) {
// Appends a TweetBox to the specified element.
// The TweetBox will be rendered with the following
// default options:
// - Rendered with a counter
// - Dimensions: width: 65px, height: 515px
// - Labeled with "What's happening?"
twitter("#placeholder").tweetBox({
counter: true,
height: 100,
width: 400,
label: "CABECERA TWEETBOX
defaultContent: "<CONTENIDO DEL TWEETBOX>",
onTweet: function (tweet, renderedTweet) {
tweet // the tweet text
renderedTweet // the tweet rendered in HTML
}
});
});
// Hovercards.
twttr.anywhere(function(twitter) {
// this is the callback function you specified in your initializer
twitter.hovercards();
});
};
</script>
Es preferible colocar el código completo junto a la llamada a la API al principio del html, entre <head> y </head>, tal y como señalan en Twitter Developers, sin embargo, los usuarios de Blogspot como yo ya conocemos cómo se las gasta Blogger con la incompatibilidad de scripts, y he detectado que a colocarlo en la cabecera del blog éste no se ve desde Explorer (lo tengo actualizado, sip) y no llega a cargar del todo.
La solución ha sido llevármelo al final del código y colocarlo antes de </html>, con esto, tardan más en aparecer las hovercards y el botón de conexión, pero el blog carga correctamente también en el Explorer.
Donde quieras que aparezca cada uno de los elementos, deberás poner:
<span id='placeholder'></span> (para el TweetBox
<div id="twitter-connect-placeholder"></div> (para el botón de connected with Twitter)
Las Hovercards saldrán de manera automática en cualquier en cualquier nombre que incluya una @ antes , por ejemplo: @TwittBoy
Para el resto de botones sólo has de añadir los códigos correspondientes en el script tal como indican en este enlace
A partir de ese momento, cuando alguien presione sobre el botón para twittear o se conecte a Twitter desde tu sitio aparecerá la siguiente pantalla para realizar la conexión mediante Twitter Oauth:
... y podrá interactuar con Twitter desde tu sitio web ;)
Nota.- Muchas gracias a @JMChia por la cooperación y su paciencia echándome una mano. Si quieres puedes ver la traducción que ha hecho de @anywhere en su blog: Guía Anywhere de Twitter en español
