Hace unos días les comente como incluir una URL corta (Tinyurl mas precisamente) para cada entrada. Bueno estaba navegando por los Blogs de costumbre cuando note que varios de ellos proporcionaban un link para enviar “la entrada” a Twitter.

Note que varios de ellos cometían el error de enviar directamente la URL completa/SEO-optimizada, cosa que resulta poco productivo para Twitter.

Hacía ya días que tenía ganas de incluir esta opción en mi Blog, pero siempre estaba falto de tiempo. Hoy mate en mano me puse a tirar una líneas de códigos e investigar cual era la mejor opción.
Llegue a la conclusión de que era súper interesante usar la función de la que ya les había hablado, pero resultaba un tanto restrictiva para lo que tenía en mente. Con mas mate de por medio (y Facturas) llegue a WPEngineer y me salvo las papas.

Lo que vamos a crear es botón que les permita enviar a nuestros lectores la entrada que están leyendo a Twitter, pero vamos a optimizar la función para que sea lo más completa posible, cosa que el lector solo tenga que hacer solamente dos clicks.

Podes ver el mecanismo funcionando arriba a la derecha del Titulo de la entrada.

Paso 1

Abriremos nuestro archivo function.php (si no existe crearlo) y copiaremos estas líneas:

<?php
if ( !function_exists('fb_gettinyurl') ) {
	function fb_gettinyurl( $url ) {
 
		$fp = fopen( 'http://tinyurl.com/api-create.php?url=' . $url, 'r' );
		if ( $fp ) {
			$tinyurl = fgets( $fp );
			if( $tinyurl && !empty($tinyurl) )
				$url = $tinyurl;
			fclose( $fp );
		}
 
		return $url;
	}
}
?>

Paso 2

En nuestro archivo single.php (y siempre dentro del loop) incluiremos estas líneas:

 	<div id="twitter">
 
<a class="twit" href="http://twitter.com/home?status=Estoy%20leyendo:%20<?php the_title() ?>%20<?php echo
fb_gettinyurl(get_permalink()); ?>%20@baires%20%23
<?php
        $posttags = get_the_tags();
        $count = 0;
        if ($posttags) {
            foreach ($posttags as $tag) {
                $count++;
                if (1 == $count) {
                    echo $tag->name . ' ';
                }
            }
        }?> 
        "title="Enviar a Twitter" ></a>
				  </div>

Paso 3

Ahora le daremos formato vía CSS, procurare ser lo más completo posible, porque después los lectores me dicen que soy “tácito”.

A modo de ejemplo copiare mi CSS, es un poco avanzado, pero es muy agradable a la vista.

#twitter { height: 56px;margin: 0; padding: 0; position: relative; width: 81px; float: right; }
#twitter a { display: block; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium; position: absolute; text-indent: -900%; }
#twitter a:hover {background-position:left bottom;}
#twitter .twit { width: 80px; height: 31px; background: url(images/social/twit.png) no-repeat; left: 0; top: 1px; }

Para el ejemplo de arriba utilice esta imagen cortesia de Adriankenny (70×72)

El efecto se puede resumir en decir que a partir de una solo imagen y CSS Hacks lograremos una transición fluida en el hover.

El resultado (“Tweet”) final seria este:

Como se puede apreciar incluimos:

Una introducción: “Estoy leyendo:”
Titulo de la entrada
URL optimizada (Tinyurl)
Nuestro usuario en Twitter (bueno para después rastrearlo)
Un Tag (si te manejas dentro de una comunidad en Twitter los Tags son esenciales.)
Nota sobre Tags: Utilice una función que toma solamente el primer tag que se le dio a la entrada automáticamente.

Conclusión:

Mantenernos en estos tiempos fuera de Twitter es como darle la espalda a la realidad. El tráfico que puede generar esta Red Social es más que interesante y atractivo, porque mantenernos al margen?
Con estas simples líneas estaremos logrando más presencia en Twitter y facilitándoles la vida a nuestros lectores.