Tutorial: Botones y Sharebar de Compartir sin Plugins (Responsivo)

  • Autor Autor pulga91
  • Fecha de inicio Fecha de inicio
pulga91

pulga91

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
En una respuesta a un post compartí con ustedes el código que utilizo en mis blogs para los botones para compartir sin hacer uso de scripts innecesarios que muchas veces cargan de más las paginas, incluyendo los que utilizan Font-awesome, muchas veces incorporan código innecesario a mi parecer.

Esta vez vengo a compartirles nuevamente el código de los botones para compartir para que los incorporen a sus post, además de añadir una Sharebar en la parte inferior la cual es Responsive y funciona perfectamente en dispositivos móviles.

Se que AddThis ofrece algo similar y otros servicios similares, sin embargo son algo pesados :/

Los botones que se añaden son Facebook, Twitter, Google+, Pinterest y Tumblr, jugando un poco con el código pueden añadir otro si lo desean.

Añadido boton Whatsapp Para evitar ocultarlo con mediaqueries se utiliza la funcion de wordpress para mostrar contenido en moviles, de esta manera se muestra solo en dispositivos moviles incluyendo tablets, ya que como bien sabemos algunos utilizamos whatsapp en tablet.

El boton de Pinterest toma la imagen automaticamente, en este caso la imagen destacada.

Una muestra de lo que obtendrán con el código que va a continuación:

Botones para compartir

Post normal
post1.webp

Post Responsive
Post2.webp

Sharebar

Post normal
barra1.webp

Responsive 1
barra2.webp

Responsive 2
barra3.webp

barra4.webp


Nivel de dificultad: Medio-sencillo
Tiempo de implementación: 5 minutos(o menos)


Bajamos las imágenes que utilizaremos de este enlace

Paso 1: Subimos las imágenes dentro de una carpeta de nuestro blog, puede ser en la carpeta de imágenes del theme o bien una carpeta del tipo 404 Not Found , es importante que conozcamos la ruta exacta ya que la utilizaremos más adelante.

Paso 2: Iniciamos con el CSS, añadiremos el siguiente código a nuestro archivo style.css. *Reemplazando miurl.com/sharebarfondo.png por la direccion correspondiente a la imagen que subimos previamente

Insertar CODE, HTML o PHP:
.sharesimple{width:100%;margin-top:10px;margin-bottom:10px;}
.sharesimple ul{margin:0;padding:0;}
.share-buttons{list-style: none;}
.share-buttons li{display: inline;}
.sharebar{width:100%;height:50px;background-image:url("miurl.com/sharebarfondo.png");z-index:100;position:fixed;bottom:0px;}
.sharebarsimple{width:80%;margin-top:0px;margin-bottom:0px;margin:0 auto;z-index:1000;position:relative;}
.sharebarsimple ul{margin:0;padding:0;}
.sharebarbuttons{list-style: none;}
.sharebarbuttons li{display: inline;}
.sharetitle{Font-weight:700;color:#fff;font-size:30px;display:inline;float:left;margin-right:10px;margin-top:5px;}
   [MENTION=16931]medi[/MENTION]a screen and (max-width:550px){
.sharesimple{text-align:center;}
.sharetitle{display:none}
.sharebarsimple{width:100%;text-align:center;}
}

*Por comodidad me gusta utilizar las rutas completas de las imágenes, sin embargo ustedes pueden cambiarla si no les gusta esta forma

Paso 3: Vamos a nuestro archivo single.php o bien el archivo del tema que corresponda a la página de los post y colocamos el siguiente código en donde queramos que aparezcan los botones para compartir, modificando la url de las imágenes por la url de la imagen en su dominio.

Insertar CODE, HTML o PHP:
 <h3>Compartir</h3>
 <div class="sharesimple">
								 <ul class="share-buttons">
	<li><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>&t=<? echo urlencode(get_the_title()) ?>" target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src="miurl.com/facebook.png"></a></li>
	<li><a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<? echo urlencode(get_the_title()) ?>" target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/twitter.png"></a></li>
	<li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/gplus.png"></a></li>
<li><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<? echo urlencode(get_the_title()) ?> - <?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Compartir en Pinterest"onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/pinterest.png"></a></li>
	<li><a href="http://www.tumblr.com/share?v=3&u=<?php echo urlencode(get_permalink()) ?>&t=<? echo urlencode(get_the_title()) ?>" target="_blank" rel="nofollow" title="Compartir en Tumblr" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/tumblr.png"></a></li>
<?php
if ( wp_is_mobile() ) {
echo '<li><a href="whatsapp://send?text=<? echo urlencode(get_the_title()) ?> | <?php echo urlencode(get_permalink()) ?>" data-action="share/whatsapp/share" rel="nofollow" title="Compartir en Whatsapp"><img src="miurl.com/whatsapp.png"></a></li>';
} else {
echo '';
}
?>
</ul>
</div>

Paso 4: Vamos a nuestro a archivo footer.php o el archivo del tema que corresponda a nuestro footer y añadimos el siguiente código, de igualmente modificando la url por la propia.

Insertar CODE, HTML o PHP:
<div class="sharebar"><div class="sharebarsimple"><div class="sharetitle">Compartir</div><ul class="sharebarbuttons">
	<li><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>&t=<? echo urlencode(get_the_title()) ?>" target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/facebook.png"></a></li>
	<li><a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<? echo urlencode(get_the_title()) ?>" target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/twitter.png"></a></li>
	<li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/gplus.png"></a></li>
<li><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<? echo urlencode(get_the_title()) ?> - <?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Compartir en Pinterest" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/pinterest.png"></a></li>
	<li><a href="http://www.tumblr.com/share?v=3&u=<?php echo urlencode(get_permalink()) ?>&t=<? echo urlencode(get_the_title()) ?>" target="_blank" rel="nofollow" title="Compartir en Tumblr" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src="miurl.com/tumblr.png"></a></li>
<?php
if ( wp_is_mobile() ) {
echo '<li><a href="whatsapp://send?text=<? echo urlencode(get_the_title()) ?> | <?php echo urlencode(get_permalink()) ?>" data-action="share/whatsapp/share" rel="nofollow" title="Compartir en Whatsapp"><img src="miurl.com/whatsapp.png"></a></li>';
} else {
echo '';
}
?>
</ul></div></div>

Paso 5: Guardar todo y disfrutar de los botones y Sharebar para compartir sin plugin.

Espero les sirva, personalmente se me hace una mejor opción de botones para compartir que el uso de plugins.

Saludos
 
Última edición:
Guardado. Gracias por compartir tan valiosa información. Me sirve y muchoooooooooooooo
 
Justo pensaba hacer algo como esto, lo implementaré ahora, te ganaste tu pulgar ariba :encouragement:
 
Me puedes ayudar para utilizar en blogger?
 
Gracias, hace tiempo buscaba estos botones de compartir. :encouragement:

Donde puedo encontrar para blogger?
 
Bastante bueno la adaptación que realizaste se ve bastante llamativo.
 
esto me hacia falta 😱
 
Gracias, me servira para mi web en el futuro
 
Añadido boton Whatsapp ya que un compañero del foro me pregunto si se podia añadir y ya esta 🙂
 
Muchas gracias 😛8:
 
Me funciono a la perfección, pero la Sharebar, en mobil no me salio como se supone. 😕
 
Muy bueno, se agradece
 
Me funciono a la perfección, pero la Sharebar, en mobil no me salio como se supone. 😕

Revisando un poco el primer post, me doy cuenta de un error que sorpresivamente no me deja corregir el foro

En el css para movil hay un error

Insertar CODE, HTML o PHP:
media screen and (max-width:550px){

Deberia ser

Insertar CODE, HTML o PHP:
@media screen and (max-width:550px){

Probablemente ese sea tu problema

Saludos
 
Atrás
Arriba