Simplemente escribir publicaciones de blog ya no es suficiente. Debe asegurarse de que su contenido se pueda compartir fácilmente en todas las principales redes sociales. Para hacer esto más fácil, Blogger ha agregado recientemente una opción de «botones para compartir». Agregar estos botones a su blog de Blogger es bastante sencillo. Navegue a su panel de control de Blogger, seleccione Diseño, siga por Editar en el cuadro «Publicaciones de blog» y se abrirá una ventana emergente. Esta ventana emergente tendrá la opción «Mostrar botones de compartir», selecciónela y seleccione Guardar en la ventana emergente y Guardar en la página principal.
Junto a la entrada de tu blog aparecerán los botones de compartir.
Sin embargo, los botones predeterminados para compartir tienen una funcionalidad bastante limitada, ya que no le permiten seleccionar las redes sociales que desea mostrar 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.
Configurar 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 Agrega esto 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.
Luego 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 la Vista previa. Sin embargo, si desea personalizar aún más sus botones, seleccione «Personalizar >».
Aquí tienes más opciones para seleccionar la plataforma a la que quieres añadir 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 puedas 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 debe pegar este código en su blog de Blogger. Para hacerlo, navegue hasta el panel de control de su blog, seleccione Diseño, seguido de 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 de 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 del <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.
Personalización de los botones para compartir de AddThis
Prometí anteriormente que AddThis le permite personaliza tus botones más allá de las limitaciones de las de Blogger. Para hacerlo, deberá editar el código HTML de AddThis.
El código predeterminado es el siguiente:
<!-- AddThis Button 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 = {"data_track_clickback":true};</script>
<script src="<a href="https://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dcb70d5116e62a2"">https://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dcb70d5116e62a2'</a> type="text/javascript"/>
<!-- AddThis Button END -->
Funciones generales
La primera parte del código. <div class="addthis_toolbox addthis_default_style "> controla las funciones generales de los botones. Te recomiendo que agregues lo siguiente a esta etiqueta:
<div class=’addthis_toolbox addthis_default_style’ expr:addthis:title=’data:post.title’ expr:addthis:url=’data:post.url’>
los 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 de blog actual. Del mismo modo, el expr:addthis:url="data:post.url" parte asegura que la URL permanente de la publicación de blog actual se adjunte a su contenido compartido.
Entonces, si tuviera que seleccionar la opción de compartir en Twitter, su tweet para la publicación se vería así:
Facilitar la tecnología https://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 <a class="addthis_button_preferred_1"/> le 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 de compartir, simplemente modifique esta etiqueta con el nombre del servicio que desea mostrar. Por ejemplo:
a class=’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, el tw:via="abhiroopbasuu" parte asegura que cuando alguien comparte mis publicaciones usando Twitter, la publicación se muestra como originaria de mi nombre de usuario (en lugar de @AddThis).
Código definitivo
Mi código AddThis, que incorpora la configuración anterior, es el siguiente:
<!– AddThis Button 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=’https://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dcb70d5116e62a2? type=’text/javascript’/>
<!– AddThis Button END –>
En mi blog aparece de la siguiente manera:
Conclusión
Las opciones de personalización en AddThis son ilimitadas y admite una gran cantidad de servicios. Es imposible delinear cada combinación individual, sin embargo, le recomendaría que pruebe algunas opciones diferentes y vea qué funciona y qué se ve bien.