Como poner iconos de redes sociales al final de cada entrada.
By Consuelo Tornero - viernes, octubre 17, 2014
Buenos días amores! Hoy os quiero mostrar como podéis poner los botones de las redes sociales al final de cada uno de vuestros post. Muchas de vosotras ya lo sabreis e incluso también los habréis puesto en vuestros blog. Pero para aquellas que todavía están un poco perdidas a la hora de decorar vuestros blogs pues aquí os dejo esta entrada para que podáis ponerlo aquellas que lo deseen.
Este es el aspecto que tendrán las reces sociales cuando las colocamos al final de cada uno de los post:
Para poder colocarlos en nuestro blog tenemos que seguir estos pasos:
- Realiza una copia de seguridad antes de cualquier cambios para poder volver atrás en caso de error.
- Dentro de Blogger, dirígete a "Plantilla" y pulsa el botón "Editar HTML" para realizar los siguientes pasos.
- Pulsa CONTROL + F dentro del recuadro de código y busca: <b:includable id='shareButtons' var='post'>
Si
encuentras shareButtons dos veces, es
porque una de ellas pertenece al móvil. Haz los cambios sobre la zona donde
encuentres <b:includable id='shareButtons'
var='post'> por segunda vez.
En esa zona se encuentran todos los botones para compartir que por defecto Blogger añade en tu plantilla a tus entradas. Es a partir de esta zona donde vamos a añadir los botones para redes sociales que precisemos.
Cambia el código que se encuentra bajo el <b:includable id='shareButtons' var='post'> por este otro. Así sustituirás uno por otro:
En esa zona se encuentran todos los botones para compartir que por defecto Blogger añade en tu plantilla a tus entradas. Es a partir de esta zona donde vamos a añadir los botones para redes sociales que precisemos.
Cambia el código que se encuentra bajo el <b:includable id='shareButtons' var='post'> por este otro. Así sustituirás uno por otro:
<b:if cond='data:blog.pageType == "item"'>
<table cellspacing='0' width='100%'>
<tr>
<td align='left'>
<div class='fb-like' data-href='http://DIRECCIÓN_DE_TU_BLOG/' data-layout='button_count' data-show-faces='false' data-width='450'/>
<div class='fb-send' data-href='http://DIRECCIÓN_DE_TU_BLOG'/>
</td>
<td>
<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<script type="text/javascript">
window.___gcfg = {lang: 'es'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</td>
<td align='left'>
<a class='twitter-follow-button' data-lang='es' data-show-count='false' href='https://DIRECCIÓN_TWITTER'>Seguir a @NOMBRE_EN_TWITTER</a>
<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>
</td>
<td align='left'>
<a class='twitter-share-button' data-lang='es' data-via='NOMBRE_EN_TWITTER' href='https://twitter.com/share'>Twittear</a>
<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>
</td>
</tr>
</table>
</b:if>
</b:includable>
El codigo en rojo lleva todos los botones metidos en una tabla: codigo <b:if
cond='data:blog.pageType == "item"'> al final de todo el añadido se cierra con un </b:if> es el que se encarga de conseguir que solo se dibujen los botones de las redes sociales cuando el usuario lea la entrada que hemos hecho. Con esto impediremos que se dibujen en la pagina principal haciendo que solo se vean cuando los que visiten tu entrada hagan "clic" en mas informacion. Solo tienes que rellenar los textos que hay en azul y a puedes disfrutar de tus iconos de las redes sociales al final de cada una de las entradas que hagas.
En verdad es muy fácil de hacer. Espero que os haya sido de ayuda. UN BESOTE!!!
" / />
0 comments