¿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>
Comentarios
Disqus comments:
Facebook comments: