R
redlotus
Delta
Hola beta, desde hace días he visto que algunos usuarios en la zona de negocios solicitan agregar el boton de compartir en sus entradas por lo que me decidí publicar un tutorial y así usuarios interesados en agregar dicha modificación pueden ahorrarse algunos dolares y aprender.
Es un tutorial muy sencillo que toma menos de 3 minutos.
AGREGANDO botón de compartir en el ARTICULO!
Nos ubicaremos en la plantilla Single.php (que es la que usan comúnmente la mayoría de themes)
Usaremos ctrl+f para ubicar <?php the_content(); ?>
Ahora hacemos un salto de linea después de dicho código para agregar el siguiente script:
Quedándonos nuestra plantilla de la siguiente forma;
Le damos click en actualizar archivo y con eso tenemos agregado el botón de facebook en la plantilla de nuestros post, ahora sera cosa de agregar el CSS del mismo.
Nos vamos a nuestro style.css y hasta el final agregamos:
Damos actualizar archivo y hemos terminado!
Quedando nuestro botón de la siguiente forma:
Y cuando se le da click al botón de compartir arrojara un popup como el siguiente:
Cualquier duda y/o problema comentarlo y haré todo lo posible por ayudar :encouragement:
Es un tutorial muy sencillo que toma menos de 3 minutos.
AGREGANDO botón de compartir en el ARTICULO!
Nos ubicaremos en la plantilla Single.php (que es la que usan comúnmente la mayoría de themes)
Usaremos ctrl+f para ubicar <?php the_content(); ?>
Ahora hacemos un salto de linea después de dicho código para agregar el siguiente script:
PHP:
<span>
<a href="javascript: void(0);" onclick="window.open ('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'Facebook', 'toolbar=0, status=0, width=550, height=400');">
<div class="fb-share"><span class="fb-text">Compartir en facebook</span></div></a>
</span>Quedándonos nuestra plantilla de la siguiente forma;
Le damos click en actualizar archivo y con eso tenemos agregado el botón de facebook en la plantilla de nuestros post, ahora sera cosa de agregar el CSS del mismo.
Nos vamos a nuestro style.css y hasta el final agregamos:
HTML:
.fb-share {width: 96%;padding: 12px;background: #3b5998 url("http://i.imgur.com/vsQCIap.png") no-repeat left center;background-position: 22% 50%;margin-top: auto;float:left;text-align:center;}
.fb-text {color: #fff;text-transform: Uppercase;font-size:22px;}Damos actualizar archivo y hemos terminado!
Quedando nuestro botón de la siguiente forma:
Y cuando se le da click al botón de compartir arrojara un popup como el siguiente:
Cualquier duda y/o problema comentarlo y haré todo lo posible por ayudar :encouragement:
