¿Cómo añadir botones para compartir en redes sociales en páginas AMP?

Además de añadir las últimas entradas publicadas al final de las páginas AMP, también nos puede interesar incluir botones para compartir la página (OJO: la versión no AMP) en redes sociales. Y todo esto conforme a las especificaciones AMP (sin Javascript).

Para ello hay que añadir al archivo functions.php del tema activo las siguientes líneas:

function my_amp_social_media_share_bottom( $amp_template ) {
	?>
		<div class="amp-share">
	 
		<!-- Twitter -->
		<a target="_blank" href="https://twitter.com/share?text=<?php the_title_attribute(); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" class="as-twitter" title="Tuitear">Tuitear</a>
	 
		<!-- Facebook -->
		<a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" class="as-facebook" title="Compartir en Facebook">Compartir en Facebook</a>
	 
		<!-- Google+ -->
		<a target="_blank" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" class="as-gplus" title="Compartir en G+">Compartir en G+</a>
	 
		<!-- Linkedin -->
		<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_permalink()); ?>" class="as-linkedin">Compartir en LinkedIn</a>
	 
		</div>
    <?php
}
add_action( 'amp_post_template_footer', 'my_amp_social_media_share_bottom' );

Este código nos muestra botones para compartir en: Twitter, Facebook, Google+ y LinkedIn y está basado en un post de IsabelCastillo.com.

Para darle formato añadimos en el archivo style.php que deberíamos tener en la carpeta /amp/ del tema activo las siguientes líneas (si nos sabes de qué te estoy hablando, lee esto primero: ¿Cómo personalizar el pie de página de las páginas AMP?):

.amp-share{
	max-width: 678px;
	margin: 36px auto;
}
.amp-share a {
	margin:10px 5px;
	line-height: 1;
	color:#fff;
	padding:3px 6px;
	text-decoration:none;
}
.amp-share a:hover{
	color:#fff;
	text-decoration:none;
}

.amp-share .as-facebook {
	background-color: #3B5998;
}
.amp-share .as-twitter {
	background-color:#00aced;
}
.amp-share .as-gplus {
	background-color:#dd4b39;
}
.amp-share .as-linkedin {
	background-color:#0077b5;
}

Aunque si no tenéis un archivo style.php personalizado, también lo podéis añadir en el tema de WordPress activo en el archivo functions.php:

function my_amp_social_media_share_css( $amp_template ) {
    ?>
.amp-share{
	max-width: 678px;
	margin: 36px auto;
}
.amp-share a {
	margin:10px 5px;
	line-height: 1;
	color:#fff;
	padding:3px 6px;
	text-decoration:none;
}
.amp-share a:hover{
	color:#fff;
	text-decoration:none;
}

.amp-share .as-facebook {
	background-color: #3B5998;
}
.amp-share .as-twitter {
	background-color:#00aced;
}
.amp-share .as-gplus {
	background-color:#dd4b39;
}
.amp-share .as-linkedin {
	background-color:#0077b5;
}
    <?php
}
add_action( 'amp_post_template_css', 'my_amp_social_media_share_css' );

P.D. Si también quieres añadir los últimos posts publicados, aquí tienes un post que combina esté código con el de compartir en redes sociales: ¿Cómo añadir las últimas entradas y botones de redes en AMP?.