Cara membuat post embed twitter dan embed timeline twitter di AMP

BLOG MOBILE.


     Salam kali hari ini saya akan mencoba membuat tutorial cara embed twitter di blog AMP HTML atau lebih tepat nya embed post twitter ke blog AMP selain itu saya mencoba membuat timeline twitter di blog AMP HTML.

Sebenarnya untuk membuat embed twitter di AMP hampir sama seperti cara embed instragram bedanya kalo embed twitter kita cukup ambil ID  nya saja

Example:
http://twitter.com/encepnurdin62/status/863583709856882688

seperti yang sudah saya singgung di atas saya akan mencoba buat embed post twitter dan embed timeline twitter.

EMBED POST TWITTER 

Langkah pertama Silahkan simpan dulu AMP js di tag HEAD

<script async='async' custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Langkah kedua untuk membuat postingan kita dalam mode HTML kodenya.
<amp-twitter width="400"
      height="350"
      layout="responsive"
      data-tweetid="863583709856882688"
      data-cards="hidden">
  </amp-twitter>

HASILNYA
Dan untuk menampilkan embed dengan gambar kodenya.
<amp-twitter width="400"
      height="492"
      layout="responsive"
      data-tweetid="863583709856882688">
  </amp-twitter>

HASILNYA
EMBED TIMELINE TWITTER DI AMP

Sebelumnya saja jelaskan untuk membuat embed timeline twitter di AMP HTML sebenarnya sama saja kita embed timeline twitter di blog HTML bisa tapi kita harus menghosting dulu script twitter nya hehe
Langsung saja buka akun twitter anda masuk ke setting lalu pilih widget.
silahkan sesuikan mode tampilan nya sesuai selera anda misalnya mau tampil putih atau hitam dan lain lain
lalu ambil kodenya
Contoh kodenya seperti ini.
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/encepnurdin62" data-widget-id="736579386590138371">Tweet oleh @encepnurdin62</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
Sekarang simpan kode ini misalnya dengan ektensi HTML Twitter.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>timeline twitter</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'/>
<style>
body {
  background-color:white;
  margin:0;
  padding:0;
  color:#212121;
  font-family:Roboto,Arial,sans-serif;
}
a {
  color:#212121;
  text-decoration:none;
}
a:hover {color:#0379C4}
iframe{border:0}
h4{margin:2px 0 0;font-size:14px}
.sub-box{
 padding:0 5px 5px;
    border:1px solid #dedede;
 border-top:none;
 border-radius:0 0 3px 3px
}
</style>
</head>
<body>
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/encepnurdin62" data-widget-id="736579386590138371">Tweet oleh @encepnurdin62</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div>
</div>
</body>
</html>
Langkah terakhir kita iframe seperti ini.
<amp-iframe width="300"
      height="214"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      scrolling="no"
      src="URLcdn.rawgit.comDisini">
  </amp-iframe>


Dan hasilnya tampak seperti di bawah ini hehe

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×