Botones para compartir noticias y artÃculos de Wordpress en redes comunitarias como Fresqui y Menéame
Vuelvo al ataque con otra contribución que creo interesante para todos aquellos que gestionan sus páginas web mediante Wordpress. En esta ocasión os muestro un sencillo código en HTML/PHP para colocar botones conectados con Fresqui, Menéame y Digg; asà como un par de plugins que permitirán a vuestros lectores compartir vuestras publicaciones en Wordpress con el resto de la comunidad de Internet de la manera más sencilla.
Es el sistema que uso yo en esta página y que podéis ver entrando en cualquiera de los artÃculos publicados. A continuación os muestro una imagen de dicha botonera:Â
![]()
De todos es conocido el interés que cualquier administrador web tiene en posicionar su página y darla a conocer a la comunidad. Hay muchos sistemas y herramientas para conseguir esto pero tal vez uno de los más útiles y rápidos sean las redes comunitarias de promoción de noticias.
Se trata de sitios en los que la participación de los usuarios, enviando noticias que han encontrado navegando por Internet, es fundamental. Luego el resto de la comunidad vota y comenta esas contribuciones fomentando asà su promoción y extensión a través de la red.
Recientemente he integrado en mis artÃculos una botonera, que podéis ver entrando en cualquiera de las publicaciones de www.davidboticario.com, que conecta con Fresqui y Menéame (a mi juicio las principales redes de este tipo a nivel nacional) y con Digg que es una de las más importantes a nivel internacional.
Adicionalmente he completado esa botonera con un par de plugins para Wordpress, que considero muy útiles y que aumentan la capacidad de promoción de los artÃculos casi hasta el infinito. Se trata de un plugin para enviar las publicaciones mediante email llamado WP-Email y otro, llamado Share This,  para aumentar las redes comunitarias en las que compartir el artÃculo hasta el infinito y más allá.
La instalación de estos plugins es sencilla y viene explicada en las páginas que os he puesto en sus respectivos enlaces. En este artÃculos me centraré en explicaros la otra parte del código. La que se refiere a la inserción de los botones conectados con Fresqui, Menéame y Digg.
Hay dos maneras de hacer operativos estos botones. En primer lugar podemos incluir estos tres botones con un texto explicativo a la derecha de cada botón y que ese texto tenga el enlace que vaya a la comunidad esté en ese texto. En segundo lugar podemos prescindir de ese texto y que el enlace esté en los propios botones/imágenes. Elegir un sistema u otro dependerá un poco del aspecto que le queráis dar a la botonera, el espacio de que dispongáis en vuestra zona de publicación y de cuál queráis que sea su uso.
En el primer caso el código para cada botón es el siguiente:
<img style=”border: 0;” src=”<?php bloginfo(’template_directory’); ?>/images/menefante.gif” align=”top” alt=”Menéame” /><a href=”http://meneame.net/submit.php?url=<?php the_permalink() ?>” title=”Enviar a menéame <?php the_title(); ?>”>Enviar a menéame</a>
¿Qué hacemos con este código?
- En primer lugar definimos que la imagen del icono no tendrá borde (img style=”border: 0;”). Esto es interesante en algunos templates de Wordpress, como el que uso en esta página, que resaltan las imágenes con un recuadro al pasar el ratón por encima de dichas imágenes. O simplemente si no queremos que la imagen tenga recuadro en ningún caso para optimizar la integración con el aspecto gráfico de la web.
- A continuación le indicamos mediante PHP de dónde tiene que cargar la imagen, en este caso del directorio de imágenes del template en uso, alineamos la imagen como deseamos y le asociamos un texto contextual que aparecerá al dejar el ratón sobre ella: src=”<?php bloginfo(’template_directory’); ?>/images/menefante.gif” align=”top” alt=”Menéame” />
- Por último definimos el enlace que tendrá la zona “pulsable” que dará acceso a la web de la comunidad en cuestión (en este ejemplo Menéame): <a href=”http://meneame.net/submit.php?url=<?php the_permalink() ?>” title=”Enviar a menéame <?php the_title(); ?>”>Enviar a menéame</a>
Si este mismo código lo reutilizamos para los botones de Fresqui y Digg lo que habrÃa que escribir es lo siguiente:
<img style=”border: 0;” src=”<?php bloginfo(’template_directory’); ?>/images/menefante.gif” align=”top” alt=”Menéame” />
<a href=”http://meneame.net/submit.php?url=<?php the_permalink() ?>” title=”Enviar a menéame <?php the_title(); ?>”>Enviar a menéame</a>Â
<img style=”border: 0;” src=”<?php bloginfo(’template_directory’); ?>/images/fresqui.gif” align=”top” alt=”Fresqui” />
<a href=”http://mix.fresqui.com/post?url=<?php the_permalink() ?>” title=”Enviar a Fresqui <?php the_title(); ?>”>Enviar a Fresqui</a>Â
<img style=”border: 0;” src=”<?php bloginfo(’template_directory’); ?>/images/digg.png” align=”top” alt=”Digg” />
<a href=”http://digg.com/submit?url=<?php the_permalink() ?>” title=”Enviar a Digg <?php the_title(); ?>”>Enviar a Digg</a>
He marcado en rojo la parte de las URL que invocan a las comunidades ya que hay que tener cuidado con el fichero al que se llama. Si no se pone tal cual está la página no cargará correctamente o simplemente no funcionará.
El resultado obtenido se puede comprobar en la siguiente imagen:
 ![]()
El segundo caso, en el que prescindimos del texto explicativo y simplemente ponemos las imágenes siendo ellas los mismos enlaces a las páginas de Menéame etc…, el código para el primer botón serÃa el siguiente:
<a href=”http://meneame.net/submit.php?url=<?php the_permalink() ?>”><img style=”border: 0;” src=”<?php bloginfo(’template_directory’); ?>/images/menefante.gif” align=”top” alt=”Menéame” /></a>
La botonera tendrÃa este aspecto:
 
Como se puede apreciar, en este formato se ahorra espacio considerablemente ya que el texto explicativo de lo que hace cada botón aparece sólo cuando se deja el cursor del ratón sobre cada botón. Este ahorro de espacio no es un tema menor ya que en cuanto añadamos un par de funcionalidades más (como hago yo con las de “enviar por email” y “Share This”, y un texto explicativo al principio de la botonera en plan: “Comparte está noticia”, veremos como enseguida nos quedamos sin espacio en la columna principal de nuestro Wordpress.
¿Dónde colocar este código? Eso depende de dónde queramos que aparezca. Lo más lógico es que los lectores de nuestras noticias necesiten leer dichas publicaciones antes de decidir si quieren promocionarlas. Por ello no es recomendable poner estas botoneras en la página principal, en la que no se leen las noticias enteras sino que se ve tan sólo una previsualización de las mismas. El sitio más adecuado para insertar este código es en el fichero single.php del theme que estemos usando. De esta manera la botonera aparecerá en cada post que tengamos publicado.
Por favor, si te ha gustado este artículo puntúalo pulsando sobre las estrellas.
2,624 veces visto

(9 votos, puntuación total: 4.56 de 5)
xerkad dijo,
Escrito el 27 Marzo, 2009 @ 7:18 pm
Safari 525.19 en
Mac OS X
Usando
Hola, me ha parecido muy interesante y asà lo puntué, paso a relatar un problema que tengo a ver si sabrÃas algo del tema, tengo un blog de wordpress gratuito no lo tengo alojado en un servidor mio propio o de esos gratuitos que se ofrecen, código HTML puedo introducir pero si hay instrucciones como y de php me los quita, de momento no tengo intención de alojarlo en ningún sitio, ni tampoco de pagar algún servicio que me lo permita hacer. Solo que ¿como puedo hacerlo en HTML para poner botoneras? puse la de Mr.wong que si tenian el código para ello,gracias por la atención.
David dijo,
Escrito el 27 Marzo, 2009 @ 7:29 pm
Internet Explorer 7.0 en
Windows XP
Usando
Hola xerkad. La verdad es que no logro entender lo que quieres decir. ¿Tienes un blog wordpress alojado en la red de blogs wordpress y no puedes usar PHP para meter una botonera? Por favor explica un poco más lo que necesitas (qué tipo de botonera…) y qué limitaciones tienes en tu actual alojamiento.
Luis Cotán dijo,
Escrito el 6 Junio, 2009 @ 1:41 pm
Mozilla Firefox 3.0.10 en
Windows Vista
Usando
Lo entiendo todo y quisiera poner esos botones en mis post pero no encuentro eso de “el fichero single.php del theme que estemos usando” para pegar el código! ayuda xfavor!!
gracias
David dijo,
Escrito el 8 Junio, 2009 @ 2:38 am
Mozilla Firefox 3.0.10 en
Windows XP
Usando
Hola luis. Me refiero a que tienes que editar y añadir el código en el fichero single.php que hay situado en: /wp-content/themes/
LAMT dijo,
Escrito el 26 Julio, 2009 @ 3:51 am
Opera 9.20 en
Windows XP
Usando
Gracias amigo es un buen articulo, aunque no entendi eso de donde tienes que pegar el código en el fichero single.php que hay situado en: /wp-content/themes/ lo pego en donde dice editar css cierto? y gracias tomare tu recomendacion sobre share this
LAMT dijo,
Escrito el 26 Julio, 2009 @ 4:06 am
Opera 9.20 en
Windows XP
Usando
ya me quedo claro gracias, volvi a leer el articulo