Debido al enorme desarrollo en la actualidad de las redes sociales, es muy importante proporcionar a los usuarios vínculos en las páginas web y blogs, que faciliten y permitan compartir el contenido de las mismas en redes como Facebook y Twitter.
No menos importantes son otras redes como MySpace, Tuenti, Badoo, etc. pero en este artículo nos enfocaremos solo en las anteriores, no obstante el método es válido para emplearlo con cualquier red o sitio con solo unas pequeñas modificaciones.
Los programadores de Facebook y Twitter proporcionan a los desarrolladores, scripts que al insertarlos en el código de las páginas, crean en estas al ser cargadas, los links y vínculos necesarios. De todos son conocidos los famosos widgets utilizados para este fin.

¿Por qué no utilizar los códigos de Facebook y Twitter?

La gran desventaja de usar estos scripts, es que para representar y escribir el código necesario establecen una conexión con el sitio web original, esto representa una carga adicional para la página e innecesaria como veremos.
De todos es conocido, por las declaraciones de Google, que recientemente se ha sumado a los factores que son tomados en cuenta para el rankeo de una página web y la asignación del PageRank, la velocidad de carga de las páginas web, de ahí que todos estemos valorando los factores que no sean imprescindible y hagan nuestras páginas y sitios web más lentos.
Si estas preocupado por optimizar la carga de tus páginas y lograr disminuir el tiempo necesario, el siguiente método te interesará.

Solución para no utilizar los scripts de compartir en Facebook y Twitter

Consiste en crear los vínculos o links aprovechando las bondades que nos proporciona Javascript, están inertes hasta que el usuario da un clic en el enlace, entonces se establece la conexión con el sitio (las redes en este caso) y se adiciona a la dirección web para compartir, la URL de nuestra página más el título. Tanto la dirección URL como el titulo son extraídos automáticamente por las funciones necesarias de javascript.
Es decir no se establece en lo absoluto conexión con la red social, hasta tanto no se envíe la solicitud por el usuario.

Script original para compartir una página en Facebook

El script elemental proporcionado por los desarrolladores de Facebook es el siguiente:

<a name="fb_share"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

En este caso se necesita establecer una conexión para renderizar el botón en la página, te darás cuenta que aunque no se emplee dicho botón, siempre se establecerá la conexión con la dirección indicada.
Debes de saber que cualquier script que se encuentre embebido en la página hará que esta no terminara de cargar hasta tanto se ejecute dicho script, por lo que si en ese momento la conexión con Facebook se ralentiza, tu página se quedará colgada.
Existen otras opciones para crear diferentes botones, algunas son:

<a name="fb_share" type="box_count" share_url="DIRECCION_URL"></a> 
<a name="fb_share" type="button_count" share_url=" DIRECCION_URL "></a> 
<a name="fb_share" type="button" share_url=" DIRECCION_URL "></a> 
<a name="fb_share" type="icon_link" share_url=" DIRECCION_URL ">Share</a> 
<a name="fb_share" type="icon" share_url=" DIRECCION_URL"></a>

Mas informacion en: Botones para compartir en Facebook

Script alternativo para crear un vínculo para compartir una página en Facebook

Solo vamos a hacer uso de otro script proporcionado por Facebook, en el que se tiene que especificar manualmente la dirección URL de la página a compartir y su título, pero que no es necesaria la conexión preliminar con dicho sitio, es el siguiente:

http://www.facebook.com/sharer.php?u=<URL a compartir>&t=<titulo de la pagina>

Es muy engorroso en cada página en que se inserte dicho código, especificar la dirección URL y el título manualmente, por eso haremos uso de javascript que se encargará de insertar los dos parámetros de forma automática. También es necesario codificar los parámetros.
Usa cualquiera de los dos siguientes métodos.

1- Script que crea las variables de la dirección y el titulo y las codifica.
Vínculo que utiliza las dos variables e inserta su valor en la dirección necesaria:
2- En este otro método se une todo en un solo código que lo hace más sencillo y manuable:
Quedaría el vínculo de la siguiente forma, pruébalo: Compartir en Facebook

Si quieres utilizar una imagen como botón puedes hacerlo de la siguiente forma:
Un ejemplo:

---

Script original para compartir una página en Twitter

El script elemental proporcionado por los desarrolladores de Twitter es el siguiente:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

Este código inserta un sencillo botón, es necesaria la conexión previa a Twitter para asegurar la carga del widget que se mostrará pero que es innecesaria.
Para evitar esto se puede utilizar un botón o imagen almacenada en nuestro sitio, que persistirá en la cache del navegador del usuario, desde que se carga cualquier página de nuestro sitio que lo porte por primera vez.

Script alternativo para crear un vínculo para compartir una página en Twitter

Con Twitter ocurre la misma situación y podemos aplicar el mismo método, solo hay que hacer un ligero cambio en el código a utilizar.
De la misma forma que en Facebook utiliza una de las dos opciones.

1- Primera opción, dos códigos:
2- Segunda opción, los dos códigos en uno. Quedaría el vínculo de la siguiente forma, pruébalo:

---

Botón para compartir una página en Google+

Google+, la reciente red social de Google, sea cual sea su éxito en el futuro, es importante para los que dependemos de Google para el posicionamiento de nuestras páginas.
Podemos crear un botón fácilmente, el cual se cargue automáticamente de los servidores de Google o de nuestro servidor, en este caso serán necesarias menos peticiones, por lo que será más rápida la carga de nuestra página.
Puedes utilizar los códigos siguientes para las dos opciones que se mencionan.
Síguenos en Google+: <a href="https://plus.google.com/108141328258087945339/"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" style="padding-top:4px;" width="32" height="32" alt="Compartir en Google+" title="Da un clic para entrar en Google+" /></a>
Síguenos en Google+: <a href="https://plus.google.com/108141328258087945339/"><img src="../img/icon/gplus-32.png" style="padding-top:4px;" width="32" height="32" alt="Compartir en Google+" title="Da un clic para entrar en Google+" /></a>
Quedaría el vínculo de la siguiente forma, pruébalo:

Síguenos en Google+:

---

Comprobar y medir la velocidad de carga de las páginas

Puedes hacer las pruebas necesarias para analizar la velocidad de carga de las páginas antes y después de insertar los códigos y te sorprenderás de la mejoría.
Accede a: Gtmetrix en la red o usa si tienes instalado Page Speed de Google en tu navegador web. Tambien está disponible Page Speed Online.
Es posible usar el mismo sistema para crear los vínculos que permitan compartir una página en otras redes sociales.

---

Páginas relacionadas