Cara Embed Kode iFrame di Situs WordPress

Apakah Anda ingin meng-Embed (menyematkan) kode iFrame di postingan atau halaman WordPress?

IFrames menyediakan cara Embed the video atau konten lain ke situs Anda tanpa mengunggahnya. Banyak platform pihak ketiga seperti YouTube mengizinkan pengguna menggunakan iframe untuk Embed konten dari website mereka.

Pada artikel ini, saya akan menunjukkan cara embed kode iFrame di Situs WordPress menggunakan berbagai metode.

Menyematkan kode iFrame dengan mudah di WordPress

Apa itu iFrame?

IFrame memungkinkan Anda menyematkan video atau konten lain di situs Anda. Ini berarti Anda dapat menampilkan video di situs Anda tanpa benar-benar menghosting video tersebut.

Iframe seperti membuka jendela di situs Anda untuk menampilkan konten eksternal. Konten sebenarnya masih dimuat dari sumber yang Anda sematkan.

Untuk menambahkan iframe, Anda perlu menambahkan kode HTML khusus. Jangan khawatir jika kedengarannya cukup teknis.

Saya akan menunjukkan kepada Anda cara termudah untuk menanamkan iFrame di blog WordPress Anda.

Mengapa Menggunakan iFrames?

Alasan utama menggunakan iFrames adalah untuk menghindari keharusan menghosting video atau sumber daya lain di situs Anda, yang akan menghabiskan bandwidth dan ruang penyimpanan Anda.

Selain itu, iFrames memungkinkan Anda menghindari pelanggaran terhadap konten berhak cipta milik orang lain. Alih-alih mengunduh video mereka atau konten lain lalu mengunggahnya ke situs Anda, Anda cukup menambahkannya ke laman Anda menggunakan iFrame.

Keuntungan lainnya adalah jika konten asli diubah, maka secara otomatis juga akan diperbarui di iFrame.

Gambar orang kartun menambahkan konten ke situs web

Ada juga beberapa kelemahan dalam menggunakan iFrames. Tidak semua website mengizinkan Anda memasukkan konten mereka ke dalam iFrame. Selain itu, iFrame mungkin menjadi terlalu besar atau kecil untuk halaman Anda, dan Anda perlu menyesuaikannya secara manual.

Masalah lainnya adalah situs HTTPS hanya dapat menggunakan iFrame untuk konten dari situs HTTPS lainnya. Demikian pula, situs HTTP hanya dapat menggunakan iFrame untuk konten dari situs HTTP lain.

Inilah sebabnya mengapa banyak platform seperti WordPress lebih memilih oEmbed. Anda dapat menggunakan oEmbed untuk menyematkan video serta beberapa jenis konten lainnya hanya dengan menempelkan URL ke posting WordPress Anda. Konten akan secara otomatis diubah ukurannya agar sesuai, dan akan menjadi ukuran yang tepat bahkan di perangkat seluler.

Penting: WordPress tidak mendukung oEmbed untuk kiriman Facebook dan Instagram. 

Alternatif hebat lainnya untuk iFrames adalah menggunakan plugin umpan sosial. Saya merekomendasikan menggunakan plugin Smash Balloon . Ini memungkinkan Anda menampilkan konten dari Facebook, Instagram, Twitter, dan YouTube.

Karena itu, mari kita lihat tiga cara berbeda untuk menambahkan iFrames ke situs Anda.

1. Gunakan Kode Sematan Sumber untuk Menambahkan iFrame di WordPress

Banyak situs besar memiliki opsi embed untuk konten mereka. Ini memberi Anda kode iFrame khusus yang perlu Anda tambahkan ke situs Anda.

Di YouTube, Anda bisa mendapatkan kode ini dengan membuka videonya di YouTube, lalu mengklik tombol Bagikan di bawahnya.

 

Selanjutnya, Anda akan melihat popup dengan beberapa opsi berbagi. Cukup klik tombol Embed.

Mengklik tombol Sematkan untuk mendapatkan kode semat YouTube

Sekarang, YouTube akan menampilkan kode iFrame. Secara default, YouTube akan menyertakan kontrol pemutar. Saya juga menyarankan agar Anda mengaktifkan mode privasi yang ditingkatkan.

Setelah itu, lanjutkan dan klik tombol Salin untuk menyalin kode.

Menyalin kode sematan untuk video YouTube

Sekarang, Anda dapat menempelkan kode itu ke dalam posting atau halaman mana pun di situs Anda. Saya akan menambahkannya ke halaman baru di editor blok.

Untuk membuat halaman baru, buka Halaman > Tambah Baru di dasbor WordPress Anda.

Kemudian, tambahkan blok HTML ke halaman Anda.

Menambahkan blok HTML kustom ke WordPress

Sekarang, Anda perlu menempelkan kode iFrame YouTube ke blok ini.

Menempelkan kode HTML YouTube ke dalam blok iFrame

Anda kemudian dapat mempratinjau atau mempublikasikan halaman Anda untuk melihat video YouTube yang di-embed di sana.

 

Tip: Jika Anda menggunakan editor klasik lama , Anda masih dapat menambahkan kode iFrame. Anda perlu melakukannya di tampilan Teks.

Menambahkan kode iFrame YouTube di editor klasik

Beralih antara tampilan visual dan teks di Editor Klasik dapat menyebabkan masalah dengan kode iFrame.

2. Menggunakan Plugin WordPress iFrame untuk Embed iFrame

Metode ini berguna karena memungkinkan Anda membuat iframe untuk embed konten dari sumber mana pun, meskipun sumber tersebut tidak menyediakan kode semat.

Pertama, Anda perlu menginstal dan mengaktifkan plugin iFrame

Setelah aktivasi, plugin akan langsung bekerja tanpa perlu penyiapan. Silakan edit atau buat posting atau halaman. Kemudian, tambahkan blok kode pendek.

Menambahkan blok kode pendek di editor blok

Setelah itu, Anda dapat menggunakan kode pendek ini untuk memasukkan kode iFrame Anda.

1
[iframe src="URL goes here"]

Cukup ganti URL di sini dengan URL konten yang ingin Anda embed di situs Anda. Saya menyematkan peta Google.

Tip: Anda mungkin perlu menggunakan opsi embed untuk mendapatkan URL langsung dari konten. Anda hanya perlu menggunakan URL, bukan kode pinned lainnya.

Kode pendek untuk menyematkan peta Google

Selanjutnya, pratinjau atau publikasikan posting Anda. Anda akan melihat peta Google tersemat di situs Anda.

Peta Google tertanam di situs web

Secara opsional, Anda dapat menambahkan parameter ke kode pendek iFrame untuk mengubah tampilan konten yang pinned. Misalnya, Anda dapat mengatur lebar dan tinggi, dan menambah atau menghapus scrollbar atau perbatasan. Anda dapat menemukan detailnya di halaman plugin iFrame .

Tip: Jika Anda menggunakan editor Klasik, Anda cukup menempelkan kode pendek ke dalam posting atau halaman Anda. Anda tidak perlu beralih ke tampilan Teks.

Menambahkan kode pendek di editor klasik

3. Membuat Kode iFrame dan Embed it secara Manual di WordPress

Jika Anda memilih untuk tidak menggunakan plugin iFrame, Anda dapat membuat kode iFrame secara manual. Untuk melakukan ini, Anda perlu menambahkan blok HTML di editor konten WordPress.

Menambahkan blok HTML kustom

Pertama, Anda perlu menempelkan kode ini ke blok HTML Anda.

1
<iframe src="URL goes here"></iframe>

Cukup ganti “URL masuk ke sini” dengan URL langsung untuk konten yang ingin Anda embed. Anda hanya membutuhkan URL itu sendiri.

Di sini, saya Embed peta dari Google.

Memasukkan kode iFrame untuk peta Google

Anda dapat menambahkan parameter ekstra ke tag HTML. Misalnya, Anda dapat mengatur lebar dan tinggi iFrame Anda. Kode di bawah ini berarti konten Anda yang pinned akan menampilkan lebar 600 piksel dan tinggi 300 piksel.

1
<iframe src="URL goes here" width="600" height="300"></iframe>

Ini berguna jika Anda perlu membatasi konten yang pinned ke ruang yang lebih kecil.

Peta Google di situs dengan tinggi dan lebar yang ditetapkan

Saua harap artikel ini membantu Anda mempelajari cara Embed kode iFrame dengan mudah di WordPress. Anda mungkin juga ingin melihat panduan utama saya tentang cara mempercepat situs WordPress Anda , dan perbandingan kami tentang alat pelacak peringkat SEO terbaik untuk meningkatkan peringkat SEO Anda.

Advertisements

Achyar

Panduan Blog

Leave a Reply