Tutorial: Botones para compartir y Sharebar inferior (Responsive) sin plugin

pulga91 Seguir

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Abr 2010
Mensajes
202
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.jpg

Post Responsive
Post2.png

Sharebar

Post normal
barra1.jpg

Responsive 1
barra2.jpg

Responsive 2
barra3.jpg

barra4.jpg


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:

JesusEC

Préstamo
Iota
Redactor
Verificación en dos pasos desactivada
Desde
6 Abr 2012
Mensajes
2.139
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Guardado. Gracias por compartir tan valiosa información. Me sirve y muchoooooooooooooo
 

lordskorpius

Xi
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
5 May 2010
Mensajes
4.113
Justo pensaba hacer algo como esto, lo implementaré ahora, te ganaste tu pulgar ariba :encouragement:
 

Tony Montana

Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
29 Nov 2013
Mensajes
832
Gracias, hace tiempo buscaba estos botones de compartir. :encouragement:

Donde puedo encontrar para blogger?
 

pulga91

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Abr 2010
Mensajes
202

pulga91

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Abr 2010
Mensajes
202
Añadido boton Whatsapp ya que un compañero del foro me pregunto si se podia añadir y ya esta :)
 

clcp92

Curioso
Verificación en dos pasos desactivada
Desde
15 Mar 2013
Mensajes
2
Me funciono a la perfección, pero la Sharebar, en mobil no me salio como se supone. :confused:
 

pulga91

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Abr 2010
Mensajes
202
Me funciono a la perfección, pero la Sharebar, en mobil no me salio como se supone. :confused:

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
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba