Amp html'in daha hızlı çalışması için normal javascript kodları kapalıdır.Ama bazı apilerin çalışması için sayfaya javascript kodlarını dahil etmemiz gerekiyor.Örneğin
analytics veya
adsense gibi.Bunun için bize sayfaya dahil edebildiğimiz bir çok javascript dosyası sunmuşlar.Bunları sayfaya dahil ettiğimizde o kodlar çalışabiliyor.
Şuradan
https://github.com/ampproject/amphtml/tree/master/extensions tüm apilere ulaşabilirsiniz.Kullanacağımız apinin dosyasını head tagları arasına dahil ediyoruz.Örneğin analytics için
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
bu şekilde.Daha sonra apinin js kodlarını aşağıdaki taglar
<script type="application/ld+json">
</script>
arsasına yazıyoruz.
Facebook,twitter,youtube,jwplayer,izlesene vs bir çok popüler 3 taraf eklentisini destekliyor.
Css kodlarımızı head tagları arsında
<style amp-custom>
</style>
bu şekilde style tagı açarak yazabiliyoruz.Dikkat etmemiz gereken
type="text/css" yazmıyoruz.
amp-custom parametresini veriyoruz.
Genel Örnek :
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="urun-1.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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<style amp-custom>
.baslik{width:90%;height:40px;line-height:40px;text-align:center;background:#ddd;margin:25px auto 25px auto;}
</style>
</head>
<body>
<div class="baslik">UstaDerslik</div>
<amp-youtube data-videoid="QwJU9beMU7I" layout="responsive" width="480" height="270"></amp-youtube>
</body>
</html>