Redes sociales y posicionamiento web

Las redes sociales han supuesto una revolución en la manera de relacionarnos, comunicarnos e incluso a la hora de hacer negocios y realizar posicionamiento web. La red social más visitada en el mundo es Facebook, pero también se utilizan Twitter, Messenger, Linkedin,  Technorati, Tumbleupon, entre otras. En el siguiente gráfico  de Google Trends te presento los datos de búsquedas de redes sociales en todo el planeta.

Los resultados obtenidos en Google Trends, para un periodo de tiempo de 8 años, muestran la tendencia imparable de Facebook en todo el mundo, inclusive es mas popular que Google. El crecimiento de la popularidad de Twitter es constante pero lo hace muy lentamente. Por su parte  Messenger que en el pasado fue muy popular, actualmente ha decrecido en volumen de búsquedas, incluso sigue decreciendo progresivamente.

El resultado por países arroja que las búsquedas de Facebook es popular más en Turquía con un puntaje de 100, seguido de Túnez, Venezuela y Colombia.

Este artículo llama a reflexionar sobre el uso de la redes sociales en el posicionamiento web, existe un sinnúmero de estos sitios a los cuales podemos compartir el contenido que publicamos en nuestros blog, generando un volumen importante de enlaces entrantes, con ello conseguiremos aumentar el número de visitas. Una de las estrategias que utilizo para el posicionamiento de la palabra clave seorimícuaro es enviar enlaces a algunas redes sociales utilizando los servicios de Onlywire y Social Marker. Onlywire durante un tiempo fue totalmente gratis, pero ahora es de pago, pero nos permite realizar envíos a 5 marcadores en forma gratuita. Por su parte Social Marker es de uso libre y algo manual y nos permite publicar contenido en 17 redes sociales.

Nos vemos en la próxima seorimícuaro entrada.

Botones para compartir con CSS

El CSS es una de las herramientas más útiles y prácticas que podemos usar en nuestras páginas web. Nos permiten definir el aspecto de cada uno de los elementos que conforman nuestra página web. Con CSS podemos personalizar la forma de presentar márgenes, el texto, elementos individuales, alineaciones, en fin podemos modificar una infinidad de aspectos para mejorar la presentación de nuestra página web o blog.  Los botones creados con CSS, al no utilizar imágenes,  reducen la cantidad de peticiones de ficheros al servidor, esto mejora significativamente la velocidad de carga de nuestro sitio y por tanto mejora el posicionamiento web.

Para obtener botones para compartir con CSS como se muestra en la figura siguiente, debemos seguir los pasos que se enumeran a continuación.

Paso 1. Agregar un elemento HTML/javascript en la sidebar y luego pegar el siguiente código. Solo tienes que reemplazar el texto resaltado en verde con el nombre correspondiente de ID de la página de google +, página de Facebook, Usuario de Twiter y el nombre del blog.

<div class="iconos sociales">
<ul id="iconos">
    <li class="google"><a rel="author" title="También en Google+" href="https://plus.google.com/páginaGoogle">Google</a></li>
    <li class="facebook"><a title="Mi  blog en blogger en Facebook"href="http://www.facebook.com/paginaFacebook">Facebook</a></li>
    <li class="twitter"><a title="Síguenos en Twitter" href="http://twitter.com/UsuarioTwitter">Twitter</a></li>
    <li class="rss"><a title="RSS feed" href="http://NombredelBlog.blogspot.com/feeds/posts/default">RSS</a></li></ul>
</div>

Paso 2. Nos vamos a la plantilla y antes del </head> pegamos el siguientes estilo.

ul#iconos { list-style:none; padding:0 0 0 5px; margin:10px auto;  width:180px; overflow:hidden;font:0.219em/1 Arial, sans-serif;}
ul#iconos li { float:left;   width:33px;  height:33px;   margin:10px 10px 0 0; }
ul#iconos li a {display:block; width:31px; height:31px; overflow:hidden; border:1px solid #ffffff; line-height:32px; text-decoration:none;   -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
-webkit-box-shadow: -1px -1px 0px rgba(0,0,0,0.5); -moz-box-shadow: -1px -1px 0px rgba(0,0,0,0.5); box-shadow: -1px -1px 0px rgba(0,0,0,0.5);   -moz-border-radius:5px;  -webkit-border-radius:5px;  border-radius:5px; }
ul#iconos li a:hover,ul#iconos li a:focus, ul#iconos li a:active {-moz-opacity:1; filter:alpha(opacity=100); opacity:1;  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0); -moz-box-shadow: 0 0 0 rgba(0,0,0,0);  box-shadow: 0 0 0 rgba(0,0,0,0);}
/* Google */
.google a {position:relative;text-transform:lowercase; text-indent:6px;letter-spacing:20px;    font: 32px/22px Georgia, Times New Roman, Times, serif; line-height:22px !important;color:#fff; background:#C9B0B0;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.google a:before {content:&quot;+&quot;;position:absolute;right:0;top:0;width:11px;text-indent:0;text-align:right;font-size:14px;color:#fff;}
.google a:hover {background:#BA4428;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
/* Facebook */
.facebook a {position:relative;text-transform:lowercase;text-indent:17px; letter-spacing:5px;font-weight:bold; font-size:32px;line-height:33px;color:#fff; background:#C9B0B0;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.facebook a:hover {background:#3B5998;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
/* Twitter */
.twitter a {position:relative;text-transform:lowercase;text-indent:10px;letter-spacing:240px;    font: bold normal 30px Tahoma, sans-serif;line-height:28px;color:#ffffff;background:#C9B0B0;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.twitter a:hover { color:#76DDF8;background:#daf6f7;text-shadow: 1px 1px white, -1px -1px white,2px 2px white,-2px -2px white, 3px 3px white,-3px -3px white;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
/* Rss */
.rss a {position:relative;width:30px; padding:0 1px; text-transform:lowercase; text-indent:-93px; font-size:32px; font-weight:bold; color:#fff; background:#C9B0B0;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.rss a:hover {background: #FD7527;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.rss a:before,
.rss a:after { content:&quot;&quot;; position:absolute; bottom:5px; left:5px;}
/* círculo */
.rss a:before {width:6px;height:6px;background:#fff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;border-shadow: 0px 1px 0px rgba(255,255,255,0.8);}
/* 2 arcos */
.rss a:after { width:11px; height:11px; border-style:double;border-width:12px 12px 0 0; border-color:#fff; -moz-border-radius:0 25px 0 0; -webkit-border-radius:0 25px 0 0; border-radius:0 25px 0 0;}
</style>

Con esto hemos agregado los botones para compartir con CSS de Google+, Facebook, Twitter y RSS utilizando solo CSS. también puedes revisar la entrada botones para compartir en blogger o botones flotantes con sprite

Nos vemos en la próxima seorimícuaro entrada de posicionamiento web.

Botones flotantes con sprite

Con la idea de colocar botones flotantes para compartir en redes sociales como los que tiene oloman, después de trabajarle hasta la madrugada me encontré con un post de Jmiur sobre los llamados Sprites. Los sprites son un conjunto de imágenes agrupadas en un solo archivo, a cada una de ellas se accede mediante un desplazamiento respecto del borde superior izquierdo, cota (0,0), y sus dimensiones absolutas, fue allí donde empecé a entender el truco de oloman. A los sprites se le considera un método de agrupación de imágenes que, posteriormente, pueden ser tratadas de forma independiente con CSS.  Resulta que al utilizar sprites las imágenes se cargan mucho mas rápido que cargar varias imágenes pequeñas, lo que es importante en la optimización de mi web para el posicionamiento de seorimícuaro.

A diferencia de la entrada Botones para compartir flotantes donde utilizo varias imágenes para enviar entradas a diferentes marcadores, en esta entrada solo utilizo una sola imagen que contiene los diferentes iconos de la redes sociales, ustedes podrán apreciar la seorimícuaro diferencia.

Para ilustrar como generar botones flotantes con el uso de sprites para enviar entradas a las redes sociales procedemos de la siguiente forma.

Paso 1. Expandimos plantilla de artilugio y buscamos <b:includable id='post' var='post'>

Paso 2. Debamos pegamos el siguiente código.
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<style>

.mbt_social_floating{ position:fixed; bottom:10%; margin-left:-60px; float:left;  width:26px; background-color:#f7f7f7; padding: 5px 0 0px 0px; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; z-index:9999px !important;
    border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; min-height: 216px; }
 

#portamento_container {position: absolute;  margin: 0 0 0 12px;}#portamento_container .social.fixed { position:fixed;}
.social { position: relative; display:none; width:24px;padding: 1px; }

a[class^=&#39;botred&#39;] {width: 24px; height: 24px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguubVu1_PLG7Qd2cdLBIIEtldY1H2O3Y1smXXIAUBbBxNEJzDzcO8HOVF8JqvkMYVTptAt8UKfwdF6LV2K7C6Nn-ViEvsk-fOjdIsPIZMfwaZmA-adD2VXqK35FLqNg81MVEMvbKXIp_4/s240/Iconos-redes-sociales.jpg); float: left; margin: 2px 0 ; text-indent:-9000px;overflow: hidden;border: 1px solid #ddd;border-radius:4px;-moz-opacity:.70; filter:alpha(opacity=70); opacity:.70; }

a:hover[class^=&#39;botred&#39;] {border-color:#333;box-shadow:0 0 3px #cccccc;-moz-opacity:1; filter:alpha(opacity=100); opacity:1; }

a:hover.botredgoogle {background-position: 0px 0px;}a.botredgoogle {background-position: 0px -24px;}
a:hover.botreddivoblogger {background-position: -24px 0px;}
a.botreddivoblogger{background-position: -24px -24px;}
a:hover.botredbitacoras {background-position: -48px 0px;}
a.botredbitacoras {background-position: -48px -24px;}
a:hover.botredfriendfeed {background-position: -72px 0px;}
a.botredfriendfeed {background-position: -72px -24px;}
a:hover.botredtumbleupon {background-position: -96px 0px;}
a.botredtumbleupon {background-position: -96px -24px;}
a:hover.botredfacebook {background-position: -120px 0px;}
a.botredfacebook {background-position: -120px -24px;}
a:hover.botredtwitter {background-position: -144px 0px;}
a.botredtwitter {background-position: -144px -24px;}
a:hover.botredpinterest {background-position: -168px 0px;}
a.botredpinterest{background-position: -168px -24px;}
a:hover.botredimpresora {background-position: -192px 0px;}
a.botredimpresora {background-position: -192px -24px;}
a:hover.botredemail {background-position: -216px 0px;}
a.botredemail {background-position: -216px -24px;}
</style>


<div class='mbt_social_floating'>
   <!-- google+--><a class='botredgoogle' href='https://plus.google.com/111845617295935089944/?prsrc=3' rel='nofollow' style='text-decoration: none;' target='_blank'><img height='24' src='https://ssl.gstatic.com/images/icons/gplus-32.png' style='border: 0;' width='24'/></a>
<!--Facebook-->
<a class='botredfacebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartir en Facebook'> Compartir en Facebook </a>
<!--Tuitter-->
<a class='botredtwitter' expr:href='&quot;http://twitter.com/home?status=&quot;+ data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartelo Twitter'>Compartelo Twitter</a>
<!--bitacoras-->
<a class='botredbitacoras' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' title='Vota en bitácoras'>Vota en bitácoras</a>
<!--Printeres-->
<a class='botredpinterest' href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Haz Pin'>Haz Pin</a>
<!--tumbleupon-->
<a class='botredtumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartelo en tumbleupon'>tumbleupon</a>
<!--friendfeed-->
<a class='botredfriendfeed' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartelo en friendfeed'>friendfeed</a>
<!--imprimir-->
<a class='botredimpresora' href='javascript:window.print();' title='Imprimir artículo'>Imprimir artículo</a>
</div></b:if></b:if>

Los botones solo se mostrarán en las entradas individuales, las que deseamos que sean compartidas por nuestros lectores con sus amigos. El resultado obtenido es el siguiente.



Nos vemos en la próxima seorimícuaro entrada…No pierdas la oportunidad de compartir las entradas de este blog con tus amigos.

Botones para compartir flotantes

Existe una tendencia de usar de botones flotantes para compartir post en diferentes redes sociales, que siempre estén en la vista para que los usuarios compartan y se genere mayor tráfico al blog, lo cual es muy importante en el posicionamiento que realizo con seorimícuaro. Este widget está diseñado para que se quede fijo en la parte izquierda de su blog, con esto tienes una ventaja, a que cualquier visitante de clic en algún y comparta el post con sus amistades. A mi siempre me ha gustado como los presenta Oloman, pero en esta oportunidad me basé en el código utilizado en blog ayudadeblogger pero con la diferencia que no utilicé AddThis por los recursos que esto pudiera consumir, lo que me perjudicaría en el posicionamiento de seorimícuaro.

Lo importante de este método es que no utilizo ningún script, solo html y CSS, por lo que no afecta la velocidad de cargue del blog, esto es muy importante, pues se dice que la velocidad de carga es tenida en cuenta en el posicionamiento. Los dejo con mi seorimícuaro trabajo 24 horas.

Paso 1. Busco el código <b:includable id='post' var='post'>

Paso 2. Peso el siguiente código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;
    width:30px;
    background-color:#f7f7f7;
    padding: 5px 0 0px 0px;
    border-top:1px solid #ddd;
   border-left:1px solid #ddd;
   border-bottom:1px solid #ddd;
   z-index:9999px !important;
   border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
   min-height: 160px;
   }
</style>
<div class='mbt_social_floating'> 
  <!—google +-->
<a class='st_google+' href='https://plus.google.com/111845617295935089944/?prsrc=3' rel='nofollow' style='text-decoration: none;' target='_blank'><img height='24' src='https://ssl.gstatic.com/images/icons/gplus-32.png' style='border: 0;' width='24'/></a>
<!--Facebook-->
<a class='fblike' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUALszS-dYGT8f78qGw19ERefhbeB_FwgXnFeA1Mu6b5UP_VGWrWnc25wQZBPnLjyFnv9umsg0mr6eiYyzrgTu0oIoU41pfwb-LX8iF6yAsfAP-69n54qcv58M64aFUOzi_ZYUAV85bGE/s800/facebook.png&quot;' style='border:2;height:24px;'/></a>
<!--Twitter-->
<a class='.st_twitter' expr:href='&quot;http://twitter.com/home?status=&quot;+ data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96POKqf5hd1aYe_KTQA2wA6BCFjyionA3HLsll8SyIhB5Sx5Dtg96Sw433F8QKT0ZrIQyR8gJSL56k7Xs_ff1XsBlN68ciaSXE5UC_7e_nECUKdlZCBj9bO3kfyQQRMs9-U8hYQXdGgk/s800/twitter.png&quot;' style='border:2;height:24px;'/></a>
<!--Bitacoras-->
<a class='.st_botredbitacoras' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' title='Vota en bitácoras'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjhSSNpRqB4Fy5ROtjB2RGCooUXkOyCJYQev-V-C5x7tuHdbNvZZFWjq7c1O842j3ntv0VNwhTj7T_beju8pVmNhxk2p947Ve5uAThiwK0ESIUZeBMjwc86rsvAevVvWGFYCX6UYUzTA/s128/descarga.jpg&quot;' style='border:2;height:24px;'/></a>
<!--tumbleupon-->
<a class='.st_tumbleupon ' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJj-xHECKU4958IpDyJ7wuBtIZ4oRfswwPu-4UvHTyEY8lt3o4ekVn295Z0K6AN6vQq5LZdxB9s1qo_TGXCKoKozc9n-3X9iG18t0xsjyqayHbFloMxk1PCwaalRxxD2HoQiq__sfe4LM/s800/stumbleupon.png&quot;' style='border:2;height:24px;'/></a>
<!--friendfeed-->
<a class='.st_friendfeed' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img expr:src='&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOsHgemQxYSqnKFIxSx2u_cKSe5yPLrIcx1XCDroDkw9eOV_u3HT8JSCkFgscvGSep5fJA3c-juRWmSf1Mqc63UP1Kqp05xBCUHVl2zXbzRmD5e4dYd8h7ObSWPFm83P3HHkMUgEVWjSU/s800/friendfeed.png&quot;' style='border:2;height:24px;'/></a>
</div>
</b:if></b:if>

Obtendrás el siguiente resultado.



Nos vemos en la próxima seorimícuaro entrada.