Cara pasang widget timeline Twitter di blog AMP, tentunya tutorial ini hanya dapat diterapkan di blog valid AMP. Selain itu, tutorial ini sangat sederhana, Anda hanya perlu mengganti username sesuai dengan username Twitter milik Anda sendiri. Sebelumnya, saya juga sudah memberikan tutorial cara memasang widget timeline twitter di blog non-AMP.
Baca juga: Cara Pasang Widget Timeline Twitter di Blog Non AMP
Silakan Anda ikuti tutorial di bawah ini.
1. Pasang JS iframe AMP
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>2. Pasang HTML iframe
<amp-iframe width='290'
height='300'
sandbox='allow-scripts allow-same-origin allow-popups'
frameborder='0'
scrolling='yes'
src='https://cdn.rawgit.com/fajrinih/amp-twitter/master/twitamp.html?user=katagenit'>
</amp-iframe>Catatan: silakan Anda ganti user (username) dengan user twitter milik Anda sendiri.
Namun, Anda juga bisa menghosting script timeline twitter sendiri. Berikut scriptnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Embed Tweets en Amp</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<style>
iframe{border:0}
</style>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var users = getQueryVariable("user");
</script>
</head>
<body>
<script>
document.write('<a class="twitter-timeline" href="https://twitter.com/'+ users +'">Tweets by Twitter</a>');
</script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>