Guía / Artículo

Compartir una página de flujo web en los medios sociales

Waldo
30 de octubre de 2020
Compartir una página de flujo web en los medios sociales


Paso 1:



En primer lugar, añadir un elemento div para que actúe como contenedor de nuestros botones de compartir.

En el ejemplo hemos usado 'Social-icon-wrap' para que podamos establecer nuestros botones horizontalmente.

Paso 2:


Bien, añadamos nuestros botones.

Hemos llamado a estos 'social-icon' - sólo tenemos que hacer como vamos a duplicar este elemento.

Establezca algunas propiedades para este elemento en el panel de estilo:

Nosotros solíamos:

Anchura mínima: 45
Altura mínima: 30
Fondo:
Posición #4d54d2:


La posición relativa es la más importante, ya que así podemos posicionar el elemento de código como nos plazca.

‍ ‍

Paso 3:

Vale, ahora añade un elemento de incrustación encima de esto. Hemos llamado al nuestro 'html'

Dentro de esto necesitamos establecer una posición fija de lleno para cubrir el elemento relativo de abajo.

Duplique este elemento dos veces para que tengamos 3 botones, y añada un poco de relleno si es necesario.

Dentro de estas áreas de incrustación, añada el siguiente código a los botones que desee 'Facebook, Twitter, Pintrest etc)


Facebook:




   function fbshareCurrentPage()   {
       window.open("https://www.facebook.com/sharer/sharer.php?u=" + escape(window.location.href) + "&t=" + document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
       return false;
   }

Twitter:



function tweet() {
   var u = location.href;
   var t = document.title;
   window.open('http://twitter.com/share?url='+encodeURIComponent(u)+'&text='+encodeURIComponent(t),'twitsharer','toolbar=0,status=0,width=626,height=436');
   return false;    
}

También puedes cambiar la variable 't' aquí para que sea un mensaje fijo. Por ejemplo: var t="Mira este impresionante concepto de @waldobroodryk #MadeInWebflow";

El reposapiés:




‍ ‍

Recuerde que esto tomará la información de su Guía de configuración

de páginas SEO basada en los activos de Waldo.

Waldo
30 de octubre de 2020

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.