Botones para compartir en Facebook y Twitter

       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:





       Facebook


       Es tan sencillo como poner un link a la siguiente dirección:

       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:

       Twitter


       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:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.blog.tictacsoluciones.com" data-via="Tictac_si" data-lang="es">Compartir en twitter</a>
<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>

       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.