Ahora esta muy de moda poner marcadores sociales para ofrecer a nuestras visitas la posibilidad de compartir nuestras entradas. Yo soy de la opinión que hay que facilitar mucho esa labor, sino no funcionara.



Webs como Mashable o Abduzeedo han implementado un sistema que al pasar sobre una imagen, podemos pincharla y arrástrala hacia unos marcadores sociales que aparecen para facilitar la labor. Ellos usan un sistema llamado Meebo, que no esta disponible para el común de los blogueros.

En Nettust+ nos enseñan como hacerlo con JQuery. He modificado el CSS, el script para adaptarlo a nuestras entradas y añadido algunos marcadores sociales más hispanos.

Su implementación no es nada difícil, para ello debéis añadir antes de </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> ►Este solo si no usáis ya la librería, si la usáis no es necesario.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js ' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {

//cache selector
var images = $(".post-body img"),
title = $(".post h3").text() || document.title;

//make images draggable
images.draggable({
//create draggable helper
helper: function() {
return $("<div>").attr("id", "helper").html("<span>" + title + "</span><img id='thumb' src='" + $(this).attr("src") + "'>").appendTo("body");
},
cursor: "pointer",
cursorAt: { left: -10, top: 20 },
zIndex: 99999,
//show overlay and targets
start: function() {
$("<div>").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
$("#tip").remove();
$(this).unbind("mouseenter");
$("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
},
//remove targets and overlay
stop: function() {
$("#targets").slideUp();
$(".share", "#targets").remove();
$("#overlay").remove();
$(this).bind("mouseenter", createTip);
}
});

//make targets droppable
$("#targets li").droppable({
tolerance: "pointer",
//show info when over target
over: function() {
$(".share", "#targets").remove();
$("<span>").addClass("share").text("Compartir en " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
},
drop: function() {
var id = $(this).attr("id"),
currentUrl = window.location.href,
baseUrl = $(this).find("a").attr("href");

if (id.indexOf("twitter") != -1) {
window.location.href = baseUrl + "/home?status=" + title + ": " + currentUrl;
} else if (id.indexOf("delicious") != -1) {
window.location.href = baseUrl + "/save?url=" + currentUrl + "&title=" + title;
} else if (id.indexOf("facebook") != -1) {
window.location.href = baseUrl + "/sharer.php?u=" + currentUrl + "&t=" + title;
} else if (id.indexOf("wikio") != -1) {
window.location.href = baseUrl + "/sharethis/?url=" + currentUrl + "&t=" + title;
} else if (id.indexOf("meneame") != -1) {
window.location.href = baseUrl + "/submit.php?url=" + currentUrl + "&t=" + title;
} else if (id.indexOf("bitacoras") != -1) {
window.location.href = baseUrl + "/anotaciones/" + currentUrl + "&t=" + title;
}
}
});

var createTip = function(e) {
//create tool tip if it doesn't exist
($("#tip").length === 0) ? $("<div>").html("<span>Pincha y arrastra para compartir esta entrada</span><span class='arrow'></span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null;
};

images.bind("mouseenter", createTip);

images.mousemove(function(e) {

//move tooltip
$("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
});

images.mouseleave(function() {

//remove tooltip
$("#tip").remove();
});
});
//]]>
</script>
<style type='text/css'>
.ui-draggable { cursor:move !important; }
#tip { position:absolute; display:none; height:25px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }
#tip .arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }
#targets { display:none; list-style-type:none; position:fixed; top: 50%; left: 50%;z-index:99999;}
#targets li { float:left; margin-right:20px; display:block; width:60px; height:60px; background:url(URL ALOJAMIENTO DE LA IMAGEN) no-repeat 0 0; position:relative; }
#targets li#delicious { background-position:0 -60px; }
#targets li#facebook { background-position:0 -120px; }
#targets li#wikio { background-position:0 -180px; }
#targets li#meneame { background-position:0 -240px; }
#targets li#bitacoras { background-position:0 -300px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#fff; }
#overlay { background-color:#000; position:fixed;top:0;left:0;width:100%;height:100%; z-index:99997; }
#helper { background-color:#c2c2c2; position:absolute; height:35px; padding:15px 70px 0 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:18px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:3px solid #7d7d7d; }
#thumb { width:50px; height:50px; position:absolute; right:0; top:0; border-left:3px solid #7d7d7d; }
.share { font-weight:bold; position:absolute; font-size:12px; text-align: center; }
</style>
</b:if>

Debeis guardar esta imagen, subirla a un alojamiento y colocar su URL donde pone URL ALOJAMIENTO DE LA IMAGEN.

Guardamos los cambios, vamos a añadir un elemento HTML a nuestra plantilla y pegamos

<ul id="targets">
<li id="twitter"><a href="http://twitter.com"><!-- --></a></li>
<li id="delicious"><a href="http://delicious.com"><!-- --></a></li>
<li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li>
<li id="wikio"><a href="http://www.wikio.es"><!-- --></a></li>
<li id="meneame"><a href="http://meneame.net"><!-- --></a></li>
<li id="bitacoras"><a href="http://bitacoras.com"><!-- --></a></li>
</ul>

Solo os quedara que vuestras visitas disfruten las facilidades para compartir.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también