DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
18-04-2016

En esta entrada veremos como crear botones para compartir contenido 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 demostración

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.

Creando nuestros propios botones sociales

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 habre 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; por ejemplo:

Twitter

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

Facebook

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

Google+

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

Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]

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:

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 

Quedando todo nuestro experimento social de la siguiente manera:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

InstaStream: plugin para mostrar imágenes desde Instagram

InstaStream: plugin para mostrar imágenes desde Instagram

jQuery sharebox, plugin para compartir contenido

jQuery sharebox, plugin para compartir contenido

Algunos artículos que te pueden interesar

Cómo deshabilitar la caché en Google Chrome

Cómo deshabilitar la caché en Google Chrome

Se explica cómo deshabilitar la caché en Google Chrome desde la consola de desarrolladores.

Andrés Cruz 09-01-2017

Android basico: definición, eventos y uso de los botones (parte 1)

Android basico: definición, eventos y uso de los botones (parte 1)

En este artículo veremos cómo definir y utilizar mediante eventos un botón en Android.

Andrés Cruz 19-06-2014

Url_title() en CodeIgniter

Url_title() en CodeIgniter

url_title permite crear URLs amigables que nos favorece al momento del SEO.

Andrés Cruz 25-06-2013