Incrementa tus visitas socializando tu sitio

Hace algo menos de un mes os enseñaba una forma de aumentar el tráfico de nuestro sitio mediante a 5 sencillos trucos. Hoy voy vamos a profundizar más en el tema, dándole forma a esos pasos.

En este tutorial vamos a darle la oportunidad a nuestros lectores de almacenar nuestras noticias de forma rápida, de esta forma mataremos dos pájaros de un tiro, conseguiremos contentar a nuestros visitantes y aumentaremos notablemente nuestro tráfico.

Podéis ver la demostración del tutorial, descargarlo o seguir leyendo el artículo para conocerlo un poco más a fondo.

DemostraciónEjemplos en HTML

DescargaArchivo ZIP

1. Introducción y Objetivo

Para este artículo vamos a centrarnos en los principales motores de tráfico de internet: delicious, digg, reddit, stumbleupon, twitter y nuestros sindicados RSS.

Para ello pondremos enlaces directos en cada una de nuestras noticias, así conseguiremos que nuestros lectores puedan almacenarlas de forma instantánea y ahorrarles trabajo. Además, para cada motor de tráfico, añadiremos un icono, así lo haremos mas vistoso y fácil de diferenciar.

A continuación os dejo un esquema del tutorial:

2. Código CSS

La hoja de estilos para este tutorial es muy sencilla, ya que solo usa tres elementos y lo demás son meras repeticiones de otro. A continuación os pongo el código CSS completo y luego lo desgloso:

#socialize {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
}
#share-twitter {
	background: url('/.../twitter.gif') 0 50% no-repeat;
	padding-left: 20px;
}
#share-digg {
	background: url('/.../digg.png') 0 50% no-repeat;
	padding-left: 20px;
}
#share-reddit {
	background: url('/.../reddit.png') 0 50% no-repeat;
	padding-left: 20px;
}
#share-delicious {
	background: url('/.../delicious.png') 0 50% no-repeat;
	padding-left: 20px;
}
#share-stumbleupon {
	background: url('/.../stumbleupon.png') 0 50% no-repeat;
	padding-left: 20px;
}
#share-feed {
	background: url('/.../feed_balloon.png') 0 50% no-repeat;
	padding-left: 20px;
}
.sep {
	padding: 0 5px;
	color:#ccc;
}

El elemento #socialize será el contenedor de todos nuestros enlaces y podremos modificarlo a nuestro gusto, tanto si queremos aumentar el tamaño de la fuente como cambiarle el color.

El elemento que lleva como prefijo #share- será el identificador que llevará cada uno de nuestros enlaces a la hora de implementar el código HTML.

El elemento .sep será el elemento que separará cada uno de nuestros enlaces y lo añadiremos al final de cada uno de ellos.

3. Código HTML

Ahora tan solo tendremos que añadir el siguiente código HTML entre las etiquetas body de nuestra plantilla:

<div id="socialize">
<a id="share-delicious" target="_blank" href="http://del.icio.us/post?url=URL_DE_TU_NOTICIA&title=TITULO_DE_TU_NOTICIA">Delicious</a>							
<span class="sep">&#124;</span>
<a id="share-digg" target="_blank" href="http://digg.com/submit?phase=2&url=URL_DE_TU_NOTICIA&title=TITULO_DE_TU_NOTICIA">Digg</a>
<span class="sep">&#124;</span>
<a id="share-reddit" target="_blank" href="http://reddit.com/submit?url=URL_DE_TU_NOTICIA&title=TITULO_DE_TU_NOTICIA">Reddit</a>
<span class="sep">&#124;</span>
<a id="share-stumbleupon" target="_blank" href="http://www.stumbleupon.com/submit?url=URL_DE_TU_NOTICIA&title=TITULO_DE_TU_NOTICIA">StumbleUpon</a>
<span class="sep">&#124;</span>
<a id="share-twitter" target="_blank" href="http://twitter.com/home?status=URL_DE_TU_NOTICIA">Twitter</a>
<span class="sep">&#124;</span>
<a id="share-feed" href="URL_DE_NUESTROS_FEEDS">Feeds RSS</a>
</div><!-- #socialize -->

Podéis comprobar que a cada enlace a: le hemos añadido su respectivo identificador id=”share-…” y lo hemos separado del siguiente mediante el elemento .sep.