Cómo crear botones para compartir en tu sitio paso a paso

Los botones para compartir en redes sociales son un elemento indispensable de cada sitio web. Ya sea un blog personal o comercial, una cartera en línea o un proyecto de comercio electrónico, los botones sociales permiten a los clientes difundir fácilmente su contenido en Facebook, Twitter, Instagram o Pinterest. Al implementar botones fáciles de compartir en redes sociales en su recurso web, puede ampliar significativamente su alcance y dar la bienvenida a nuevos clientes para que visiten su sitio en busca de contenido o bienes valiosos. El poder de las redes sociales no debe subestimarse en estos días. Si una empresa no se puede encontrar en Facebook o Instagram, pierde la oportunidad de llegar a su público objetivo y comercializar sus productos y servicios a más personas. Como sugiere el nombre, los botones para compartir en redes sociales hacen que su contenido sea más fácil de compartir en la web. Es una práctica común que los usuarios modernos compartan enlaces a sus productos preferidos en sus páginas de Facebook. Cada publicación social puede ser alcanzada por seguidores con los mismos intereses y preferencias que tiene su cliente.

Además, con los botones de redes sociales, puede transmitir fácilmente su contenido en grupos de redes sociales o a las personas que elija. La cantidad de acciones en las redes sociales señala el contenido que las personas encuentran más valioso y atractivo. Por lo tanto, muchas marcas están trabajando arduamente para multiplicar las acciones en las redes sociales y aumentar el conocimiento de su marca.

Correr la voz sobre las piezas de contenido preferidas puede ser fácil con solo hacer unos pocos clics. Los botones sociales permiten que sus clientes transmitan enlaces mientras permanecen en su sitio web. En la mayoría de los casos, implica simplemente tocar el botón de compartir y seleccionar la plataforma de redes sociales donde les gustaría que apareciera su enlace.

Cómo crear un botón Compartir paso a paso

Internet está lleno de diferentes botones para compartir, la tarea principal es elegir los correctos. A veces ni siquiera entiendes qué botones sociales necesitas en tu propio blog. A veces no encuentras botones con un diseño que se ajuste a tus necesidades. A veces no puedes encontrar una manera simple y genial de implementar botones para compartir en tu blog. ¡No entrar en pánico! En este artículo, le mostraremos cómo crear algunos botones básicos y sociales para compartir.

Cursos de Diseño Web

• Clases de codificación en línea para aprender en casa
• Paquete completo de dominio de Photoshop

En caso de que no quiera lidiar con un código enorme y abarrotado y una personalización de detalles compleja, este tutorial es exactamente para usted. Incluso los novatos en HTML lo encontrarán fácil de seguir. ¡Así que abróchense los cinturones y empecemos!

Paso 1

Lo primero que debe hacer es abrir su archivo HTML y pegar el código a continuación

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
o
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Paso 2

Ahora cree un archivo js que contenga dicha información:

Eso es todo :) Un método muy simple para rastrear las estadísticas de hacer clic en el botón de compartir que se coloca directamente en la página de compartir. Este problema se resolvió con la ayuda de una tabla en la base de datos y ajax simple:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Este script obtiene una identificación de la URL, agrega la etiqueta a la tabla y/o aumenta el contador en uno para una red social específica. Es una solución simple para los botones de compartir. Puede cambiar fácilmente la apariencia de sus botones a través de CSS, puede diseñar sus propios botones en Photoshop y usarlos aquí. ¡Puedes hacer casi todo!

Por supuesto, este ejemplo es un poco primitivo, pero es un buen punto para comenzar a crear sus propios botones para compartir. ¡Darle una oportunidad!

Las redes sociales populares le permiten generar piezas de código personalizadas que podemos incrustar en publicaciones o páginas de sitios web para permitir que las personas transmitan su contenido preferido. Facebook y Twitter son dos de las redes sociales más populares que admiten la funcionalidad respectiva. Veamos cómo integrar dichos botones sociales en su sitio.

Cómo agregar el botón Compartir de Facebook

Los botones para compartir de Facebook permiten a sus clientes compartir enlaces que dirijan a publicaciones u ofertas en su sitio web con un texto escrito a medida.

Para agregar este botón a su sitio web, primero debe ir a esta página.

Ahora veamos qué significan algunos de los campos en la página de configuración.

• URL para Me gusta: este campo agrega la página del sitio que queremos compartir en Facebook.
• Ancho: aquí se establece el ancho del botón.
• Verbo para mostrar - aquí podemos seleccionar el texto en el botón "Me gusta" o "Recomiendo".
• Esquema de color: aquí puede elegir el diseño del botón para sitios claros u oscuros.
• Fuente: seleccione la fuente para las etiquetas de los botones.

Una vez que hayamos seleccionado la configuración, busque el botón "Obtener código" y haga clic en él. A continuación, se mostrará una ventana con el código, también debe insertarse en dos etapas:

Inserte el código justo después de la etiqueta <body>.

Código para mostrar el botón:

Pegue este código donde se debe mostrar el botón de Facebook:

Cómo agregar el botón Compartir de Twitter

Al agregar botones para compartir de Twitter a su sitio web, hay varias cosas que los desarrolladores de Twitter recomiendan que tenga en cuenta:

• Si un usuario no ha iniciado sesión en su cuenta de Twitter, se le pedirá que inicie sesión para tweel su mensaje.
• El tweet se vinculará a la página web que una persona ha visitado. Un usuario puede sentirse libre de ajustar el mensaje del tweet de la forma que desee.
• Después de hacer clic en "Tweet", el cuadro emergente revelará una lista de cuentas relacionadas en Twitter. Un usuario puede decidir dónde seguirlos o ignorarlos.
• No hay límite en la cantidad de veces por día y el mismo usuario puede twittear algo en la línea de tiempo.

Para agregar el botón Compartir de Twitter, haga lo siguiente:

• Ve a publicar.twitter.com y toca Botones de Twitter.
• Elija qué tipo de botón para compartir de Twitter le gustaría agregar a su sitio.
• Ajusta el Tweet y el mensaje que contendrá mientras mencionas qué @cuenta te gustaría mencionar.
• Una vez hecho esto, copie y pegue el código en su sitio.

Eso es practicamente todo. Esperamos que esta guía le resulte útil. Lo mejor de esto es que no debe tener habilidades de codificación profundas para agregar botones de compartir en redes sociales a su sitio web. Los generadores de códigos automatizados le brindan soluciones listas para usar que puede ajustar, copiar y pegar de manera intuitiva en el HTML de su sitio web.