¿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

¡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



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.

Related post

Comentarios

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: