Acortar las URL gracias a Google en WordPress
Escrito por Luis Ruiz Actualizado el
Las URLs cortas pueden ser de mucha utilidad en infinidad de casos, desde evitar enlaces larguísimos para enviarlos a alguien hasta para encajar en redes sociales. En este artículo vamos a aprender a acortar las URL de nuestros artículos de forma automática cuando un usuario utilice los botones de compartir en redes sociales y a implementar una columna de información en el listado de entradas de WordPress con información de Google URL shortener sobre cuántas personas han pinchado en él, desde qué navegadores y otros datos de utilidad.
Gracias a las facilidades de Google, lo solucionaremos en un par de pasos.
Crear Key de la API en google
Antes de nada debéis saber que es necesaria una cuenta de Google Developer (gratis en el caso de tener cualquier cuenta de google). Una vez creada, lo primero que haremos es ir a la consola de desarrolladores de Google ( Google Developers Console) y dar al botón de ‘Crear proyecto’, por ejemplo: shortUrlNombreDominio.
Una vez creado el proyecto, entramos en él y nos vamos a ‘Usar APIs de Google’
Nos vamos a ‘Credenciales’, creamos una nueva y hacemos click sobre ‘Clave de API’.
Nos saldrá una especie de popup con varias opciones: Clave de Servidor, Clave de Navegador, Clave de Android, Clave de IOS… En este caso, seleccionaremos la primera opción (‘Clave de Servidor’).
Nos conducirá a una página donde pondremos el Nombre y la IP del servidor, que es opcional. Normalmente, lo dejamos con los valores por defecto y le damos a ‘Crear’ para que nos genere la clave de la de API.
Una vez creada la credencial, nos vamos a ‘Visión general’, buscamos ‘URL Shortener API’ y hacemos click sobre el resultado.
Al hacerlo, nos llevará a una página donde habilitaremos la API.
Con estos sencillos pasos ya tenemos disponible la clave para acceder a la API del acortador de URL de Google.
Guardar URL corta en campo personalizado de WordPress
Para implementar esta funcionalidad en WordPress, vamos a crear un fichero independiente a functions.php para así tenerlo localizado y, lo más importante, poder reutilizarlo en todos nuestros proyectos. Lo podemos llamar, por ejemplo, “short_url.fn.php” y lo tendremos que llamar desde el archivo functions.php.
La idea es crear un campo personalizado en cada entrada llamado “short_url” para que se guarde la URL cada vez que se dé al botón de publicar entrada o un ‘custom post type’. Así evitaremos hacer llamadas innecesarias a la API cada vez que se cargue el artículo en la web. Para ello utilizaremos el siguiente código.
add_action('publish_post', 'save_short_url');
add_action('publish_portfolio', ’save_short_url');
function save_short_url() {
global $wpdb, $post;
if (!$post_id) $post_id = $_POST['post_ID'];
if (!$post_id) return $post;
$keyShortener=‘XXXXXX’;
$urlShare=get_permalink($post_id );
$result = wp_remote_post(
'https://www.googleapis.com/urlshortener/v1/url?key='.$keyShortener,
array(
'body' => json_encode(array('longUrl' => esc_url_raw($urlShare))),
'headers' => array( 'Content-Type' => 'application/json')
)
);
if(!is_wp_error($result)){
$result = json_decode($result['body']);
$shortlink = $result->id;
}else{
$shortlink=$urlShare;
}
update_post_meta($post_id, 'short_url', $shortlink);
}Con las dos primeras líneas (add_action), lo que hacemos es añadir dos acciones a WordPress para que cada vez que se publique una entrada o un ‘custom post type’ llame a la función “save_short_url”.
Crearemos dos variables llamadas:
- keyShortener, donde indicaremos la clave de la API.
- urlShare, donde tendremos la URL de la entrada o de la URL del ‘custom post type’, según sea el caso.
Posteriormente con ‘wp_remote_post’ llamaremos a la API de Google para que nos devuelva la URL corta y con ‘update_post_meta’ guardamos el valor en nuestro campo personalizado “short_url» de WordPress.
Añadir información en columna del listado de entradas o ‘custom post type’
Ahora lo que necesitamos es añadir una columna en el listado que mostrará la URL corta generada y un link a la página de Google URL shortener para analizar la información cuando deseemos. Esto lo realizaremos con este código que añadiremos en el mismo archivo “short_url.fn.php”
function googl_post_columns($columns) {
$columns['shortlink'] = 'Shortlink';
return $columns;
}
function googl_custom_columns($column) {
global $post;
if ('shortlink' == $column)
{
$shorturl = get_post_meta($post->ID, 'short_url', true);
$shorturl_caption = str_replace('http://', '', $shorturl);
$shorturl_info = str_replace('goo.gl/', 'goo.gl/info/', $shorturl);
echo "<a href='{$shorturl}'>{$shorturl_caption}</a> (<a href='{$shorturl_info}' target='_blank'>info</a>)";
}
}
add_action('manage_posts_custom_column', 'googl_custom_columns');
add_filter('manage_edit-post_columns', 'googl_post_columns');
add_action('manage_portfolio_custom_column', 'googl_custom_columns');
add_filter('manage_edit-portfolio_columns', 'googl_post_columns');Con ‘add_action’ y ‘add_filter’ añadiremos acciones y filtros a nuestro WordPress para qué llaman a esas funciones cada vez que vayamos al listado de entradas o ‘custom post type’. Mediante la función ‘get_post_meta’ de WordPress sacaremos la información guardada en el campo personalizado “short_url”.
Implementar URL en nuestro tema de WordPress
Para implementar la URL en nuestra entrada iremos a los archivos de nuestro tema, concretamente a single.php, que es donde se encuentra normalmente el código que mostrará el contenido de nuestra entrada.
Y dentro del bucle “while” añadiremos el siguiente código:
$link= get_permalink($post->ID);
$urlShare=get_post_meta($post->ID, 'short_url', true);
$urlShare=($urlShare=='')? $link: $urlShare;
$urlShare=urlencode($urlShare);
$titleShare=urlencode(get_the_title());En la variable “link” tendremos la URL normal por si la queremos utilizar -o simplemente no disponemos de la URL corta-. Y con ‘urlencode’ codificaremos la URL y el título ($titleShare) para compartirla en las diferentes redes sociales.
Añadir botones de redes sociales
Ya solo nos quedaría integrar la URL y el título en los diferentes botones de compartir en redes sociales, y lo haremos mediante el siguiente código:
<div class="Social-button">
<span>Compartir en:</span>
<a href="http://www.facebook.com/sharer.php?u=<?php echo $urlShare;?>&t=<?php echo $titleShare;?>" target="_blank">Facebook</a>
<a href="https://twitter.com/intent/tweet?url=<?php echo $urlShare;?>&text=<?php echo $titleShare;?>" target="_blank">Twitter</a>
<a href="https://plus.google.com/share?url=<?php echo $urlShare;?>" target="_blank">Google +</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $urlShare;?>" target="_blank">Linkedin</a>
</div>Conclusión
En Bubuku damos esta opción a nuestros clientes cuando realizamos desarrollos a medida en WordPress debido a que el número de caracteres a la hora de compartir contenido es bastante importante –especialmente en entornos como Twitter- y porque de esta forma pueden analizar el impacto que tienen sus URL fácilmente.
Si buscas una agencia que te realice desarrollos a medida y optimice tu web, en Bubuku podemos ayudarte, ya que somos expertos en WordPress. Contacta con nosotros y te informaremos sin compromiso.
Más información: Google Developers
