Hay muchas herramientas que nos dejan incrustar en nuestra página botones de compartir para decenas de páginas. Pero si queremos hacer unos botones personalizados, vamos a mostrar una forma sencilla de hacerlo para facebook y twitter.
Ejemplo sencillo:
<a style="color: #e3778f;" href="http://www.facebook.com/sharer.php?u=https://www.tictacsoluciones.com&t=Blog%20de%20Tictac" target="_blank" rel="noopener">Compartir este blog en Facebook</a>
<span style="color: #e3778f;"><a class="twitter-share-button" style="color: #e3778f;" href="https://twitter.com/share" data-lang="es" data-url="http://www.blog.tictacsoluciones.com" data-via="Tictac_si">Compartir este blog en Twitter</a></span>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
Es tan sencillo como poner un link a la siguiente dirección:
http://www.facebook.com/sharer.php?u=https://www.tictacsoluciones.com
Con el parámetro u especificamos el link al recurso a compartir. Entonces por el funcionamiento de facebook, cargará la página e intentará sacar información de ella, como título, texto o imagen. Le podemos facilitar esta labor si hemos incluido metadatos open graph en ella.
Este link puede dar problemas de codificación (con : // (), espacios,…), aunque los navegadores suelen resolverlo bien, recomiendo pasar la dirección del parámetro u por una función de codificación de URL, por ejemplo en php urlencode y en javascript encodeURIComponent.
Podemos especificar un título para el elemento compartido directamente en el enlace, con el parámetro t:
http://www.facebook.com/sharer.php?u=http://www.blog.tictacsoluciones.com&t=Blog%20de%20Tictac
En el caso de Twitter lo que recomiendo es usar su página para generar un botón personalizado:
Si queremos hacerlo a mano, como en el caso de facebook tendríamos que poner un enlace a la siguiente dirección:
Poniendo como atributo data-url a donde queremos enlazar. Si no ponemos nada coge la dirección en la que se pulsa el enlace. Después hay que poner un trocito de javascript. Un ejemplo completo podría ser:
<div style="margin-bottom: 0cm;"><a href="https://twitter.com/share"> class="twitter-share-button"
data-url="</a><a href="http://www.facebook.com/sharer.php?u=https://www.tictacsoluciones.com">https://www.tictacsoluciones.com</a><a href="https://twitter.com/share">"
data-via="Tictac_si" data-lang="es">Compartir
en twitter</a></div>
<div style="margin-bottom: 0cm;"><script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
Además en la propia página de Twitter podemos elegir opciones para poner un texto como parte del Tweet sugerido, con etiquetas, idioma, etc.
Muy bien ! me sirvió gracias… y buen blog
No hay posibilidad que el URL de facebook se coloque sólo, como lo hace twitter? hay Pagínas que se van autogenerado como un Blog y colocar el link manualmente de cada pagina es un problema
Aquí se enseña cómo hacerlo a mano, se puede generar automáticamente (y que el diseño siga siendo a mano) usando php o javascript, según se prefiera hacer en servidor o cliente. Si es para un blog tipo wordpress o blogger, seguramente lo más sencillo es buscar un complemento en el que venga ya hecho, y darle un poco de estilado a nuestro gusto, y así nos ahorramos programarlo.
Respecto a la forma de hacerlo con javascript, facebook da el código de una en su página, en inglés, pero el trozo de código que coge la URL con el objeto location en javascript es bastante claro.
https://developers.facebook.com/docs/reference/plugins/share-links/