- Desde
- 4 Abr 2010
- Mensajes
- 211
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
Post Responsive
Sharebar
Post normal
Responsive 1
Responsive 2
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
*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.
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.
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
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
Post Responsive
Sharebar
Post normal
Responsive 1
Responsive 2
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: