Iconos de redes sociales
La conexión de tus redes sociales a tu portal WEB y la correspondencia de aquellas a tu WEB son herramientas importantes y efectivas para conseguir más y mejores visitas a ambos lados.
Lo que no es necesario es utilizar PLUGINS para esta función, ya que se suele tratar de componentes de cierto peso en el conjunto de la instalación.
Hay que tener en cuenta que existen dos formas principales de realizar el enlace. Ambas necesarias:
- El famoso SÍGUENOS en las redes, donde se establece un enlace a tu página o perfil de la red social en cuestión.
- COMPARTE esta entrada, que facilita el enlace a la propia página o perfil del usuario con el dato de la página visitada para que la comparta en su entorno.
Vamos a ver los dos formatos, basándonos, exclusivamente, en código.
Alcance de la funcionalidad en nuestra WEB
El alcance lo estableces según el lugar donde insertes el código que te muestro más abajo.
Si lo quieres en toda la WEB, debes implementarlo en un apartado general, al principio de la cabecera global, en el pie general o en alguna sección o widget global que utilices.
En todos los temas o plantillas, suele haber un espacio para esto. Si no, lo puedes intercalar como código HTML en cualquier parte apropiada.
En el caso de GeneratePress, yo lo tengo en el HOOK de antes de cabecera. Para los de compartir y en el pie, con las definiciones del copyright.
Síguenos en redes sociales
En este enlace vamos a colocar direccionamientos a las redes sociales que tienes activas.
Cuando el usuario pulse, le redireccionará a nuestra página o perfil de la red social que corresponda. De esta forma, podrá interactuar, pulsando ME GUSTA, compartiendo, etc.
Yo tengo este grupo en el pie de todas las páginas.
El aspecto es el siguiente:
El código que aplico es este:
HTML
<div>
<span class=”iconos-footer”>
<span class=”esati-pie-texto”>Síguenos: </span>
<a href=”https://www.facebook.com/esati.ljmartinez/” target=”_blank”><i class=”fab fa-facebook-f”></i></a>
<a href=”https://plus.google.com/u/0/” target=”_blank”><i class=”fab fa-google-plus-g”></i></a>
<a href=”https://www.linkedin.com/in/luis-martinez-7b9891128/” target=”_blank”><i class=”fab fa-linkedin-in”></i></a>
<a href=”mailto:info@esati.es”><i class=”fab far fa-envelope”></i></a>
</span>
</div>
CSS
/* Estilos CSS Esati:
*/
.iconos-footer .fab {
font-size: 15px;
margin: 2px 6px 2px 6px;
margin-bottom: 2px;
background-color: #666;
border-radius: 50%;
padding: 3px 1px 0px 1px;
height: 20px !important;
width: 22px !important;
border-style: solid;
border-width: 2px;
border-color: #666;
}
.iconos-footer .fab:hover {
background-color: #5F5F5F;
border-style: solid;
border-width: 2px;
border-color: #666666;
}
.esati-pie-texto{
font-size: 10px;
}
Estoy incluyendo las redes FACEBOOK, GOOGLE+ y LINKEDIN. Además, he incluido un acceso de contacto por Mail.
Se puede añadir cualquier red adicional, incluyendo una línea similar a ésta:
<a href=”https://plus.google.com/u/0/” target=”_blank”><i class=”fab fa-google-plus-g”></i></a>
Habría que cambiar las palabras en verde por las correspondientes al enlace de tu red social y el icono correspondiente de la web:
Con sencillas modificaciones en el código CSS se puede adaptar el aspecto a tu gusto y necesidades.
Comparte en redes sociales
La finalidad de este bloque es conseguir que el usuario propague por sus círculos, amigos y contactos, tu página que está visitando.
Para ello, los enlaces a incluir difieren algo, ya que vas a enviar un acceso a cada red social y, de forma dinámica, la URL de la página activa.
Esto se consigue con un código similar a éste:
HTML
<span id=esati-sm-icons-base><span class=”esati-cabecera-texto”> Comparte: </span>
<a href=”javascript:
var dir=window.document.URL;
var tit=window.document.title;
var tit2=encodeURIComponent(tit);
var dir2= encodeURIComponent(dir);
void(window.open(‘http://www.facebook.com/share.php?u=’+dir2+’&t=’+tit2+”, ‘_new’, ‘width=600,height=500,left=50,top=50’));”
<i class=”esati-sm-icons fa fa-facebook” aria-hidden=”true” title=”Facebook”></i></a>
<a href=”javascript:
void(window.open(‘https://plus.google.com/share?url=’+encodeURIComponent(location), ‘_new’, ‘width=600,height=700,left=50,top=50’));”
<i class=”esati-sm-icons fa fa-google-plus” aria-hidden=”true” title=”Google+”></a>
<a href=”javascript:void(window.open(‘http://www.linkedin.com/shareArticle?url=’+encodeURIComponent(location),”,’width=600,height=400,left=50,top=50’));” target=”_blank”><i class=”esati-sm-icons fa fa-linkedin” aria-hidden=”true”></i></a>
<span class=”esati-cabecera-texto”> Contacta: </span>
<a href=”https://api.whatsapp.com/send?phone=0101010101&text=Hola.%20Deseo%20contactar%20para%20ampliar%20informaci%C3%B3n%20sobre%20vuestros%20servicios” target=”_blank”><i class=”esati-sm-icons fa fa-whatsapp” aria-hidden=”true” title=”Whatsapp”></i></a>
<a class=”esati-sm-icons” href=”mailto:info@esati.es”><i class=”esati-sm-icons fa fa-envelope”></i></a>
</span>
CSS
/* Estilos CSS Esati:*/
#esati-sm-img{
margin-left: 12px;
padding-bottom: 35px !important;
}
#esati-sm-icons-base{
line-height: 30px !important;
}
#esati-sm-icons-base{
position: absolute;
line-height: 38px;
top: 10%;
right: 5%;
}
.esati-sm-icons{
margin: 6px;
font-size: 15px;
color: #848484;
}
.esati-sm-icons:hover{
margin: 6px;
font-size: 15px;
color: #31B404;
}
El aspecto obtenido con ese código es éste:
La información de la página que se está visitando se consigue con un poco de código JAVASCRIPT embebido en el HTML que podemos integrar en cualquier parte de nuestra WEB.
Conclusión
Desde mi punto de vista, es interesante ver alternativas puntuales y sencillas para sustituir algunos plugins por código.
Siempre que sea sencillo, como en este caso y otros ejemplos que compartiré en el futuro, conseguimos quitar peso a la WEB y la hacemos más ágil y rápida en su carga.
Útil y claro; como todo lo que lo que nos enseñas. Una vez más demuestras esa habilidad de ahorrarnos tiempo en probar plugins, picar código y desilusionarte porque no es los que tenías en mente. Muchas gracias Luis por aportar soluciones.
Gracias Vero.
No veo mejor utilidad de las cosas que vas aprendiendo, que compartirlas. Si además se entiende, pues misión cumplida.