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(); ?>&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?.
intentas copiar el codigo y te sale :v
Compartir en Facebook
Sigue leyendo en https://hablandodeinternet.com/anadir-botones-compartir-redes-sociales-paginas-amp/
Buenas tardes,
Eso aparece por un plugin que se usa en la web que añade la URL al final del contenido copiado. Estamos actualizando todo el código para que eso no pase. De momento hay que eliminarlo a mano cada vez que se copia.
Un saludo.