¿Cómo insertar botones sociales en Amp HTML?


amp-social-share


La extensión Social Share proporciona una interfaz común para botones, diseñado para complementarse entre sí en todos los sitios web.

1 Estructura principal


<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

2 Ingrese el siguiente script justo abajo de la apertura del <head>


<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Asegúrese de que este configurado su URL canónica.

<link rel="canonical" href="http://amphtmlejemplos.blogspot.com/2016/12/como-insertar-botones-sociales-en-amp-html.html">

3 Ingrese los siguientes estilos justo antes del </head>



<style amp-custom>
    amp-social-share.custom-style {
      background-color: #008080;
      background-image: url('https://raw.githubusercontent.com/google/material-design-icons/master/social/1x_web/ic_share_white_48dp.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  </style>

4 Uso básico

- Insertar el widget amp-social-share y asegúrese de elegir los botones que desee mostrar en su sitio web.

amp-social-share con type="facebook" requiere especificar el ID de la aplicación de facebook a través del data-attribution.

Código


 <div>
    <amp-social-share type="twitter"></amp-social-share>
    <amp-social-share type="gplus"></amp-social-share>
    <amp-social-share type="email"></amp-social-share>
    <amp-social-share type="pinterest"></amp-social-share>
    <amp-social-share type="linkedin"></amp-social-share>
    <amp-social-share type="facebook"
        data-param-app_id="254325784911610"></amp-social-share>
    <amp-social-share type="tumblr"></amp-social-share>
  </div>

Demostración



5 Configuración

Insertar el widget amp-social-sharea su elección, a continuación, configurar las acciones.

width Por defecto 60px.
height Por defecto 44px.
data-param-text es el texto para incluir en el recurso compartido.
data-param-url es la URL para compartir, actual URL por defecto.
data-param-attribution es donde la proporción se atribuye.
Todos los data-param-* atributos prefijados se convertirán en parámetros de URL y se pasa al punto final de la acción.

Código

 <amp-social-share type="linkedin"
      width="40"
      height="40"
      data-param-text="Check out these AMP Examples!"
      data-param-url="http://amphtmlejemplos.blogspot.com/2016/12/como-insertar-botones-sociales-en-amp-html.html"
      data-param-attribution="AMPhtml">
  </amp-social-share>

Demostración



6 Estilo personalizado

Cada vez que desee proporcionar su propio estilo, usar las propiedades CSS dentro de <style amp-custom> elemento ( Modificar la presentación). Esto hará que la imagen se mantenga sensible y centrada, y el estilo por defecto se sobrescribe.


background-color Si desea que el elemento sea de un color diferente.
background-image Proporcionar otra imagen si desea cambiar el icono.
background-repeat (cuando se utiliza background-image), ajuste a no-repeat
background-position (cuando se utiliza background-image), ajuste a center
background-size (cuando se utiliza background-image), ajuste a contain

Código

<amp-social-share type="linkedin"
      class="custom-style">
  </amp-social-share>

Demostración



A continuación la estructura completa del código

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

<link rel="canonical" href="http://amphtmlejemplos.blogspot.com/2016/12/como-insertar-botones-sociales-en-amp-html.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
    amp-social-share.custom-style {
      background-color: #008080;
      background-image: url('https://raw.githubusercontent.com/google/material-design-icons/master/social/1x_web/ic_share_white_48dp.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  </style>
</head>
<body>
 <div>
    <amp-social-share type="twitter"></amp-social-share>
    <amp-social-share type="gplus"></amp-social-share>
    <amp-social-share type="email"></amp-social-share>
    <amp-social-share type="pinterest"></amp-social-share>
    <amp-social-share type="linkedin"></amp-social-share>
    <amp-social-share type="facebook"
        data-param-app_id="254325784911610"></amp-social-share>
    <amp-social-share type="tumblr"></amp-social-share>
  </div>

<amp-social-share type="linkedin"
      width="40"
      height="40"
      data-param-text="Check out these AMP Examples!"
      data-param-url="http://amphtmlejemplos.blogspot.com/2016/12/como-insertar-botones-sociales-en-amp-html.html"
      data-param-attribution="AMPhtml">
  </amp-social-share>

<amp-social-share type="linkedin"
      class="custom-style">
  </amp-social-share>
</body>
</html>



Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: