¿Cómo instalar botones AddThis Inline Share en AMP (páginas móviles aceleradas)?

Aprender a instalar AddThis Inline Share Buttons en su sitio de AMP de una forma fácil y segura con unos simples pasos.

AddThis Inline Share Buttons está disponible para utilizarlo en AMP. Haga que sea sencillo para los usuarios que visitan su blog compartir su contenido gracias a los botones sociales. Permita que sus visitantes se conecten directamente a más de 200 redes sociales, incluyendo Google+, Facebook, Twitter, WhatsApp y más.

Si ya utilizas plantillas de Blogger en el formato AMP, puedes seguir las instrucciones para agregar el nuevo script de AddThis para mostrar botones para compartir tus post "artículos" en las redes sociales.

Empezamos

Antes de realizar cualquier tutorial se recomienda realizar una copia de seguridad de su blog por si algo no le sale bien

Paso 1.- Deberá crear una cuenta AddThis en https://www.addthis.com/register

La creación de una cuenta AddThis es completamente gratuita y le permite acceder a todo el conjunto de herramientas del sitio web, así como a los informes detallados de análisis para comprender mejor el tráfico social de su sitio.

Paso 2.- Diríjase a su panel de control y personalice sus botones Compartir (AMP actualmente solo admite botones de compartir INLINE)

Paso 3.- Seleccione INLINE

Paso 4.- Un clic en Continue


Paso 5.- Ahora le mostrara la siguiente ventana

Paso 6.- Personaliza tus botones para compartir a tu gusto, luego presiona "Activate tool".

Paso 7.- Le mostrara la siguiente ventana

Paso 8.- Active donde dice AMP

Paso 9.- Copie el script

El script para utilizarlo en Blogger es el siguiente:

<script async='async' custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>

Nota: Tenga guardado el código para proceder a insertarlo en Blogger más adelante

Paso 10.- Ahora copie el segundo código generado por AddThis

Ejemplo:

Paso 11.- Instalar los dos códigos generados por AddThis en Blogger

Paso 12.- Un clic en Tema

Paso 13.- Un clic en Editar html

Paso 14.- Busque el siguiente código

body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Paso 15.- Ingrese el script AddThis con un condicional justo después del código que encontró

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script async='async' custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
</b:if>

Ejemplo:

Paso 16.- Busque el siguiente código

<div class='post hentry'>

Paso 17.- Inserte el siguiente código con un condicional justo después del código que encontró

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-addthis
            height='92'
            layout='flex-item'
            data-pub-id="ra-5aeb6ea2a67b1aac"
            data-widget-id="yrjm">
</amp-addthis>
</b:if>

Realice los siguientes cambios:

Cambie los dos IDs que se encuentram en las lineas

            data-pub-id="ra-5aeb6ea2a67b1aac"
            data-widget-id="yrjm"

Remplace el ID: ra-5aeb6ea2a67b1aac

Remplace el ID: yrjm

Tiene que remplazar por los IDs de su código AddThis

Ejemplo:

Paso 18.- Un clic en Guardar Tema

Visite su blog

Preguntas frecuentes

Cómo editar el amp-sidebar barra lateral de mi blog en AMP de Blogger
¿Cómo publicar una entrada de Blogger correctamente en Amp?
¿Cómo habilitar la plantilla móvil de mi blog de Blogger en AMP?
Cómo configurar los comentarios de Disqus de mi blog en AMP de Blogger
¿Cómo configurar el gadget Related post? de mi plantilla en AMP de Blogger
Invalid Amp Error al crear un nuevo Gadget/Widget en Blogger
¿Cómo agregar Google AdSense en un Widget de Blogger en AMP HTML?
¿Cómo añadir Google AdSense a tus entradas de Blogger en AMP HTML?
Anuncios automáticos AMP de texto y de display
Corregir error en los datos estructurados al configurar en Blogger
Corregir error en los datos estructurados - error detectado Breadcrumb
Cómo editar las meta etiquetas de las plantillas de Blogger en AMP
¿Cómo configurar los datos estructurados de mi blog de Blogger en AMP?


¡Fácil verdad!

¿Necesitas ayudas?

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Amp en Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.