NorfiPC
NorfiPC » Diseño web » Enlaces de compartir

Como crear enlaces para compartir una página en Facebook, Twitter y Google+

Códigos para crear los botones y links que faciliten al lector compartir el contenido de nuestras páginas en las redes sociales como Facebook, Twitter, Google+ y otras. Alternativas prácticas a los scripts y Widgets tradicionales con Iframes o en Javascript, que retardan considerablemente y entorpecen la carga de las páginas.
Crear un boton para compartir y recomendar la pagina en las redes sociales
Debido al enorme éxito y expansión de las redes sociales, es muy importante proporcionar a nuestros lectores opciones en las páginas web y blogs, para que puedan compartir y sugerir el contenido de las mismas, con sus amigos en redes como Facebook, Twitter, Google+ y otras.
Los programadores de estas redes proporcionan scripts, que al insertarlos en el código de las páginas escriben al ser cargadas, los links, botones y vínculos necesarios.
De todos son conocidos los famosos widgets utilizados para este fin.
En esta página puedes conocer cómo utilizarlos y otras alternativas posibles, que pueden ser mucho más eficientes.
A partir del 10 de julio del 2013 es necesario que todas las páginas que incluyan el código para escribir de forma automática el botón "Me gusta", tengan el parámetro DATA-HREF con la dirección URL de dicha página. Si no se actualiza el código, el botón no cargará correctamente. Lee más abajo como hacerlo.



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


La 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 se ha sumado a los factores que son tomados en cuenta para el ranking 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 imprescindibles y puedan hacer nuestras páginas y sitios web más lentos.
Otra desventaja es que tenemos que ajustarnos a los botones predeterminados, a algunos nos interesa usar una imagen, texto u otro elemento, para dar la opción de compartir de una forma personal.
Si te gustó, ¡Comparte esta página en Facebook!

Crear vínculos personalizados para compartir las páginas


Crear un boton para compartir y recomendar la pagina en Twitter La solución 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 título de la página, son extraídos con Javascript.
Es decir no se establece en lo absoluto conexión con la red social, hasta tanto no se haga la solicitud por el usuario.
En esta página tienes varios ejemplos, todos utilizan el mismo sistema.



Códigos para compartir las páginas en Facebook


Script original para compartir una página en Facebook


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

El script carga un archivo Javascript desde Facebook para renderizar el botón, el contador de los "Me Gusta", iconos de los usuarios y otros elementos en la página.
Las últimas versiones funcionan de forma asíncrona, es decir el archivo se descarga por partes sin afectar el rendimiento, ni la carga de los elementos de la página.
Esto no sucede con otros scripts disponibles en internet que son un peligro ya que el renderizado (escritura de los elementos HTML del body) no continuará hasta tanto no se descargue completamente el script insertado.
Si en ese momento no está disponible el servidor web donde se alojan, tu página se quedará colgada.



¿Cómo usar el código?

La primera sección del código se inserta en cualquiera parte de la página.
El contenedor DIV se inserta donde se desea mostrar el botón "Me gusta".
Pueden usarse varios en una misma página.
Es posible agregarle otros parámetros para configurar la forma en que se muestra el botón y agregarle otras funcionalidades.
Ejemplos:

El parámetro DATA-HREF
<div class="fb-like" data-href="http://norfipc.com/pagina.html"></div>
El parámetro DATA-HREF con la dirección URL de la página es imprescindible.
A partir del 10 de julio del 2013 en las páginas que el código no posea este parámetro, no cargará correctamente el botón "Me gusta".

El parámetro DATA-WIDTH
<div class="fb-like" data-href="http://norfipc.com/pagina.html" data-width="292"></div>
Con el parámetro "data-width" se limita el ancho del widget a 290 pixeles, para que se adapte al ancho de la pantalla de los teléfonos celulares y no aparezca la molesta barra de desplazamiento horizontal.
El ancho predeterminado del widget es de 450 pixeles.

El botón Enviar
<div class="fb-like" data-href="http://norfipc.com/pagina.html" data-width="292" data-send="true"></div>
Con el parámetro data-send="true" se escribe adicionalmente el botón "Enviar" para que los usuarios puedan enviar la página a una persona especifica en Facebook.

Ejemplo de los botones "Me gusta" y "Enviar" insertados en esta sección de la página, con las especificaciones anteriores:

¿Cómo usar el botón "Me Gusta" en las imágenes?

Los botones "Me gusta" y "Enviar" pueden también usarse en distintas imágenes de las paginas, para permitir que los lectores puedan compartirlas en su página de perfil de Facebook y enviarlas a una persona específica, aunque no sean amigos.
Para eso usa el siguiente código:
<div class="fb-like" data-href="http://ruta-imagen.jpeg" data-layout="button_count" data-send="true"></div>




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


Una alternativa para mostrar los botones o vínculos para compartir una página, es insertar un vínculo que lo haga posible manualmente a petición del usuario.
Es un simple vínculo en HTML al que se le agrega un parámetro.
La sintaxis es la siguiente:
http://www.facebook.com/sharer.php?u=<URL a compartir>&t=<titulo de la pagina>
Un ejemplo práctico seria:
<a href="http://www.facebook.com/sharer.php?u=http://norfipc.com&t=NorfiPC">Compartir en Facebook</a>
La desventaja es que puede resultar muy engorroso en cada página en que se inserte dicho código, especificar la dirección URL y el título manualmente, pero es posible usar Javascript para facilitar dicha tarea.
Un script se encargará de insertar los dos parámetros de forma automática.
Usa para eso 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:
Dos ejemplos:

Compartir Compartir



Códigos para compartir las páginas en Twitter


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 y muestra la cantidad de tweets recibidos por una página.
Es necesaria la conexión previa a Twitter para asegurar la carga del widget.
No se usa la carga síncrona como en el caso del script de Facebook, por lo que en caso de no existir disponibilidad de los servidores de Twitter, quedará colgada nuestra página.

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, usar dos códigos:


2- Segunda opción, los dos códigos en uno.
Quedaría de la siguiente forma: Compartir

Codigo para crear un vínculo para que nos sigan en Twitter


De la misma forma puedes crear un sencillo vínculo en HTML que conduzca a tu página de Twitter, para animar a tus lectores a que se conviertan en seguidores.
Utiliza un código similar al siguiente:

Si usamos una imagen, le daremos más vista y habrá más posibilidades que los lectores den un clic. Quedaría de la siguiente forma (puedes descargar y utilizar la imagen en tu página).
NorfiPC en Twitter



Códigos para compartir las páginas en Google+


Google+ o Google Plus, la reciente red social de Google, es una de las redes más importantes en la actualidad para el posicionamiento web de cualquier sitio de internet.
Compartir una página en dicha red nos da una referencia valiosa para nuestro sitio.
Los links así creados puedes comprobarlos al paso de unos días en las Herramientas para WebMasters, en la sección de "Vínculos a tu sitio", los encontrarás como provenientes de www.gooogle.com.
Si ya has agregado el script de +1 a tus páginas, este permite a los lectores las dos funciones, dar un voto y compartir dicha página.
Si aún no lo has agregado puedes encontrar el script en: Botón +1
No obstante puedes copiarlo aquí mismo en el siguiente cuadro de texto:


Vinculo para compartir una página web en Google+


Si no deseas agregar a tus paginas código Javascript que las haga más lenta, siempre existe la opción de compartir una página con un sencillo vinculo en HTML.
El código necesario es el siguiente:
<a href="https://plus.google.com/share?url=DIRECCION URL DE TU PAGINA">Compartir en Google+</a>
Otra opción es agregarle solo algo de Javascript para que detecte automáticamente la dirección URL de la página, de esta forma el mismo código podrás utilizarlo en cualquier página de tu sitio.
Usa el siguiente código.

Vinculo para compartir una página web en Google+
Podrás sustituir el clásico "Compartir en Google+", por una imagen como yo hago en mis páginas, puedes ver el ejemplo más abajo.

Botón para promocionar y facilitar el acceso a nuestra página de Google+


Por la importancia que hablábamos anteriormente, se recomienda que todas las páginas incluyan un vínculo a tu página en Google+. De esa forma podrás ganar seguidores entre tus lectores.
Para eso puedes crear un sencillo vínculo en HTML que conduzca a tu página en Google+.
Usa el siguiente código para eso:

Puedes sustituir el texto del vínculo por el logotipo de Google+ y cargar la imagen directamente de los servidores de Google.

Quedaría el vínculo de la siguiente forma, pruébalo:
Compartir en Google+ Síguenos en Google+
Descarga un paquete con todos los logos oficiales de Google+ para usarlos en tus páginas.
Logotipos de Google+

Compartir cualquier página de internet usando marcadores y Bookmarklets


¡Ojo! En ocasiones los botones, links o widgets no son completamente efectivos.
Tenemos que tener en cuenta que nuestros lectores acceden a nuestro sitio usando dispositivos diferentes y a veces la calidad de la conexión es pésima.
Debemos de informarles que es posible usar medios alternos como son los marcadores y Bookmarklets en su navegador, que permitan compartir y sugerir cualquier página.
De ellos preferimos los marcadores, debido a la facilidad de su uso y que no son necesarios de instalar como sucede con las extensiones.
En otro artículo de este sitio tratamos esta posibilidad y desde él los lectores pueden guardar los marcadores para usarlos en las principales redes sociales.
Lée el articulo y compártelo con tus lectores en: Publicar lo que encontramos en internet en Facebook y otras redes sociales

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.

Crear los botones Pin it de Pinterest en un blog o página web


Conoce en otro artículo de nuestro sitio como insertar los botones de Pin it en nuestras páginas, para lograr que nuestros lectores puedan pinear y publicar en sus tableros en Pinterest las imágenes de nuestros artículos y de esa forma mejorar el posicionamiento y aumentar la cantidad de visitantes. Como insertar los botones Pin it de Pinterest en un blog o página web

Compartir en otras redes sociales


Para publicar contenido, sugerir y publicar enlaces en otras redes sociales, lee las siguientes páginas:

Páginas relacionadas