Siguiendo con la documentación de los cambios en el blog, voy a explicar como poner botones sociales en wordpress de manera manual. He de decir que estuve mirando plugins que automatizaran el proceso, pero no encontré ninguno que me acabara de convencer, así que opte por documentarme e incluir los botones de los servicios y redes que (de momento) consideraba realmente útiles, los botones son de:

(Parte de las definiciones son de Wikipedia)

  • Facebook
    No podía faltar, Facebook es la red social más usada en el mundo.

  • Twitter
    Servicio de microblogging que permite a sus usuarios enviar micro-entradas basadas en texto, denominadas “tweets”

  • Delicious
    Es un servicio de gestión de marcadores sociales en web. Es muy útil, yo lo uso muchísimo, puesde compartir tus marcadores y los puedes consultar desde cualquier lugar

  • Buzz
    Es un servicio que permite a los usuarios el uso de herramientas como el intercambio de hipervinculos, fotos, videos y actualizaciones por medio de Gmail.

¿Cómo compartir?

El funcionamiento es muy sencillo, todos estos servicios permiten hacer una llamada a una url pasando una serie de parámetros para indicar datos tales como el título y la url a compartir. A continuación pongo las url y su formato para cada servicio:

Facebook:

http://www.facebook.com/sharer.php?u=[URL A COMPARTIR]&t=[TÍTULO DEL CONTENIDO]

Twitter:

http://twitter.com/home?status=[TEXTO A COMPARTIR]

Delicious:

http://delicious.com/save?v=5&noui&jump=close&url=[URL A COMPARTIR]&title=[TÍTULO DEL CONTENIDO]
<!--
parámetros opcionales:
noui es un parámetro extra para no mostrar la interface de Delicious, útil al lanzar esta url en un popup.
jump=close cierra el popup de delicious automáticamente una vez has salvado el contenido.
-->

Buzz:

http://www.google.com/reader/link?url=[URL A COMPARTIR]&title=[TÍTULO DEL CONTENIDO]&snippet=[DESCRIPCIÓN DEL CONTENIDO]&srcURL=[URL DE TU BLOG]&srcTitle=[EL NOMBRE DE TU BLOG]



Compartiendo manualmente en Wordpress

Utilizando las funciones PHP que nos facilita Wordpress para usar en los Themes, dentro de The Loop. No hay que olvidarse de codificar el contenido susceptible de tener caracteres especiales (como el título) con rawurlencode():

Facebook:

<a href="http://www.facebook.com/sharer.php?u=<?php echo get_permalink() ?>&t=<?php echo rawurlencode(get_the_title()) ?>" target="_blank" rel="external nofollow">Compartir en Facebook</a>

Twitter:

<a href="http://twitter.com/home?status=Leyendo <?php echo get_permalink() ?> - <?php echo rawurlencode(get_the_title()) ?>" target="_blank" rel="external nofollow">Compartir en Twitter</a>

También podemos enviar una url corta de nuestro post a Twitter utilizando la función get_short_url()de mi anterior post:
Acortador de Urls (short url) en Wordpress

<a href="http://twitter.com/home?status=Leyendo <?php echo echo get_short_url(get_permalink(), get_the_title()); ?> - <?php echo rawurlencode(get_the_title()) ?>" target="_blank" rel="external nofollow">Compartir en Twitter</a>

Delicious:

<a href="http://delicious.com/save?v=5&url=<?php echo get_permalink() ?>&title=<?php echo rawurlencode(get_the_title()) ?>" target="_blank" rel="external nofollow">Salvar en Delicious</a>

Buzz:

<a href="http://www.google.com/reader/link?url=<?php echo get_permalink() ?>&title=<?php echo rawurlencode(get_the_title()) ?>&snippet=<?php echo rawurlencode(get_the_excerpt()) ?>&srcURL=<?php echo get_bloginfo("url")?>&srcTitle=<?php echo rawurlencode(get_bloginfo("title")) ?>" target="_blank" rel="external nofollow">Compartir en Buzz</a>



Añadiendo un poco de Javascript extra

Facebook, Delicious y Buzz lucen mejor si se lanza la url en un popup (incluso están diseñados para hacerlo así), es muy fácil añadir esta funcionalidad con jQuery, para ello asignamos una clase css a cada link:

<a href="http://www.facebook.com/sharer.php?u=<?php echo get_permalink() ?>&t=<?php echo rawurlencode(get_the_title()) ?>" class="sfacebook" target="_blank" rel="external nofollow">Compartir en Facebook</a>
 
<a href="http://delicious.com/save?v=5&url=<?php echo get_permalink() ?>&title=<?php echo rawurlencode(get_the_title()) ?>" class="sdelicious" target="_blank" rel="external nofollow">Salvar en Delicious</a>
 
<a href="http://www.google.com/reader/link?url=<?php echo get_permalink() ?>&title=<?php echo rawurlencode(get_the_title()) ?>&snippet=<?php echo rawurlencode(get_the_excerpt()) ?>&srcURL=<?php echo get_bloginfo("url")?>&srcTitle=<?php echo rawurlencode(get_bloginfo("title")) ?>" class="sbuzz" target="_blank" rel="external nofollow">Compartir en Buzz</a>

Y luego, con el siguiente js, creamos un código no intrusivo para lanzar las url de compartir en caso de que javascript este disponible en el navegador, es conveniente poner siempre el script al final del html, justo antes del cierre del body, el tag: </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
<!--
        //opciones por defecto de todos los popups
	var windowFeatures = "toolbar=no, location=no, directories=no, status=no, menubar=no, " +
						 "scrollbars=no, resizable=yes";
 
        //cada url tiene un ancho y alto distinto
	$("a.sfacebook").click(function(){
		var url = $(this).attr("href");
		window.open(url,"facebookWindow","width=600,height=440, "+ windowFeatures) 
		return false;
	});
 
        //En el caso de Delicious además, añadimos los parámetros opcionales que nos hemos dejado en el html (noui y jump=close)
	$("a.sdelicious").click(function(){
		var url = $(this).attr("href");
		window.open(url+"&v=5&noui&jump=close", "deliciousWindow","width=550,height=550, "+ windowFeatures); 
		return false;
	});
	$("a.sbuzz").click(function(){
		var url = $(this).attr("href");
		window.open(url,"buzzWindow","width=580,height=440, "+ windowFeatures) 
		return false;
	});
//-->
</script>

El resultado lo podéis ver en el blog mismo, al pie de cada post, están los botones de compartir, aprovecho para pedir que os animéis a dejarme algún comentario para decirme si utilizáis algún otra web social o de compartir enlaces que se me haya pasado por alto (¿Digg?, ¿StumbleUpon?), y así darle un vistazo, gracias.


Referencias:

Estas son las páginas que he consultado para realizar este artículo:


Recursos:

Y aquí los iconos sociales que uso en el blog: