Memasang status tweet di blog amp

Bukan tidak mungkin status tweet di twitter ditampilkan diblog amp, oleh karena itu berikut artikel tentang cara menyematkan,menampilkan,dan memasang status tweet di twitter ke blog amp mudah dan praktis.

Menampilkan tweet di twitter ke blog amp

Anda dapat menanamkan tweet ke halaman blog AMP dengan menggunakan komponen <amp-twitter>.

Untuk melakukannya, Anda perlu menentukan ID tweet dalam atribut data-tweetid. Anda dapat memodifikasi cara tweet ditampilkan dengan menambahkan opsi tampilan APi Twitter sebagai atribut data- * HTML5.

Misalnya, dalam contoh di bawah ini saya menggunakan opsi tampilan tautan API Twitter sebagai data-link-color (format data-*) untuk mengubah warna tautan default ke warna yang digunakan tutorial-blog-amp di akun Twitter-nya.

Contoh embed

<amp-twitter width="506" height="338" layout="responsive" data-tweetid="765234426166957869" data-link-color="#698aba"> </amp-twitter>

Rubah data-tweetid dengan id tweet kalian.
Komponen <amp-twitter> belum sempurna, Github docs mengatakan bahwa Twitter saat ini tidak menyediakan API yang menghasilkan rasio aspek tetap yang disematkan Tweet.

Ini berarti Anda perlu mengatur atribut width dan height secara manual, karena runtime AMP terkadang tidak menampilkan bagian (biasanya bagian bawah) dari tweet.

Itu selalu merupakan ide yang baik untuk memeriksa bagaimana tweet Anda terlihat seperti sebelum mempublikasikan halaman AMP.

Tambahkan Placeholder

Meskipun tidak diperlukan, dokumentasi merekomendasikan untuk menambahkan placeholder seandainya tweet tidak dimuat sekaligus.
Atribut placeholder dapat digunakan pada setiap komponen AMP. Penampung ditampilkan segera jika sumber daya final tidak tersedia. Saat elemen AMP dimuat, ia menyembunyikan placeholder-nya.
Lihatlah bagaimana contoh kode di atas terlihat dengan placeholder. Di Twitter, saya cukup mengklik tombol Tweet Embed, menyalin-paste blockquote yang dapat disematkan (tanpa skrip di bagian akhir), dan menambahkan atribut placeholder ke tag <blockquote>.

Contoh kode dengan placeholder:

<amp-twitter width="506" height="338" layout="responsive"
  data-tweetid="765234426166915072" data-link-color="#698aba">
  <blockquote placeholder class="twitter-tweet" data-lang="en">
    <p lang="en" dir="ltr">How to Validate Accelerated Mobile Pages
      (<a href="https://twitter.com/hashtag/AMP?src=hash">#AMP</a>)
      <a href="https://twitter.com/hashtag/google?src=hash">#google</a>
      <a href="https://twitter.com/hashtag/seo?src=hash">#seo</a>
      <a href="https://t.co/eVOSAtr5Ax">https://t.co/eVOSAtr5Ax</a>
    </p>
    — Tutorialblog (@tutorialblog)
      <a href="https://twitter.com/Tutorialblog/status/765234426166915072">
        August 23, 2019</a>
  </blockquote>
</amp-twitter>

Jangan lupa masukan kode amp tweeter di blog anda:
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"> </script>

AMP BLOG

Engkis Kribo