¿Cómo añadir las últimas entradas y botones de redes en AMP?

Después de las entradas de hace un rato sobre: Añadir los últimos posts publicados al final de páginas AMP y ¿Cómo añadir botones para compartir en redes sociales en páginas AMP?, ahora un post con la combinación de ambos.

Para ello añadimos en el archivo functions.php del tema activo el siguiente código al final:

 function my_amp_social_media_share_latest_posts_bottom( $amp_template ) {
	if ( shortcode_exists( 'amp-recent-posts' ) ) {
		?>
			<div class="amp-wp-content">
				<?php echo do_shortcode( "[amp-recent-posts append='amp' heading='Nuestras últimas publicaciones:' max='5']" ); ?>
			</div>
		<?php
	}
	?>
		<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_latest_posts_bottom' );

Y para darle formato a los botones de compartir en redes sociales, 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, en el post ¿Cómo añadir botones para compartir en redes sociales en páginas AMP? está explicado como añadir los estilos también directamente en el functions.php.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Los comentarios de esta página se procesan por un sistema automático de moderación por lo cual no siempre se publican de forma instantánea. Por favor respeta a los demás y ciñete al tema del post. Nos reservamos el derecho de eliminar cualquier comentario o enlace que nos parezca inadecuado o tenga una expresión de grosería, insulto, odio, hostilidad o negatividad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.