Cara Pasang Widget Timeline Twitter di Blog AMP



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>


Comments and Reactions

Comment Policy: Saya sangat menerima komentar yang relevan dari Anda. Dengan hormat, diskusi hangat dari Anda, saya nantikan. Saya harap Anda sudah membaca kebijakan komentar secara lengkap.
Pendapatmu :
Buka Komentar