Reacciones de facebook para Blogger Reacciones de facebook para Blogger

Anteriormente les habia compartido la forma de tener reacciones en Blogger usando la plataforma de ShareThis, en donde destaco su exactitud y el rendimiento que este tiene sobre los demas plugins parecidos, pero su principal desventaja es la poca o nula personalizacion.


Desde hoy he comenzado a diseñar nuevos estilos para las reacciones de ShareThis y el dia de hoy les comparto las reacciones estilo facebook animadas. Espero que les guste.


Instalar reacciones

Como paso mas importante ya debes tener instaladas las reacciones. Para ello ve a mi articulo Reacciones en Blogger usando ShareThis y completa los pasos del tutorial, posteriormente prosigue con el siguiente paso.


Insertar estilos

Para ello ve a Temas Editar HTML, busca </body> y arriba de eso pega el siguiente código CSS:


<style>/*<![CDATA[*/
/*!
 * Skin-facebook ShareThis v1.0.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 */#st-1 .st-btn .st-text{display:none!important}
#st-1 .st-btn:hover>span.st-count{display:inline-block!important}
#st-1 .st-btn>svg{opacity:0}[data-reaction]{background-size:80px;background-position:center}
#st-1 .st-btn>span.st-count{font-size:10px!important;padding:4px 7px;color:#757575;background:#fff;line-height:1!important;border-radius:5px;border:1px solid rgba(0,0,0,.2);font-weight:700!important;font-family:Roboto,sans-serif;box-shadow:inset 0 2px 2px 1px #fff,inset 0 -2px 20px rgba(173,186,204,.15),0 1px 2px rgba(0,0,0,.15),0 2px 10px rgba(0,0,0,.05);display:inline-block!important;bottom:5px;right:10px;position:absolute}
[data-reaction=slight_smile]{background-image:url(https://2.bp.blogspot.com/-onGC5EoJiiA/XJKTPocrb2I/AAAAAAAAGts/y63SgWuebtspjWjp1eEJ1wcK5Qdn2jWqQCLcBGAs/s0/like.gif)}
[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-XO9EQs48u9s/XJKUOu6C9RI/AAAAAAAAGt0/AvO-BZ_YOOoQs3i5iH2CZLbafyEBovOEwCLcBGAs/s0/love.gif)}
[data-reaction=laughing]{background-image:url(https://3.bp.blogspot.com/-ST606I2KJAM/XJKUoBbB8zI/AAAAAAAAGuA/1H5Nf6kjBowUGrt80KYf5FN-TaaA1ErSwCLcBGAs/s0/haha.gif)}
[data-reaction=astonished]{background-image:url(https://2.bp.blogspot.com/-fEsfdOAj6m4/XJKUodnOstI/AAAAAAAAGuM/7HkgAaOkelo68pfgJUeQUqgK5If23LvkQCLcBGAs/s0/wow.gif)}
[data-reaction=sob]{background-image:url(https://2.bp.blogspot.com/-SIHdTCHT0A4/XJKUoL1fNTI/AAAAAAAAGuE/MLaa-JvN_Bsfw0d2wTGAKnLpqgcy2i9sQCLcBGAs/s0/sad.gif)}
[data-reaction=rage]{background-image:url(https://1.bp.blogspot.com/-J03h_Wz-n0k/XJKUoDsQ9zI/AAAAAAAAGuI/vBmdOdp4YpoFw5yduAaYygUTbRJJqHACACLcBGAs/s0/angry.gif)}
/*]]>*/</style>

Guarda los cambios y listo, el skin se aplicará en tus reacciones, para comprobarlo ve a cualquier articulo y revisa tus reacciones. Si lo hiciste correctamente el resultado será el siguiente:



Conclusiones

Con un poco de estilos puedes hacer que las reacciones tengan un aspecto más agradable o relacionado a la temática de tu blog, lo cual puede ayudarte a conseguir más reacciones por parte de tus lectores.


Compartiré mas skins de diferentes temáticas con el tiempo, si ustedes tienen ideas no duden en dejarla en los comentarios. Si este articulo te fue útil, no olvides compartirlo con tus amigos, siempre me ayuda mucho. Gracias por leer (^▽^)