Cara Memasang Post Twitter di Postingan Blog AMP

Tutorial Blogger kali ini tentang cara menambahkan atau memasukkan tweet berupa status, video dan foto dari Twitter ke dalam postingan blog yang menggunakan template AMP HTML. Sebagai pengguna template AMP, pasti sangat paham bahwa, khususnya untuk platform Blogger, jika ingin menyisipkan segala sesuatu (berupa widget dan lainnya) ke dalam postingan akan berbeda penerapannya dari HTML biasa.
Cara Memasang Post Twitter di Postingan Blog AMP

Untuk penggunaan widget di postingan pada template AMP  (Accelerated Mobile Pages) ada aturan mainnya tersendiri. Jadi, setidaknya harus dipelajari dan diketahui terlebih dahulu terkait penggunaan dan cara membuat postingan di template AMP. Karena keadaanya memang sangat jauh berbeda dengan apa yang biasanya kita lakukan pada format HTML yang biasa.

Contohnya, jika ingin menyisipkan atau membuat status/post dari Twitter agar bisa tampil di blog AMP HTML, maka cara memasangnya dapat dilakukan seperti pada tutorial berikut ini.

Sebelum ke tutorialnnya, sedikit informasi bagi Anda yang (masih labil) ingin migrasi menggunakan template AMP HTML, simak beberapa hal berikut ini mengenai akibat menggunakan template AMP HTML pada platform Blogger.

Cara pasang post atau tweet dari Twitter ke postingan blog AMP HTML

Terlebih dahulu, silahkan aktifkan custom element AMP Twitter dengan menambahkan kode berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<script async='async' custom-element='amp-twitter' src='https://cdn.ampproject.org/v0/amp-twitter-0.1.js'/>

Jika kode di atas sudah terpasang pada template, maka tidak perlu ditambahkan lagi. Cukup menggunakan satu link custom element AMP saja pada masing-masing widget.

Setelah itu, lakukan langkah-langkah berikut ini:

  • Silahkan akses website Twitter dari komputer/PC atau laptop Anda. Tidak perlu login ke akun Twitter juga bisa, asal Anda tahu pengguna yang ingin Anda embed tweetnya.
  • Setelah dapat tweetnya, silahkan klik icon dropdown pada tweet tersebut, lalu klik Salin tautan Tweet. Perhatikan gambar berikut:

Cara Memasukkan Post gambar dan video Twitter di Postingan Blog AMP

Maka akan ketahuan link dari tweet tersebut, kurang lebih seperti ini:

https://twitter.com/MotoGP/status/931148599139827712

Dari link tersebut, yang dibutuhkan hanyalah Tweet ID-nya saja, yang seperti ini:

931148599139827712

Sehingga jika dimasukkan pada format AMP HTML khusus untuk menampilkan status Twitter, maka hasilnya akan seperti berikut ini:

<amp-twitter
      data-tweetid="931148599139827712"
      width="400"
      height="350"
      layout="responsive">
  </amp-twitter>

Jika tidak suka menampilkan medianya (video atau gambar), maka fortmatnya akan seperti ini:

<amp-twitter
      data-tweetid="931148599139827712"
      width="400"
      height="350"
      layout="responsive"
      data-cards="hidden">
  </amp-twitter>

Ukuran width dan height silahkan disesuaikan sendiri sesuai keinginan Anda. Pastikan menggunakan ukuran yang ideal. Satu hal yang perlu diketahui, berapapun ukurannya, widget tersebut tetap akan menjadi responsive pada semua device, baik dibuka dari desktop maupun mobile/smartphone.

Cara di atas juga bisa diterapkan jika ingin menampilkan tweet tertentu dibagian sidebar dan footer pada template yang sudah AMP HTML.

Demikian tutorial tentang cara menampilkan atau menambahkan status Twitter ke dalam postingan blog yang menggunakan template AMP HTML. Semoga membantu, selamat mencoba dan terima kasih!
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.