TuZonaWP utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies

Posteador
TuZonaWP
Administrador



Añadir Botones para Compartir de Redes Sociales a tus Post



Redes sociales en tus entradas, alguna vez te has preguntado ¿Como lo Agrego?, pues bien en realidad es muy fácil de realizar, solo depende el camino que gustes elegir si el fácil o el termino medio, el camino mas fácil seria instalar un pluguin, lo configuras y listo estaría todo arreglado, pero algunas personas prefieren evitar la instalación de pluguins debido a la optimizacion y ahorro en el consumo de su hosting. Después de un largo tiempo buscando en Google no encontré nada así que decidí entrar al área developers de google plus, facebook, y twiter, es por ello que me tome la molestia de entender la API cabe mencionar que no soy muy experto pero realizo lo que puedo. Es por ello que me tome el tiempo de explicar esta sencilla pero muy efectiva forma de compartir nuestros post.

Lo primero a realizar es ingresar a nuestra área admin de wordpress, ya dentro dirigirse en Apariencia - Editor, buscar el archivo single.php, dentro de este ingresar el siguiente código:


<div class="botones"><p>¡Comparte!</p>
<ul>
<li class="fb-like" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></li>
<li class="g-plusone" data-size="tall"></li>
<li class="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a></li>
</ul>
</div>


Recuerda agregar, antes del código que muestra los comentarios el cual puede ser algo parecido al siguiente:


<div class="post-comment">
<div class="box">
<?php comments_template(); ?>
</div>
</div>


Ahora, ingresaremos nuevamente a nuestra área admin en wordpress y nos dirigimos a Apariencia - Editor, ahora abrimos el archivo footer.php, a continuación agregamos el siguiente código:


<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'es'}
</script>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


Es importante agregarlo antes de la etiqueta </body>.

Procedamos a realizar el ultimo paso, agregaremos los estilos CSS para darle una mejor estética a nuestros botones de redes sociales.


.botones {
darle estilos al titulo ¡Comparte!
}

/*Share Botón*/
.fb-like,
.twitter,
.g-plusone {
display: inline-block;
}

.fb-like,
.twitter,
.g-plusone {
margin: 0px 30px 0px 0px;
}

.twitter {
margin: 0px 0px -23px 30px;
}


En fin a la clase .botones, te recomiendo le des unos estilos CSS para que de una mejor vista de igual manera personalizar el fieldset.

0 Comentarios


Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Ir al cielo