Añadiendo redes sociales y finalizando el sitio web

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Quiero añadirle botones para que mis usuarios compartan el sitio web en las redes sociales.

Hay muchos plugins que podría utilizar para esto, pero gracias que estamos utilizando una cuenta de Hosting Premium con lievanosan.com

Tenemos acceso al mejor plugin para compartir en redes sociales, el acceso a este plugin cuesta normalmente $89.00 USD, pero a nosotros nos sale gratis.

El plugin se llama Monarch y lo encontraremos en nuestro Cpanel desde WordPress pro.

Así que entramos en Cpanel, y luego vamos a WordPress Pro.

Como puedes ver aquí abajo tenemos los plugins disponibles.

Muy bien, ahora voy a realizar el mismo proceso que al instalar la plantilla.

Damos clic en instalar la aplicación, asegúrate de seleccionar el dominio y que la ruta se encuentre vacía. Y luego vamos hacia abajo y damos clic aquí para instalarlo.

Damos clic en aceptar y la instalación inicia.

Muy bien, ahora podemos utilizar este segundo enlace para entrar a nuestros plugins y activar Monarch.

Es posible que te aparezcan notificaciones sobre los nuevos cambios que YouTube, Facebook, u otra red social ha realizado en sus políticas.

En este caso voy a ocultar estas notificaciones.

Ahora que el plugin se encuentra activado.

Falta solo un paso más, vamos a ingresar en Ajustes, enlaces permanentes y desde aquí daremos clic en guardar simplemente.

Muy bien, ahora si Monarch se encuentra correctamente instalado y podemos ingresar en sus opciones desde herramientas y luego en Monarch settings.

Aquí tenemos la página de opciones de Monarch.

Este plugin es definitivamente la mejor opción para añadir redes sociales a tu sitio web.

No solo puede añadir los botones de compartir, también puede añadir enlaces a tus redes sociales y mostrar el contador de seguidores que tienes en cada una de ellas.

Como si eso fuera poco también cuenta con estadísticas, de modo que podremos saber cuales son las páginas más populares en nuestra web y la cantidad de veces que se comparten nuestros contenidos.

En este tutorial solo veremos la forma de añadir los botones para compartir, pero estamos creando un curso en nuestro sitio web en el que vamos más a fondo con este plugin.

Puedes ver todos nuestros cursos gratis en lievanosan.com y luego en tutoriales.

Entonces, regresamos a nuestra área de administración.

Desde aquí debemos seleccionar los lugares en los que deseamos mostrar la opción de compartir.

Como puedes ver es posible dejarlo en todos al mismo tiempo, pero la verdad sería un poco molesto para el visitante.

Así que dejaré el sidebar, el inline y el flyin.

Ahora damos clic aquí para guardar los cambios.

Este mensaje nos indica que debemos añadir los botones de las redes sociales en las opciones de networks, así que damos clic en ok y es lo siguiente que haremos.

Desde aquí debemos indicar cuáles botones deseamos que aparezcan.

Como puedes ver tenemos una gran cantidad de botones disponibles.

En mi caso quiero añadir a Facebook, twitter, google+ y Pinterest.

Muy bien, en el caso de twitter podemos añadir aquí nuestro usuario.

Y guardamos los cambios desde aquí.

Muy bien, ahora debemos ir a las opciones de cada tipo de diseño que hemos seleccionado en el primero paso.

Así que entramos primero al sidebar.

Desde aquí puedes seleccionar el estilo de la animación en los botones, tenemos 5 estilos diferentes; puedes colocarte sobre estos botones para tener una previsualización de cada animación.

En mi caso le voy a dejar esta animación.

Después podemos seleccionar una forma para los botones, tenemos el cuadrado, el cuadro con bordes redondeados y el circulo.

Yo lo dejare cuadrado.

Debajo de estas opciones tenemos la configuración display, desde aquí puedes indicar algunas reglas de como se verán los íconos.

Por ejemplo, podemos indicar si deseamos mostrar los íconos a la izquierda o a la derecha.

También podemos añadirle una animación.

Es posible mostrar las veces que se ha compartido en cada red social y total de veces compartido por todas las redes.

Desde all networks podemos añadir un botón que le permite al usuario compartir en todas las redes al mismo tiempo.

También podemos añadir espacio entre los íconos o dejarlos unidos.

Y finalmente podríamos eliminar este diseño de los móviles, que en este caso si lo eliminaré de los móviles para que no ocupes mucho espacio en la vista móvil.

Después tenemos las opciones de color, podríamos añadirle un color a todas las redes sociales, pero en mi caso quiero mostrar el color de cada red así que no utilizaré esta opción.

Finalmente podemos indicar en que tipo de contenido deseamos mostrar este diseño.

Podemos indicar si deseamos mostrarlo en la página de inicio, en las páginas, los artículos o los elementos del portafolio, si tienes otros tipos de contenido también se mostrarán aquí.

En mi caso deseo mostrar este diseño en la página de inicio, en las otra páginas y en los artículos.

Y ahora damos clic en guardar.

Muy bien, ya tenemos este diseño configurado, ahora pasemos al siguiente que era el diseño inline.

Desde aquí también podemos seleccionar una de estas animaciones.

Después seleccionamos el estilo de los botones.

Abajo tenemos las opciones para modificar el diseño de este estilo.

Las opciones para modificar el color y después donde deseamos mostrar este estilo.

Para este caso voy a dejar marcado únicamente los artículos. Así que solo podrá verse en los artículos del blog.

Y guardamos los cambios.

Finalmente vamos al último de los estilos que activamos, así que entramos en flyin.

Las opciones son muy similares, debemos seleccionar un estilo de animación y luego una forma para los botones.

Pero el flyin es una caja que se muestra en una de las esquinas de la web.

Así que tiene espacio adicional para añadir un mensaje.

En este caso le colocaré, comparte esta página, como título.

Y en el cuerpo del mensaje colocamos, si te gusta este contenido, compártelo con tus amigos.

Pronto iremos al sitio web para ver como lucen nuestros diferentes botones y zonas para compartir.

Ahora pasemos a las opciones display.

Como podrás ver, en este estilo tenemos más opciones.

Eso es debido a que el flyin es como un mini popup.

Entonces desde estas opciones podemos indicar cuándo deseamos que el flyin se muestre y donde.

En primer lugar podemos indicar donde deseamos que el flyin se muestre.

Podemos mostrarlo abajo a la derecha, o abajo a la izquierda.

Las siguientes opciones son similares a las que tenemos en los otros estilos.

Hasta estas opciones de comportamiento.

Podemos dejar esto configurado para que se muestre cuando el usuario haga ciertas acciones o incluso si pasa demasiado tiempo inactivo.

Desde la primera opción podríamos dejarlo para que se muestre después de que pase cierto tiempo, si lo activamos podremos dejar aquí marcado cuanto tiempo debería pasar para que se muestre el flyin, el tiempo se mide en segundos.

El siguiente evento nos permite mostrar el flyin después que el usuario se encuentra un tiempo específico en la web sin hacer nada.

Después tenemos la opción para se muestre una vez el usuario llega al final del artículo que se encuentra viendo.

Esta opción si la vamos a dejar marcada.

Luego podemos indicar que se muestre el flyin después que el visitante deja un comentario en nuestra web.

Con la siguiente opción podemos indicar que se muestre después de que el usuario se desplaza hacia abajo.

Aquí podemos indicar el número en porcentaje que debe alcanzar el visitante.

Por ejemplo en mi caso lo dejaré en 70 por ciento.

Este plugin se puede vincular con WooCommerce que es el mejor plugin para añadir una tienda online en WordPress.

Así que nos permite mostrar el flyin después que el usuario hace una compra en la web.

Finalmente tenemos esta opción que es muy importante.

Esta opción nos permite indicar cada cuanto tiempo el usuario debe ver este flyin.

Por ejemplo, en este caso tenemos configurado el flyin para mostrarse después de que el usuario llega al límite del artículo que esta leyendo.

Entonces, si no marcamos esta opción, cada vez que el visitante llegue al final del artículo que se encuentra leyendo, le aparecerá el flyin.

Siempre que cumpla con una de nuestras reglas añadidas aquí, el flyin se mostrara.

Entonces, como te puedes imaginar eso podría ser muy molesto para la mayoría de visitantes.

Para evitar eso, utilizamos esta opción.

Desde aquí podemos indicar que se muestre el flyin solo una vez por sesión y aquí abajo podemos indicar cuanto dura esa sesión.

Entonces, si le dejo por ejemplo 7 días.

Entonces aunque un usuario vea muchos de nuestros artículos, no le aparecerá el flyin todas las veces, aparecerá solo una vez cada 7 días.

Asegúrate de dejar esta opción marcada en tu web, ya que en caso contrario terminaras siendo molesto a tus visitantes.

Muy bien, luego tenemos otras opciones que son las mismas que veíamos en los estilos anteriores.

Después tenemos las opciones de color y en que tipo de contenido se mostrará el flyin.

En este caso lo dejare como se encuentra para que se muestre en las páginas y en los artículos, pero que no se muestre en la página principal.

Y finalmente guardamos los cambios para que se aplique el estilo en nuestro sitio web.

Ahora vamos a ver este plugin en acción, así que entramos a nuestro sitio web.

Como puedes ver, ahora tenemos este pequeño sidebar al lado izquierdo con el que podemos compartir esta página.

Veamos los otros estilos, para eso voy a entrar en el blog.

Y vamos a ingresar a cualquiera de estos artículos.

Como puedes ver, este es el diseño inline.

Contamos con los botones de compartir desde aquí.

Y si vamos hacia abajo, podrás ver como aparece nuestro flyin en la esquina de abajo a la derecha.

Muy bien, y de esta forma hemos finalizado nuestro sitio web.

Has visto que fácil es crear tu sitio web con todo el poder de WordPress y la facilidad que un editor visual puede entregarnos.

Para iniciar tu propio sitio web y obtener el editor visual completamente gratis, puedes entrar en nuestros planes de Hosting para WordPress en lievanosan.com

Y adquirir tu propio plan de Hosting Premium o Business.

Aunque el editor es muy fácil de utilizar, siempre tendrás un equipo de soporte especializado en WordPress.

Que te ayudará en cualquier pregunta que tengas sobre WordPress o si necesitas ayuda.

Quiero regalarte un cupón de descuento para tu plan de Hosting Premium o Business por haber llegado hasta el final de este mini-curso.

Puedes utilizar el cupón quieroeleditor y obtendrás un 15% de descuento en tu factura.

Espero que este video tutorial te sea de ayuda para crear tu propio sitio web.

No dudes en compartirnos la URL de tu web creada con el editor y tu cuenta de Hosting de lievanosan.com cuando la tengas lista.

Si tienes preguntas no dudes en añadirlas en los comentarios.

Esto ha sido todo por este pequeño curso en el que hemos creado un sitio web profesional en tiempo record y con facilidad record también.

Mi nombre es José Lievano, muchas gracias por ver este video de lievanosan.com y nos veremos en el siguiente tutorial.

One Comment on “Añadiendo redes sociales y finalizando el sitio web”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image