Agregar Botones Para Compartir en Entrada de Blog

Una de las mejores oportunidades que desperdiciamos con las visitas a nuestros sitios web es que no facilitemos la opción de compartir publicaciones. Los botones de compartir deben estar a la vista de los visitantes de modo que puedan compartir con un clic en las principales redes sociales. En este post compartimos dos opciones para crear botones de compartir usando sitios especializados shareaholic.com y addthis.com, también tres ejemplos de widget que puedes agregar desde diseño o en el código de la plantilla.

Los botones de compartir deben ser ubicados en las siguientes ubicaciones estratégicas:

  • Después del titulo, al inicio de la publicación
  • Al final de la publicación, antes de los comentarios.
  • En sidebar, barra lateral derecha, pero al inicio.



Agregar Botones de Compartir Usando Sitios Especializados


Para agregar botones de compartir tenemos algunas opciones:

Usar páginas que permiten agregar muchos botones de redes sociales y personalizarlos:

En este blog www.postecnologia.com, tenemos el ejemplo botones de compartir al final de las publicaciones usando shareaholic.
Botones de Compartir con Shareaholic.com


En este blog portafolio.blogspot.com, tenemos el ejemplo botones de compartir al final de las publicaciones usando addthis. También se han agregado las entradas recomendadas en el pie de página.
Botones de Compartir con AddThis.com


Agregar Botones de Compartir Desde Código de la Plantilla 


Usar widget como estos tres ejemplos:

Ejemplo 1. Botones Compartir grandes.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
Compartir este blog
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcddcb73e3ba0d2"></script>
<!-- AddThis Button END -->

Botones Para Compartir en Entrada de Blog


Ejemplo 2. Botones Compartir facebook, twitter, google+ y los demás desplegables.
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_counter addthis_pill_style'/>
</div>

Botones Para Compartir en Entrada de Blog


Ejemplo 3. Botones de Compartir Verticales Flotantes
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:40px;top:180px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831">
</script>
<!-- Scrolling social Button END -->

Botones Para Compartir en Entrada de Blog


Convertir Código HTML a Texto Plano 


En el caso de agregar el widget desde diseño, el código puede pegarse así como está. Pero si se agrega desde código debe cambiarse a texto plano.


Podemos usar esta página:


Pegamos el código del widget en la caja de texto y le damos al botón "Convertir a texto plano", el código resultante es el que se incorpora dentro código de plantilla.

Loading...