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.

5 comentarios:

telenovelasde  

Muy bueno amigo muchas gracias por ayudarme con la función para videos que necesitaba.

Responder
dioscaficho  

Hola Jmiur.
Quisiera saber si puedes ayudarme con el share Bar de mi Blog DiosCaficho.Com
Quisiera que al compartir con el botón de Twitter aparezca mi cuenta(@dioscaficho) ya que solo aparece el titulo del post y la url
Además como agregar el botón de pinterest
Este es el codigo:
<style>
#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#000;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Comparte Esto!"><script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div></div>

JMiur  

Eso dependerá. En Blogger no hay muchas opciones que puedan utilizarse y la mayor parte es manejado por el sistema.

Para Facebook puedes ver estas dos entradas 1 2
Para Twitter esta otra

dioscaficho  

Muchas gracias, ya funciona como queria.
Y como puedo añadir el boton de compartir en Pinterest

JMiur  

Simplemente debes colocar el código que ellos te dan. Fíjate en esta entrada de Oloman

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR