jQuery ProQuo:UTILISIMO plugin Twitter

jQuery ProQuo es un plugin que permite convertir cualquier parte de una página web en un contenido "compartible" en Twitter.

Obviamente, requiere el uso de la librería jQuery y el script es bastante pequeño. Para usarlo, basta agregarlo antes de </head> y luego, definir la etiqueta y/o clase a la que se aplicará; por ejemplo, si quiisera que el contenido que de una etiqueta cuya clase es compartir fuera "tweeteable", debería llamar a la función de este modo:

<script>
$(document).ready(function(){
  $('.compartir').proQuo();
 });
</script>

Y luego, la podría usar en cualquier etiqueta y se agregaría un enlace con el texto Tweet this al final de ella:

<p class="compartir"> ....... cualquier cosa ....... </p>

Algunas opciones extras nos permiten usar el botón clásico de Twitter en lugar de ese texto:

$('.compartir').proQuo({useTwitterButton: true});

agregarle comillas:

$('.compartir').proQuo({ useTwitterButton: true, addCurlyQuotes: true });

establecer el texto a mostrar:

$('.compartir').proQuo({ tweetLabel: 'mi texto' });

o incluso personalizar algunas de las funciones propias de Twitter, detalles estos que se explican en los ejemplos que hay en al página del desarrollador.

No hay limitaciones en cuanto a la cantidad de tipos definidos así que pueden agregarse varios, cada uno con sus opciones propias:

$('.compartir').proQuo({ useTwitterButton: true });
$('.OTROcompartir').proQuo({ tweetLabel: 'mi texto' });

Y luego, si queremos, bastaría darle algún tipo de formato especial a esas clases para hacerlas evidentes o resaltarlas.

TWITTER APLICACION

Twitter Follow Box es un plugin para jQuery que nos permite agregar un gadget de Twitter que copia el estilo del plugin Lilke Box de Facebook. Es fácil de integrar a cualquier sitio y posee varias opciones que permiten adaptarlo a nuestros gustos personales.

Descargamos el ZIP que ofrecen en al página de los desarrolladores y allí nos encontraremos con cuatro archivos:

followbox.css son las reglas de estilo; podemos copiar su contenido y agregarlo en la plantilla o un elemento elemento HTML colocándolo entre etiquetas <style> y </style>; obviamente, podemos modificarlo aunque así como está, funcionará perfectamente

jquery.followbox.js es el plugin en si mismo, podemos usar ese archivo o su versión minimizada llamada jquery.followbox.min.js; cualquier a de ellos, lo alojamos en un servidor externo o lo agregamos antes de </head>, copiando y pegando el contenido del archivo:

<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo ...
//]]>
</script>

Por último, deberíamos cambiar la URL de un pequeño ícono que se utiliza en el gadget; la imagen llamada icon_twitter.png que alojamos donde nos plazca y luego, buscamos esto en el script:

var d="followbox/icon_twitter.png";

y lo cambiamos por la dirección URL de nuestra imagen.

var d="http://mi_imagen.png";

Con eso, ya estamos listos para mostrarlo donde se nos ocurra. Por ejemplo, si agregamos un elemento HTML en la sidear, allí, escribimos lo siguiente:

<div id="MIfollowbox"></div>
<script>
  $('#MIfollowbox').followbox({
    'user' : 'NOMBRE_USUARIO'
  });
</script>

Y eso es todo. Es un DIV vacío, al que le damos un ID único (en este ejemplo lo llamo MIfollowbox) y la llamada a función donde sólo es necesario colocar nuestro nombre de usuario en Twitter.

Como decía, una serie de opciones extras permiten configurar algunos detalles:

width es el ancho en pixeles
height es el alto en pixeles
border_color el color del borde
bg_color el color del fondo
bg_image una imagen de fondo optativa
title_color el color del texto del título
total_count_color el color indicando la cantidad de seguidores
follower_name_color el color de los enlaces a los seguidores
theme permite seleccionar un estilo global; puede ser light, dark o custom

Todas ellas son optativas y se agregan en el mismo script, separándolas con comas:

$('#MIfollowbox').followbox({
  'user' : 'NOMBRE_USUARIO',
  'theme' : 'dark'
});