Agregar boton compartir facebook a mi página web html

Botón de compartir personalizado de Facebook

Building Social Media Share Button with pure HtmlClick to share this…Ayodele Samuel Adebayo-May 17, 2021-7 min readSuscríbete a mi newsletter y no te pierdas nunca mis próximos artículosSubscribePlay this articleTu navegador no soporta el elemento audio.SPEED1XHola, mis preciosos amigos de internet , hoy vamos a construir juntos un botón para compartir en redes sociales, que podrás incluir en tu próximo proyecto.

El botón de compartir permite a los usuarios compartir rápidamente el contenido de su página web con todos sus seguidores, desde artículos de noticias a películas o enlaces de música. Al hacer clic en el botón de compartir, el usuario recibe el contenido rellenado previamente o un enlace a esa página web, que puedes personalizar antes de enviarlo.

Este atributo se utilizó porque usábamos el atributo target=”_blank”, que puede causar una vulnerabilidad de seguridad en nuestro sitio web. Incluir el rel=”noopener noreferrer” evitará posibles robos de datos u otros ataques de phishing.

Compartir enlace de Whatsapp

Antes de generar el código para el botón de compartir, es mejor decidir dónde lo pondrás en tu sitio web. En qué páginas y en qué posición. Según la plataforma que utilices para editar tu sitio web, ya sea un editor de texto como Notepad++ o un panel de administración CMS como WordPress, abre el archivo en el que insertarás el botón para compartir.

Introduce la URL de tu sitio o página web en el campo de texto donde pone URL para compartir. En el menú desplegable Diseño de la derecha, selecciona el diseño que prefieras para el botón de compartir. Los más populares son box_count, button_count y button. La opción Mobile Iframe controla si quieres que el diálogo para compartir se muestre en un Iframe o no.

  Agregar cuenta twitter en version web

Lo que tiene que hacer, como también se explica en el diálogo de código, es insertar el SDK JS en su página (esto se hará una vez, incluso para múltiples botones de compartir en la misma página) y colocar el código del botón donde desee mostrarlo.

NOTA: A menos que esté utilizando un lenguaje de programación web dinámico como PHP para generar las páginas de su sitio web, tendrá que realizar este paso para cada página de su sitio web en la que desee colocar un botón para compartir.

Enlace para compartir en Facebook

Las redes sociales han tardado algo más de una década en establecerse como una de las herramientas más impactantes y poderosas para atraer público, atraer tráfico a su sitio web y hacer que su voz y su marca sean escuchadas. Hoy en día, es de vital importancia que su contenido no sólo sea leído, sino también compartido a través de las redes sociales por sus visitantes para llegar a un público aún más amplio. Al integrar botones para compartir en las redes sociales en el contenido de su sitio web, hará que compartir contenido por parte de sus visitantes sea sencillo.

  Agregar calendario gmail a outlook desde la web

Lo primero es lo primero. Para crear los botones deseados, utiliza el generador sharingbuttons.io. Todo lo que necesita es la URL y el título del contenido que desea compartir, ya que esta información se muestra a los visitantes una vez que el contenido, como una entrada de blog, se comparte.

Para rellenar automáticamente el título y la URL de cualquier entrada al compartirla, debes utilizar marcadores de posición de texto y URL relevantes en el código de la plantilla del widget de entrada de blog MVC. Estos marcadores de posición deben ser fácilmente identificables y sustituidos dinámicamente mediante la lógica del código HTML por los datos reales de la entrada del blog. Por ejemplo, puede utilizar los siguientes marcadores de posición:

Html compartir enlace

Es difícil encontrar un tutorial para los botones sociales que comparten su URL actual a una plataforma social de la elección de los usuarios sin alguna trampa. Aunque hay un montón de plugins y formas enrevesadas de añadir esos botones de compartir en redes sociales, yo quería algo extremadamente sencillo y ligero.

A continuación, encontrarás el código que utilicé para crear los enlaces de los iconos para compartir en redes sociales que se encuentran en la barra lateral de cada entrada de este sitio. El HTML simplemente toma el título de la página, la URL actual, y la comparte con la red social apropiada. No hay JS loco, sólo simple HTML y CSS que se puede pegar en cualquier sitio web en cuestión de minutos.

  Agregar blog wordpress a web html

Añade el CSS a un plugin de código personalizado como WP Code Box o dondequiera que añadas tu código personalizado. Para el HTML, puedes simplemente colocarlo en cualquier lugar que acepte HTML personalizado. En mi caso, utilizando el editor Gutenberg de WordPress, simplemente añadí un bloque de “HTML personalizado” y pegué el código.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad