prettySociable es una excelente opción para añadir un poco de interacción con tus usuarios. Si has visitado Mashable en este ultimo tiempo notaras que en cada link e imagen al posicionar el mouse sobre ellos nos permiten arrastrarlos a donde queremos compartir el link, como por ejemplo Twitter o Facebook.

prettySociable Socializa tu Blog al estilo Mashable con prettySociable

prettySociable nos facilita lograr esta integración sin dolores de cabeza, solo debemos incluir a prettySociable y darles las instrucciones de como debe comportarse.

Si todavía no sabes de lo que estoy hablando podes ver este Demo y ver de que se trata.

Su uso es muy sencillo, solo debemos hacernos con una copia de prettySociable, jQuery y la hoja de estilo:

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.prettySociable.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettySociable.css" type="text/css" media="screen" charset="utf-8" />

Para brindar un poco de soporte a IE6 incluiremos

<!--[if lte IE 6]><script src="js/DD_belatedPNG.js" type="text/javascript" charset="utf-8"></script><![endif]-->

Ahora solo resta inicializar prettySociable:

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$.prettySociable();
		});
	</script>

Para cada link que queramos compartir vía prettySociable solo debemos añadir rel=”prettySociable” que es su presentación por defecto. Por ejemplo:

<a href="#" rel="prettySociable">Link a Compartir</a>

Si queremos un Titulo personalizado solo debemos escribir:

<a href="#" rel="prettySociable;title:Titulo personalizado;excerpt:Excerpt personalizado.">Link a Compartir</a>

Si indagamos un poco más podemos añadir mas sitios para compartir y personalizar las animaciones dentro de los siguientes parámetros:

<script type="text/javascript" charset="utf-8">
 
		$(document).ready(function(){
			$.prettySociable({
				animationSpeed: 'fast', /* fast/slow/normal */
				opacity: 0.90, /* Value between 0 and 1 */
				share_label: 'Drag to share', /* Text displayed when a user rollover an item */
				share_on_label: 'Share on ', /* Text displayed when a user rollover a website to share */
				hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettySociable */
				hover_padding: 0,
				websites: {
					facebook : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Facebook',
						'url': 'http://www.facebook.com/share.php?u=',
						'icon':'images/prettySociable/large_icons/facebook.png',
						'sizes':{'width':70,'height':70}
					},
					twitter : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Twitter',
						'url': 'http://twitter.com/home?status=',
						'icon':'images/prettySociable/large_icons/twitter.png',
						'sizes':{'width':70,'height':70}
					},
					delicious : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Delicious',
						'url': 'http://del.icio.us/post?url=',
						'icon':'images/prettySociable/large_icons/delicious.png',
						'sizes':{'width':70,'height':70}
					},
					digg : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Digg',
						'url': 'http://digg.com/submit?phase=2&url=',
						'icon':'images/prettySociable/large_icons/digg.png',
						'sizes':{'width':70,'height':70}
					},
					linkedin : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'LinkedIn',
						'url': 'http://www.linkedin.com/shareArticle?mini=true&ro=true&url=',
						'icon':'images/prettySociable/large_icons/linkedin.png',
						'sizes':{'width':70,'height':70}
					},
					reddit : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'Reddit',
						'url': 'http://reddit.com/submit?url=',
						'icon':'images/prettySociable/large_icons/reddit.png',
						'sizes':{'width':70,'height':70}
					},
					stumbleupon : {
						'active': true,
						'encode':false, // If sharing is not working, try to turn to false
						'title': 'StumbleUpon',
						'url': 'http://stumbleupon.com/submit?url=',
						'icon':'images/prettySociable/large_icons/stumbleupon.png',
						'sizes':{'width':70,'height':70}
					},
					tumblr : {
						'active': true,
						'encode':true, // If sharing is not working, try to turn to false
						'title': 'tumblr',
						'url': 'http://www.tumblr.com/share?v=3&u=',
						'icon':'images/prettySociable/large_icons/tumblr.png',
						'sizes':{'width':70,'height':70}
					}
				},
				tooltip: {
						offsetTop:0,
						offsetLeft: 10
					},
				popup: {
					width: 900,
					height: 500
				},
				callback: function(){} /* Called when prettySociable is closed */
			});
		});
	</script>

También podemos des-habilitar algunos sitios que necesitemos, por ejemplo:

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$.prettySociable();
 
			$.prettySociable.settings.websites.facebook.active=false;
			$.prettySociable.settings.websites.twitter.active=false;
			$.prettySociable.settings.websites.delicious.active=false;
			$.prettySociable.settings.websites.digg.active=false;
			$.prettySociable.settings.websites.linkedin.active=false;
			$.prettySociable.settings.websites.reddit.active=false;
			$.prettySociable.settings.websites.stumbleupon.active=false;
			$.prettySociable.settings.websites.tumblr.active=false;
		});
	</script>

Y por ultimo, pero no menos importante prettySociable es compatible con la mayoría de los navegadores modernos (IE6 inclusive)