Cargando...


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

Haga clic aquí para ver los comentarios 0 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios

Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Directorios Web. Publicar Blogs


En estos sitios puedes promocionar tus sitios web y blog
Directorio de Blogs Blogazos.com Directorio Mexicano Directorio 360dir

Formulario de Contacto

Nombre

Correo electrónico *

Mensaje *

Blogs de Tecnología