Los “links de social bookmarking” se representan generalmente en la forma de pequeñas imágenes al final de un post de wordpress. Estas imágenes son links que automáticamente agregan el artículo en el cual se presiono la imagen a algún sistema de rating y categorización de páginas, como puede ser digg, stumbleupon, etc.

Al tener estos links le facilitamos al lector la acción de agregar la página y también le recordamos que existe esta posibilidad, aumentando las probabilidades de que el lector tome acción.

Sistemas como stumbleupon, digg, etc, nos ayudan ya que aumentan el trafico y la exposición de nuestros artículos.

Si bien ya existen plugins para wordpress como AddThis y ShareThis que cumplen con este cometido, nosotros vamos a tomar el camino mas complicado pero eventualmente más efectivo. Por qué no usar plugins como estos? Requieren registración (tedioso) y al final del día no sabemos realmente que código se esta ejecutando en nuestra página, no sabemos si se esta recolectando información de nuestros usuarios, etc. Al tomar el camino más difícil estamos en realidad simplificando la situación.

Requisitos

Para poder seguir las instrucciones siguientes necesitamos acceso a los archivos que conforman nuestro theme de wordpress. En particular necesitamos editar los archivos single.php y style.css que se encuentran en la carpeta del theme que estemos utilizando.

Código

Bien, necesitamos editar single.php. En este tutorial vamos a suponer que el theme que estas usando es kubrik o una modificación de kubrik. Esto es más que nada para especificar en que lugar insertar al código, aunque si sabes lo que estas haciendo puedes decidirlo por tu cuenta.

Ahora buscamos </small> en single.php, después vas a ver </p> y después </div>. Exactamente después de </div> (aproximadamente en la linea 61) tienes que insertar el siguiente código:

<ul id="bookmarks">
	<li>
		<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" rel="nofollow" title="Postear a Facebook">
			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/facebook.png" alt="Postear a Facebook" />
		</a>
	</li>
	<li>
		<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" rel="nofollow" title="Agrega a Digg">
			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/digg.png" alt="Agrega a Digg" />
		</a>
	</li>
	<li>
		<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>;title=<?php the_title(); ?>" rel="nofollow" title="Agrega a del.icio.us">
			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/delicious.png" alt="Agrega a del.icio.us" />
		</a>
	</li>
	<li>
		<a href="http://twitthis.com/twit?url=<?php the_permalink(); ?>" rel="nofollow" title="Agrega a Twitter">
			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/twitter.png" alt="Agrega a Twitter" />
		</a>
	</li>
	<li>
		<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" rel="nofollow" title="Agrega a StumbleUpon">
			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/stumble.png" alt="Agrega a StumbleUpon" />
		</a>
	</li>
</ul>

Tenemos que tener en cuenta que el texto en negritas, es decir “http://www.tusitioweb.com/lugardondeseencuentretuimagen/” debe ser cambiado por el lugar donde realmente se encuentra tu imagen. Esto quiere decir que tendremos que crear una carpeta en nuestro server, poner nuestras imágenes allí y después cambiar “http://www.tusitioweb.com/lugardondeseencuentretuimagen/” por el path real de nuestras imágenes. Asegurate que el path sea absoluto y no relativo (que empiece con “http://www…”)

Una lugar en el que podemos encontrar una gran variedad de imágenes para este propósito es The Best Social Media Icons All In One Place

Ahora puedes probar ingresar a un post en tu blog, y verás que abajo aparecen 5 imágenes. Probablemente el look actual no sea de tu agrado. Si bien es semánticamente correcto que las imágenes son un “listado” de items, el estilo por defecto para listas no es lo más indicado para la situación actual. Para modificarlo puedes agregar a tu hoja de estilo (generalmente style.css en la carpeta de tu theme) esta porción de código:

ul#bookmarks {
	list-style:none;
	padding:0;
	margin:15px 15px 15px 0;
}
ul#bookmarks li {
	float:left;
	margin:0 7px 0 7px;
}

ul#bookmarks li a {
	display:block;
	padding:5px;
}

Con este código la lista quedará estilizada de una forma genérica que es probable que calce con cualquier diseño, pero puedes editar los parámetros a tu agrado.

Resumen

Bien, estos son los pasos que tenemos que hacer:

1. Acceder a nuestra copia local de single.php con nuestro editor favorito (Dreamweaver, notepad++, etc)
2. Agregar el código como se describió
3. Buscar imágenes para nuestro propósito (The Best Social Media Icons All In One Place) descomprimirlas en una carpeta en nuestra copia local y subirlas a nuestro sitio
4. Reemplazar en el código los path de ejemplo por los path reales de las imágenes
5. Guardar single.php y reemplazarlo por el que se encuentra en nuestro sitio
6. Agregar a style.css los estilos que se describieron anteriormente
7. Modificar a gusto

Si bien parece complicado, es bastante simple. Es inyectar algo de código a dos archivos y subir unas imágenes :)

Pueden ver en este mismo post cual es el resultado final, abajo cerca de la sección de comentarios.

Por cualquier duda o problema pueden comentar en este mismo artículo.

Este artículo fue publicado el Jueves, Abril 9th, 2009 a las 3:02 am y es de la categoría Tutoriales. Podes mantenerte al tanto de las respuestas a este artículo a traves del RSS 2.0 feed. Podes dejar un comentario, o un trackback desde tu sitio.