Ya no basta con escribir publicaciones de blog. Debe asegurarse de que su contenido se pueda compartir fácilmente en todas las principales redes sociales. Para facilitar esto, Blogger ha agregado recientemente una opción de “botones para compartir”. Agregar estos botones a su blog de Blogger es bastante sencillo. Navega a tu panel de Blogger, selecciona Diseño , sigue Editar debajo del cuadro ” Publicaciones de Blog ” y se abrirá una ventana emergente. Esta ventana emergente tendrá una opción ” Mostrar botones para compartir” , selecciónela y seleccione Guardar en la ventana emergente y Guardar en la página principal.
Junto a la publicación de tu blog, aparecerán los botones para compartir.
Sin embargo, los botones para compartir predeterminados tienen una funcionalidad bastante limitada, ya que no le permiten seleccionar las redes sociales que desea que se muestren y, lo que es más importante, no tienen los botones ” Me gusta” de Facebook o ” Tweet ” de Twitter , que se han vuelto omnipresentes en La web.
Por lo tanto, en este artículo describiré cómo agregar botones para compartir a su blog desde una variedad de redes sociales, específicamente desde Facebook y Twitter.
Configuración AddThis
Hay varias formas de agregar botones para compartir a su blog, incluida una variedad de servicios web e incluso desde los sitios oficiales de Facebook y Twitter, sin embargo, prefiero usar AddThis ya que es simple y altamente configurable.
Una vez que se haya registrado para obtener una cuenta, seleccione “Obtener AddThis ” en la página principal para comenzar a personalizar sus botones.
A continuación, se le presentará un código HTML para agregar a su sitio web. Si agrega este código a su blog, los botones para compartir se verán como Vista previa . Sin embargo, si desea personalizar aún más sus botones, seleccione ” Personalizar> “.
Aquí tiene más opciones para seleccionar la plataforma a la que desea agregar los botones y su estilo. Seleccione el estilo que desee para sus botones. En lugar de seleccionar Blogger en Plataforma , seleccione Sitio web . Esto asegurará que se muestre el código HTML completo del botón de compartir y que pueda modificarlo más tarde. Los estilos pueden parecer limitados en este punto, pero seleccione el que se parezca más a cómo desea que se vean sus botones para compartir y seleccione Grab It para copiar el código.
Ahora debes pegar este código en tu blog de Blogger. Para hacerlo, vaya al panel de control de su blog, seleccione Diseño y luego Editar HTML . Aparecerá el código HTML completo de tu blog. A continuación, seleccione Expandir plantillas de widgets .
Dependiendo de dónde desee que aparezcan los botones para compartir en su blog, puede agregar el código HTML de AddThis en consecuencia. Me gusta tener los botones justo debajo del texto real de mi blog, así que coloco el código AddThis debajo de la <div class='post-footer'>etiqueta.
Una vez que haya pegado el código en la ubicación deseada, seleccione Guardar plantilla y vea su blog.
Personalizar los botones para compartir de AddThis
Prometí anteriormente que AddThis te permite personalizar tus botones más allá de las limitaciones de los de Blogger. Para hacerlo, deberá editar el código HTML de AddThis.
El código predeterminado es el siguiente:
<! - Botón AddThis BEGIN ->
<div class = 'addthis_toolbox addthis_default_style'>
<a class='addthis_button_preferred_1'/>
<a class='addthis_button_preferred_2'/>
<a class='addthis_button_preferred_3'/>
<a class='addthis_button_preferred_4'/>
<a class='addthis_button_compact'/>
<a class='addthis_counter addthis_bubble_style'/>
</div>
<script type = 'text / javascript'> var addthis_config = {& quot; data_track_clickback & quot;: true}; </script>
<script src = '<a href = "http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dcb70d5116e62a2'"> http://s7.addthis.com/js/250/ addthis_widget.js # pubid = ra-4dcb70d5116e62a2 '</a> type =' text / javascript '/>
<! - Botón AddThis END ->
Funciones generales
La primera parte del código <div class='addthis_toolbox addthis_default_style '>controla las funciones generales de los botones. Le recomiendo que agregue lo siguiente a esta etiqueta:
<div class = 'addthis_toolbox addthis_default_style' expr: addthis: title = 'data: post.title' expr: addthis: url = 'data: post.url'>
La expr:addthis:title='data:post.title'parte del código muestra automáticamente el título de su publicación en todo lo que comparte. Entonces, por ejemplo, si hace clic en el botón Compartir de Twitter, el Tweet se formateará para mostrar el título de la publicación actual del blog. Del mismo modo, la expr:addthis:url='data:post.url'parte garantiza que la URL permanente de la publicación actual del blog se adjunte a su contenido compartido.
Por lo tanto, si seleccionara la opción para compartir en Twitter, su tweet para la publicación se vería así:
Facilite la tecnología http://t.co/nCLRCEE a través de @AddThis
Primero, se muestra el título de la publicación del blog, luego la URL y finalmente el tweeter original.
Botones adicionales
El siguiente conjunto de opciones le <a class='addthis_button_preferred_1'/>permite seleccionar los tipos de botones para compartir que desea mostrar. Recomiendo echar un vistazo a la lista de servicios para ver la lista completa de botones para compartir disponibles (la mayoría de las redes sociales están disponibles y puede solicitar que se agreguen más).
Para cambiar un botón para compartir, simplemente modifique esta etiqueta con el nombre del servicio que desea mostrar. Por ejemplo:
una clase = 'addthis_button_tweet' tw: via = 'abhiroopbasuu' /> <a class='addthis_button_facebook_like'/>
Esto mostrará el botón Tweet y el botón ” Me gusta ” de Facebook en lugar de los botones “preferidos” predeterminados. Además, la tw:via='abhiroopbasuu'parte asegura que cuando alguien comparte mis publicaciones usando Twitter, la publicación se muestra como proveniente de mi nombre de usuario (en lugar de @AddThis).
Código final
Mi código AddThis, que incorpora la configuración anterior, es el siguiente:
<! - Botón AddThis BEGIN ->
<div class = 'addthis_toolbox addthis_default_style' expr: addthis: title = 'data: post.title' expr: addthis: url = 'data: post.url'>
<a class='addthis_button_tweet' tw_via='abhiroopbasuu'/>
<a class='addthis_button_facebook_like'/>
</div>
<script type = 'text / javascript'> var addthis_config = {"data_track_clickback": true}; </script>
<script src = 'http: //s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dcb70d5116e62a2? tipo = 'texto / javascript' />
<! - Botón AddThis END ->
En mi blog aparece de la siguiente manera:
Conclusión
Las opciones de personalización de AddThis son ilimitadas y admite una gran cantidad de servicios. Es imposible delinear cada combinación, sin embargo, le recomendaría que pruebe algunas opciones diferentes y vea qué funciona y qué se ve bien.
