amp-social-share
Ekstensi Social Share menyediakan antarmuka umum untuk tombol, yang dirancang untuk saling melengkapi di semua situs web.
1 Struktur utama
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
2 Masukkan script berikut tepat di bawah pembukaan <head>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Pastikan URL Anda disetel.
<link rel="canonical" href="https://blogsgoblogger.blogspot.com/2016/12/cara-memasukkan-tombol-sosial-di-amp.html">
3 Masukkan STYLE berikut tepat sebelum </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
- Masukkan widget amp-social-share dan pastikan Anda memilih tombol yang ingin Anda tampilkan di situs web.
amp-social-share dengan type="facebook" harus ditentukan ID aplikasi facebook melalui data-attribution.
Code
<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>
Demo
5 Configuration
Masukkan widget amp-social-share sesuai pilihan Anda, lalu konfigurasikan tindakan.
width Default 60px.
height By default 44px.
data-param-text is the text to include in the shared resource.
data-param-url is the URL to share, current default URL.
data-param-attribution is where the proportion is attributed.
Everyone data-param-* default attributes will be converted into URL parameters and passed to the action end point.
Code
<amp-social-share type="linkedin"
width="40"
height="40"
data-param-text="Check out these AMP Examples!"
data-param-url="https://blogsgoblogger.blogspot.com/2016/12/cara-memasukkan-tombol-sosial-di-amp.html"
data-param-attribution="AMPhtml">
</amp-social-share>
Demo
6 Gaya khusus
Setiap kali Anda ingin memberikan gaya Anda sendiri, gunakan properti CSS di dalamnya <style amp-custom> elemen (Ubah presentasi). Ini akan membuat gambar sensitif dan terpusat, dan gaya default ditimpa.
background-color Jika Anda ingin item menjadi warna yang berbeda.
background-image Berikan gambar lain jika Anda ingin mengubah ikon.
background-repeat (saat menggunakan gambar latar belakang), ajuste a no-repeat
background-position (saat menggunakan gambar latar belakang), ajuste a center
background-size (kapan digunakan background-image), ajuste a contain
Code
<amp-social-share type="linkedin"
class="custom-style">
</amp-social-share>
Demo
Full struktur kode lengkap
<!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="https://blogsgoblogger.blogspot.com/2016/12/cara-memasukkan-tombol-sosial-di-amp.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="https://blogsgoblogger.blogspot.com/2016/12/cara-memasukkan-tombol-sosial-di-amp.html"
data-param-attribution="AMPhtml">
</amp-social-share>
<amp-social-share type="linkedin"
class="custom-style">
</amp-social-share>
</body>
</html>