domingo, 3 de febrero de 2019

Añado botones para compartir el blog en algunas redes y otras opciones


Es hora de añadir algunas cosillas nuevas al blog :-) Lo primero será añadir botones para compartirlo en algunas redes sociales, y también la URL con un botón para copiarla al porta-papeles. Y además, enlaces a los perfiles de algunas de mis redes sociales.
¡Bufffff!, más de dos meses sin tocar el blog, ozú... :P  Bueno, he estado liado, también he tenido algunos problemillas(personales, de salud, técnicos...). Pero voy a seguir aquí contando mis rollos ^_^


Blogger ya tiene un sistema para compartir lo que son las entradas del blog en las redes sociales Facebook, Twitter y Pinterest. Pues yo voy a crear unos botones para compartir lo que es el blog en esas mismas tres redes, y además un botón para copiar la dirección del blog (la URL) y así poder pegarla en cualquier otra parte donde se desee compartir el blog :-)

El asunto es crear imágenes que sean enlaces, y además que cambien al pasar el puntero por encima (efecto rollover).

En HTML, para crear un enlace se utiliza la etiqueta <a> con su correspondiente cierre </a>. Este etiqueta puede contener parámetros, como pueden ser:
  • title, que es un recuadrito con texto que se mostrará al colocar el puntero encima.
  • href, que indica la URL que se abrirá.
  • target, que indica donde se abrirá (en la misma pestaña, en otra, en otra ventana...).

Entre las etiquetas de apertura y cierre, se puede colocar un texto, que se convierte en enlace, pero también se puede colocar una imagen, para lo que se utiliza la etiqueta <img>. Esta no tiene etiqueta de cierre, pero si que utiliza parametros:
  • src, que indica el la ruta y el archivo de la imagen.
  • onmouseover, sirve para indicarle la imagen que aparecerá al pasar el puntero del ratón.
  • onmouseout, que indica la imagen que se mostrará al quitar el puntero del ratón.
  • alt, que sirve para indicar un texto como alternativa en caso de que no se mostrara la imagen.
  • width, que indica el ancho de la imagen.
  • height, que indica el alto de la imagen.

Como URL le pasaré el código de Facebook para compartir, que es una página php donde se le añade al final la URL de la web a compartir:

https://www.facebook.com/sharer/sharer.php?u=https://unpuntoenlared.blogspot.com/


Las imágenes las he subido aquí mismo al blog, a una página que tengo sin publicar. La edito, añado la imagen y copio la URL de la misma haciendo clic con el botón derecho del ratón y seleccionando Copiar la dirección de la imagen.








Así pues, el código que yo necesito, para por ejemplo, el botón de Facebook, sería el siguiente:

<a title="Compartir en Facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A//unpuntoenlared.blogspot.com/" target="Blank"><img src="https://1.bp.blogspot.com/-ePoY8kN-tRw/XABuIAykI1I/AAAAAAAACw8/cMrQsLcKkSUAh97eETMom3VMCA9zTeIPgCLcBGAs/s1600/facebook_button.png" onmouseover="this.src='https://3.bp.blogspot.com/-u86NHzK8-Bo/XADzl5hxsfI/AAAAAAAACxc/mmBkmUyXbtgaIVt-VOtMteydmrNxh3w3ACLcBGAs/s1600/facebook_button_2.png'" onmouseout="this.src='https://1.bp.blogspot.com/-ePoY8kN-tRw/XABuIAykI1I/AAAAAAAACw8/cMrQsLcKkSUAh97eETMom3VMCA9zTeIPgCLcBGAs/s1600/facebook_button.png'" alt="Compartir en Facebook" width="78" height="auto"/></a>


Entre cada botón he añadido un espacio con el código &nbsp;

Como cabecera he añadido el título "¿Te gusta mi blog?, compártelo..." con la etiqueta <h3>.

Además de estros tres botones, también voy a añadir un campo de texto de solo lectura con la URL del blog más un botón para copiarlo al porta-papeles y poder insertarlo en cualquier otra parte donde se quiera compartir el blog. Para esto utilizaré la etiqueta input, que no tiene etiqueta de cierre y le pasaré los siguientes parámetros:
  • id, que es un identificador.
  • size, que es el tamaño.
  • type, que es el tipo (en este caso de texto, text).
  • value, que contiene el texto que quiero que tenga.
  • readonly, que indica que solamente es de lectura, no se puede modificar por el usuario.
<input id="miUrl" size="31" type="text" value="https://unpuntoenlared.blogspot.com/"  readonly />

Y para el botón , utilizaré la etiqueta <button></button>. Con los parámetros:
  • onclick, que es un evento el cual llamará a una función la hacer clic.
Y como contenido (entre las dos etiquetas) el texto: Copiar URL.

<button onclick="copyToClipboard()">Copiar URL</button>


Este botón llama a una función llamada copyToClipboard. Esta función la colocaré en el código de la plantilla del blog, dentro de la sección <head>.

Con esto ya tengo los botones para compartir en Facebook, Twiiter y Pinterest.


Ahora voy a colocar también unas imágenes más grandes que llevaran a mi perfil en cada una de esas mismas tres redes sociales.

Comienzo con una etiqueta de cabecera, <h3> para añadir un título con un texto más destacado que el normal.

Seguidamente meto todo el código entre las etiquetas <center></center> para que todo quede centrado.

El código es lo mismo que para los otros botones pero en este caso no utilizaré el efecto rollover.

<h3>Mis redes sociales</h3>
<hr />
<center>
<a title="Mi Facebook" href="https://www.facebook.com/miguellopezcasellas" target="_blank"><img src="https://3.bp.blogspot.com/-dovZ1XeRM44/W__82CioQiI/AAAAAAAACwU/-ZDHNBQb3PM4MYTierXdLKeNXyQq4dwbQCLcBGAs/s1600/Facebook.png" alt="Mi Facebook" width="240" height="auto"/></a>
<hr />
<a title="Mi Twitter" href="https://twitter.com/MiLoCasellas" target="_blank"><img src="https://2.bp.blogspot.com/-yTuoRj2OMe8/W__82BFbUDI/AAAAAAAACwQ/vEhwVexNm7cgvgDOjFejNIvKoN6cHFmcgCLcBGAs/s1600/Twitter.png" alt="Mi Twitter" width="240" height="auto"/></a>
<hr />
<a title="Mi Pinterest" href="https://www.pinterest.es/milo_casellas/" target="_blank"><img src="https://1.bp.blogspot.com/-DyScehUT3Xs/W__82K-JEaI/AAAAAAAACwY/SCeSBJiXLbMhDWPY_UI7c427_6pr-PNLQCLcBGAs/s1600/Pinterest.png" alt="Mi Pinterest" width="240" height="auto"/></a></center>
<hr /><hr />


Bien, pues ya con todo el código sólo queda añadirlo al blog con un par de Widgets HTML. Me voy al menú de la izquierda y hago clic en Diseño. Y en la columna de la derecha hago clic en Añadir widget.





En la ventana de widgets selecciono HTML, añado el código correspondiente y hago clic en el botón <Guardar>.




Y bueno, pues aquí está el resultado :-)




Por cierto, las imágenes que he utilizado para los enlaces, así como las que utilizo de portada para mis entradas, etc... las creo yo con InkScape. Pero ya hablaré de este estupendo software más adelante :-)



1 comentario: