Cara Menyematkan Tweet di Blog AMP - Cara menempelkan status twitter untuk blog accelerated mobile page memiliki beberapa perbedaan jika dibandingkan dengan Blog pada umumnya.Oleh sebab itu untuk menempelkan tweet tersebut butuh pengetahuan sedikit tentang AMP HTML.
Sebelum Anda melakukan itu, baiknya Anda baca ulasan tentang cara meletakkan tweet dalam postingan blog AMP berikut ini.
Pada postingan sebelumnya,yakni tentang Cara Terbaru Menyematkan Tweet pada Postingan Blog,saya sudah menuliskan cara menyematkan tweet di postingan blog non-amp.
karena sekarang sedang trend menggunakan blog Custom AMP,maka tidak ada salahnya juga saya tulis tutorial sejenis yang khusus di gunakan pada postingan untuk halaman mobile yang dipercepat ini.
Cara penyematan atau pelekatan tweet pada blog Custom AMP memang tidak jauh berbeda dengan blog non-AMP. Hanya saja kode yang di gunakan ada beberapa perubahan dengan sedikit di modifikasi agar kode sematan tweet tersebut bisa lulus uji AMP Validator.
Dan berikut ini adalah Cara Terbaru Menyemakan Tweet Di Postingan Khusus Untik Blog Custom AMP,silahkan Anda ikuti langkah-langkah yang akan saya sampaikan berikut ini.
1). Salah satu perbedaan penyematan Tweet pada blog Custom AMP dan Non-AMP adalah cara peletakan script dari twitter.
Kalau pada blog Custom AMP script sematan Tweet kita letakkan di dalam Template Blog.tidak langsung di letakkan bersama kode lain dalam postingan Blog seperti layaknya penyematan pada blog Non-AMP.
Maka gunakan script berikut ini,dan letakkan di atas kode <head> di dalam themplate blog Anda.
<script async='async' custom-element='amp-twitter' src='https://cdn.ampproject.org/v0/amp-twitter-0.1.js'/>
2). Untuk mendapat kode sematan twitter,Anda wajib Log In ke akun Twitter Anda terlebih dahulu.
3). Setelah proses Log In Twitter sudah berhasil,langkah selanjutnya adalah mecari tweet mana yang ingin Anda sematkan di Postingan Blog
4). Setelah ketemu tweet yang ingin di gunakan,maka silahkan klik tanda panah di sudut kanan atas postingan tweet tersebut.
Setelah tanda panah di klik,maka akan muncul beberapa pilihan yang bisa di gunakan.karena kita akan melakukan pelekatan tweet pada postingan blog,maka silahkan pilih Lekatkan Tweet.
Untuk lebih jelasnya,silahkan lihat gambar di bawah ini.
5). Kemudian akan muncul jendela baru berupa Pratinjau dan kode sematan yang akan di gunakan.
Pada gambar di atas,pada kolom yang saya tandai warna merah adalah kode sematan yang akan di gunakan.copy dan paste kan kode tersebut kedalam kolom postingan blog.
Contoh kode sematan yang saya gunakan pada gambar di atas adalah seperti ini.
<blockquote class="twitter-tweet" data-lang="id"><p lang="en" dir="ltr">We can confirm that the club has agreed a new contract with Arsène Wenger <a href="https://t.co/YZcmNufFrS">https://t.co/YZcmNufFrS</a></p>— Arsenal FC (@Arsenal) <a href="https://twitter.com/Arsenal/status/869894000542707712">31 Mei 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Tapi tunggu dulu,ada beberapa kode yang perlu perubahan.kode script yang tertulis tebal di atas harus Anda buang,karena script sejenis sudah di lekkan dalam themplate blog,seperti pada langkah poin pertama di atas.
Jika script di atas tidak di buang,maka akan menyebabkan error dan postingan blog tidak Valid AMP.
Kemudian,copy dulu tweet ID berupa angka-angka yang tertulis tebal seperti pada kode di atas,dan paste dalam kode AMP Twitter seperti contoh di bawah ini.
<amp-twitter width=486 height=657 layout="responsive" data-tweetid="869894000542707712" data-cards="hidden"><blockquote placeholder class="twitter-tweet" data-lang="en">
<p lang="en" dir="ltr">
We can confirm that the club has agreed a new contract with Arsène Wenger <a href="https://t.co/YZcmNufFrS">https://t.co/YZcmNufFrS</a></p>
— Arsenal FC (@Arsenal) <a href="https://twitter.com/Arsenal/status/869894000542707712">31 Mei 2017</a></blockquote>
</amp-twitter>
Jika sudah selesai,maka silahkan gunakan kode yang sudah Anda edit tersebut,dan pastekan di postingan bloga Anda.
Hasilnya akan tampak seperti ini :
We can confirm that the club has agreed a new contract with Arsène Wenger https://t.co/YZcmNufFrS
— Arsenal FC (@Arsenal) 31 Mei 2017
Memang bagi pemilik blog Custom Amp terkesan lebih rumit di bandingkan dengan Non-Amp.namun akan lebih memberi kenyamanan bagi pengunjung blog karena Kecepatan Loading Blog Custom Amp lebih cepat.
Namanya juga Halaman Mobile Yabg dipercapat,tentu sangat mempengaruhi loading blog khususnya bila di akses melalui smartphone.
Dengan kecepatan loasing ini,diharapkan pengunjung blog akan betah berlama-lama di dalam blog kita.
Bukankah Kenyamanan pengunjung Blog adalah tujuan pemilik Blog?,jadi serumit apapun cara kita menyajikan informasi harus tetap kita lakukan.Pengunjung Blog adalah Tamu,dan Tamu adalah Raja.maka berikan service terbaik untuk mereka.
Tambahkan Komentar