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:

https://shareaholic.com/

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

http://www.addthis.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.

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 -->

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>

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 -->

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:

http://www.ciudadblogger.com/p/conversor-de-html-texto-plano.html

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.