Drag and Drop para compartir en redes sociales

Dan Wellman ha realizado un tutorial en el blog Nettuts+ sobre una herramienta para compartir nuestros post o paginas web mediante las redes sociales Twitter, Delicious y Facebook de una manera muy similar a Mashable: con el uso del drag and drop, en Mashable lo realizan con una herramienta proporcionada por Meebo que no todos los sitios Web lo pueden tener, esta seria una manera para tenerlo en nuestro sitio web.

He realizado algunas modificaciones al script para que sea mas amigable y parecida al original en Mashable:

• Sombreado de bordes cuando realizar un over a la imagen.
• Cambio de imágenes de Twitter, Delicious y Facebook mas agradables.
• Imagen de indicación para hacer el drop(soltar).
• Abrir en target=”_blank” las redes sociales para no interrumpir la navegación al usuario en nuestra web.

La implementación es muy sencilla:

Paso 1: Incluir los archivos JavaScript y CSS

Esta herramienta utiliza el Framework jQuery 1.3.2 y el complemento jQuery UI 1.7.2.

Paso 2: Poner el el script que realizara la funcionalidad.

Este script tendremos que ponerlo justo antes de cerrar el de la pagina Web.

$(function() {
	var images = $("#content img");
	var title = $("title").text() || document.title;
	images.draggable({
	  helper: function() {
		return $("
").attr("id", "helper").html("Drag to Share this Post").appendTo("body");
	  },
	  cursor: "pointer",
	  cursorAt: { left: -10, top: 20 },
	  zIndex: 99999,
	  start: function() {
		$("
").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
		$("#tip").remove();
		$(this).unbind("mouseenter");
		$("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
	  },
	  stop: function() {
		$("#targets").slideUp();
		$(".share", "#targets").remove();
		$("#overlay").remove();
		$(this).bind("mouseenter", createTip);
	  }
	});
	$("#targets li").droppable({
	  tolerance: "pointer",
	  over: function() {
		$(".share", "#targets").remove();
		$("").addClass("share").text("Share on " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
	  },
	  drop: function() {
		var id = $(this).attr("id"),
		  url = $("#bitly").text();
		  base = $(this).find("a").attr("href");
		if (id.indexOf("twitter") != -1) {
			window.open(base + "/home?status=" + title + ": " + url, '_blank');
		} else if (id.indexOf("delicious") != -1) {
			window.open(base + "/save?url=" + url + "&title=" + title, '_blank');
		} else if (id.indexOf("facebook") != -1) {
			window.open(base + "/sharer.php?u=" + url + "&t=" + title, '_blank');
		}
	  }
	});
	var createTip = function(e) {
	  ($("#tip").length === 0) ? $("
").html("Drag this image to share the page").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(500) : null;
	};
	images.bind("mouseenter", createTip);
	images.mousemove(function(e) {
	  $("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
	});
	images.mouseleave(function() {
	  $("#tip").remove();
	});
});

También pondremos esta lista que se utilizara para mostrar los iconos de las redes sociales.

Esto es todo, lo único que tenemos que asegurarnos es que todas las imágenes que queramos compartir tendrán que estar dentro del div con identificador “content”, si tienen otro identificador pueden modificar el script:

var images = $("#content img");

Falto algo?, creo que este script se puede mejorar aun más, siéntanse libres de sugerir o comentar sobre esta herramienta que es muy útil.

Descargar – Ver Demo

Tutorial Original: Nettuts+