Cómo crear nuestros propios botones sociales para compartir

18-04-2016 - Andrés Cruz

Cómo crear nuestros propios botones sociales para compartir In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

En esta entrada veremos como crear botones para compartir contenido mediante redes sociales e incorporarlos en nuestra web; cabe recordar que existen muchos servicios que ofrecen este tipo de soluciones como AddThis o ShareThis que permite generar botones para compartir contenido que podemos incorporar a nuestra web con un simple copia y pega:

AddThis logo

Sin embargo, al emplear soluciones existentes siempre nos vemos limitados de cierta manera, como la posibilidad de cambiar la interfaz a gusto, iconos personalizados, distribución y además que tenemos que depender directamente de un tercero (ya que los fuentes apuntan a otro servidor) y la carga de nuestro site puede verse afectada por lo comentado anteriormente entre otras cosas que a la final terminan odiando aunque cada cosa tiene sus ventajas y sus desventajas.

Creando nuestros propios botones sociales para compartir

botones sociales para compartir contenido

Aquí es donde entra la magia del desarrollo personalizado o creados por nosotros mismos; como verás el desarrollo es muy sencillo y en esta entrada veremos las principales redes sociales para que su funcionamiento sea parecido al clasico AddThis (clic en un icono se abre una ventana emergente pop-up con el contenido a compartir por la red social correspondiente).

Formatos de las URL de redes sociales para compartir contenido

compartir contenido twitter

Prácticamente todas las redes sociales que se respeten ofrecen un formato que permite compartir enlaces mediante un título y la URL que la acompaña vía GET; por ejemplo:

Microblogging: Twitter

En Twitter empleamos el parámetro url y text para indicar el contenido que queremos compartir y aparezca la característica ventana para compartir como la mostrada anteriormente.

https://twitter.com/share?url=[URL]&text=[TITLE]"

Red social: Facebook

Facebook emplea un esquema similar, en este caso los parámetros se llaman u y title como mostramos a continuación:

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

Red social: Google+

En el caso de Google+ (supongo que alguien la usara), el parámetro empleado es el de la url:

https://plus.google.com/share?url=[URL]

Red de trabajo: Linkedin

En Linkedin es un poco más de lo mismo y los parámetros se llaman url y title http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]

Pinterest

Aunque Pinterest no es una red social como tal, también es muy empleada y la usamos para subir imágenes con algo de contenido, el parámetro empleado es el de la url:

https://www.pinterest.com/pin/find/?url=[URL]

Entre otros formatos a redes sociales que puedes ver en los siguientes enlaces:

Creando nuestros propios botones sociales para compartir

Una vez explicado lo anterior, lo que nos resta es crear tantos los enlaces sociales con algún ícono representativos a estas red social de nuestra preferencia; el siguiente HTML y CSS hacen lo anterior comentado:

<style>
#share-buttons {
    width: 400px;
    display:block;
    margin: 0 auto;
    -ms-transform: scale(.8,.8);
    -webkit-transform: scale(.8,.8);
    transform: scale(.8,.8);
}
#share-buttons img {
    width: 35px;
    padding: 5px;
    border: 0;
    display: inline;
}

#share-buttons a{
    width: 50px;
    height: 50px;
    display: inline-block;   
}

#share-buttons i{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url("/public/images/icons.png");
}
</style>

<html>
<div id="share-buttons">
        <!-- Facebook -->
        <a class="social-button" href="http://www.facebook.com/sharer.php?u=http://sh.st/UPQTP&t=Cargas asíncronas de imágenes con jQuery en una web">
            <i class="fb_50_black"></i>
        </a>

        <!-- Google+ -->
        <a class="social-button" href="https://plus.google.com/share?url=http://sh.st/UPQTP">
            <i class="gmail_50_color"></i>
        </a>

        <!-- LinkedIn -->
        <a class="social-button" href="http://www.linkedin.com/shareArticle?mini=true&url=http://sh.st/UPQTP&title=Cargas asíncronas de imágenes con jQuery en una web">
            <i class="in_50_color"></i>
        </a>

        <!-- Tumblr-->
        <a class="social-button" href="http://www.tumblr.com/share/link?url=http://sh.st/UPQTP&title=Cargas asíncronas de imágenes con jQuery en una web">
            <i class="tb_50_color"></i>
        </a>

        <!-- Twitter -->
        <a class="social-button" href="https://twitter.com/share?url=http://sh.st/UPQTP&text=Cargas asíncronas de imágenes con jQuery en una web">
            <i class="twitter_50_black"></i>
        </a>
        <h5>Ayúdanos a seguir creciendo#60;/h5>
    </div>
</html>

Obtenemos algunos botones sociales como los siguientes:

Ver ejemplo Descargar

Por supuesto, ahora con ventajas como la posibilidad de configurar todo lo que queramos como los iconos de las redes sociales, HTML, CSS, optimización, funcionamiento en general.

Pop-up social

Si queremos que habrá un pop-up para mostrar el dialog de la red social, podemos incorporar el siguiente JavaScript:

        var lba = document.getElementsByClassName("social-button")

        function myPopup() {
            window.open(this.href, 'mywin',
                    'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
            event.preventDefault();
            return false;
        }

        for (var i = 0; i < lba.length; i++) {
            lba[i].addEventListener("click", myPopup, false);
        }

Quedando todo nuestro experimento social de la siguiente manera:

Ver ejemplo Descargar


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!