AMP para WordPress-Añadir Redes Sociales para Compartir tus entradas

Añadir Redes Sociales para compartir en AMP para WordPress

Hoy, a petición de un usuario del blog de empresa, vuelvo de nuevo a escribir en este olvidado mi blog y en relación a un artículo que escribí sobre AMP para WordPress, empezaré a enseñar como ir modificando nuestras entradas de AMP para WordPress, en este caso añadiremos los botones de redes sociales para compartir cada entrada de vuestro blog hacia la versión AMP, que es lo que nos interesa.

Como sabrás AMP para WordPress permite una carga rápida de la información en entorno móvil, también en pc y tablets, aunque se ha creado para ello, sin distracciones, es decir sin cargas de javascript y css externos, sin objetos dinámicos que nos distraigan del artículo en cuestión, que es lo que deseamos leer de una forma pausada y relajada.

AMP para WordPress solo esta disponible para artículos y noticias

Su defecto es que hay que añadir al final de la url /amp o bien /?amp=1 según si has modificado los enlaces permanentes (url amigable) o has dejado el que viene por defecto (url no amigable).

Vamos a lo que nos atañe, lo primero ir a descargar el plugin e instalarlo, ya sabemos como, que no lo sabes, vamos a plugins>añadir nuevo>buscamos AMP y descargamos e instalamos el que corresponde a Automattic.

Abre tu editor de texto o de código que prefieras (dreamweaver, sublime text, notepad, etc…) y en plugins>amp>templates dentro de wp-content crea un archivo llamado social-data.php, ahí vamos a incluir nuestras distintas redes sociales, podemos incluir las que deseemos, aunque en este caso solo te voy a mostrar las correspondientes a Facebook, Google+ y Twitter.

Copia y pega el código que te muestro ahora en el archivo que acabamos de crear llamado social-data.php

<div>
<!-- Sharingbutton Twitter -->
<a id="twitter" class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=<?php echo esc_html( $this->get( 'post_title' ) ); ?>&amp;url=<?php echo esc_url( get_permalink() ); ?>amp/&amp;hashtags=AmpWordPress&amp;via=mndesign_es" target="_blank" aria-label="">
<div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/>
</g>
</svg>
</div>
</div>
</a>

<!-- Sharingbutton Google+ -->
<a id="google" class="resp-sharing-button__link" href="https://plus.google.com/share?url=<?php echo esc_url( get_permalink() ); ?>amp" target="_blank" aria-label="">
<div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<path d="M11.366,12.928c-0.729-0.516-1.393-1.273-1.404-1.505c0-0.425,0.038-0.627,0.988-1.368 c1.229-0.962,1.906-2.228,1.906-3.564c0-1.212-0.37-2.289-1.001-3.044h0.488c0.102,0,0.2-0.033,0.282-0.091l1.364-0.989 c0.169-0.121,0.24-0.338,0.176-0.536C14.102,1.635,13.918,1.5,13.709,1.5H7.608c-0.667,0-1.345,0.118-2.011,0.347 c-2.225,0.766-3.778,2.66-3.778,4.605c0,2.755,2.134,4.845,4.987,4.91c-0.056,0.22-0.084,0.434-0.084,0.645 c0,0.425,0.108,0.827,0.33,1.216c-0.026,0-0.051,0-0.079,0c-2.72,0-5.175,1.334-6.107,3.32C0.623,17.06,0.5,17.582,0.5,18.098 c0,0.501,0.129,0.984,0.382,1.438c0.585,1.046,1.843,1.861,3.544,2.289c0.877,0.223,1.82,0.335,2.8,0.335 c0.88,0,1.718-0.114,2.494-0.338c2.419-0.702,3.981-2.482,3.981-4.538C13.701,15.312,13.068,14.132,11.366,12.928z M3.66,17.443 c0-1.435,1.823-2.693,3.899-2.693h0.057c0.451,0.005,0.892,0.072,1.309,0.2c0.142,0.098,0.28,0.192,0.412,0.282 c0.962,0.656,1.597,1.088,1.774,1.783c0.041,0.175,0.063,0.35,0.063,0.519c0,1.787-1.333,2.693-3.961,2.693 C5.221,20.225,3.66,19.002,3.66,17.443z M5.551,3.89c0.324-0.371,0.75-0.566,1.227-0.566l0.055,0 c1.349,0.041,2.639,1.543,2.876,3.349c0.133,1.013-0.092,1.964-0.601,2.544C8.782,9.589,8.363,9.783,7.866,9.783H7.865H7.844 c-1.321-0.04-2.639-1.6-2.875-3.405C4.836,5.37,5.049,4.462,5.551,3.89z"/>
<polygon points="23.5,9.5 20.5,9.5 20.5,6.5 18.5,6.5 18.5,9.5 15.5,9.5 15.5,11.5 18.5,11.5 18.5,14.5 20.5,14.5 20.5,11.5 23.5,11.5 "/>
</g>
</svg>
</div>
</div>
</a>
<!-- Sharingbutton Facebook -->
<a id="facebook" class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>amp" target="_blank" aria-label="">
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<path d="M18.768,7.465H14.5V5.56c0-0.896,0.594-1.105,1.012-1.105s2.988,0,2.988,0V0.513L14.171,0.5C10.244,0.5,9.5,3.438,9.5,5.32 v2.145h-3v4h3c0,5.212,0,12,0,12h5c0,0,0-6.85,0-12h3.851L18.768,7.465z"/>
</g>
</svg>
</div>
</div>
</a>
</div>

Como puedes observar, las imágenes son SVG que facilitan una carga mayor que en otro formato como puedan ser PNG, JPG, JPEG… y las url´s de cada red social finalizan en «amp», de esa forma cuando se comparta en redes sociales visitaran dicha url.

Y ahora vamos a darles unos estilos de forma que queden alineados en horizontal y le daremos color a los iconos de nuestras redes sociales, vamos a ello, nos dirigimos a nuestro plugin de nuevo y en la misma carpeta templates buscamos el archivo style.php, al final de dicho archivo añadimos el siguiente código

.resp-sharing-button {
  display: inline-block;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  transition: background-color 25ms ease-out, border-color 25ms ease-out, opacity 250ms ease-out;
  margin: 0.5em;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

.resp-sharing-button a {
  text-decoration: none;
  color: #FFF;
  display: block;
}

.resp-sharing-button__icon {
  display: inline-block;
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-bottom: -0.1em;
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #FFF;
  fill: none;
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #FFF;
  stroke: none;
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #FFF;
}

.resp-sharing-button--large .resp-sharing-button__icon svg {
  padding-right: 0.4em;
}

.resp-sharing-button__wrapper {
  display: inline-block;
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--google {
  background-color: #dd4b39;
  border-color: #dd4b39;
}

.resp-sharing-button--google:hover,
.resp-sharing-button--google:active {
  background-color: #c23321;
  border-color: #c23321;
}

Ahora ya nos queda un último paso y es el añadir el archivo social-data.php a nuestra plantilla, para ello vamos a la carpeta templates, de nuevo y abrimos el archivo single.php y después de la etiqueta

<div class="amp-wp-content">

Añadimos el siguiente código php

<?php $this->load_parts( array( 'social-data' ) ); ?>

De esta forma tan simple podemos permitir a nuestros seguidores compartir nuestras entradas en AMP para WordPress.

Si deseas añadirlo también a pie de página puedes añadirlo después del siguiente código

<?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>

Recuerda guardar dichos datos, ya que con cada actualización de este plugin tendrás que volver a añadirlos, supongo que poco a poco irá mejorando y esperemos que en breve se puedan añadir ciertos datos desde el panel de administración.

Si te interesa indagar más sobre el tema puedes visitar

Proyecto Open Source Github: Proyecto AMP para WordPress

Blog Google Español: Accelerated Mobile Pages

Blog de Empresa Versión AMP: Acelerando la carga de noticias

cybmeta: Filtros y Action para WordPress

Si te ha interesado este artículo compártelo y si tienes alguna idea para mejorarlo déjanos tu aporte así como tus dudas en los comentarios