Pernah tidak melihat konten video dari media sosial yang disematkan di sebuah halaman web atau blog seperti twit di aplikasi X (Twitter), postingan Instagram, video YouTube dan video TikTok? Ya, itulah yang disebut dengan EMBED atau MENYEMATKAN konten dari media sosial di halaman web atau blog. Biasanya setiap media sosial telah menyediakan embed kode khusus yang dapat digunakan dan dibagikan di halaman web atau blog agar tampilannya responsif di semua jenis perangkat.
Salah satunya adalah platform TikTok, salah satu platform media sosial dengan pengguna terbanyak dan populer saat ini. Selain menyediakan fitur untuk berbagi ke status WhatsApp dan Instagram story, TikTok juga menyediakan fitur untuk berbagi video dan profil TikTok melalui embed kode yang dapat dipasang di halaman web atau blog Blogger.
Berbeda dengan platform media sosial lainnya, fitur menyematkan video dan profil TikTok di blog ini hanya tersedia jika kita mengakses TikTok melalui website TikTok. Jika kita mengakses TikTok melalui aplikasi TikTok langsung, maka fitur berbagi melalui embed kode tidak akan tersedia. Kamu bisa ikuti langkah-langkah di bawah ini untuk embed video TikTok dan profil TikTok di blog.
Cara Menyematkan Video TikTok di Blog Secara Responsif
Sebelum lanjut, pastikan kamu sudah login ke akun TikTok kamu melalui website resmi TikTok di www.tiktok.com dan pastikan juga untuk mengakses website TikTok menggunakan MODE DESKTOP agar fitur berbagi melalui embed kode muncul. Jika sudah login, kamu bisa ikuti langkah-langkah berikut:
- Buka dan login ke akun TikTok kamu melalui website TikTok menggunakan mode desktop.
- Setelah itu cari video TikTok yang ingin disematkan ke dalam halaman web atau blog kamu.
- Setelah dapat, klik ikon panah (berbagi) di bagian pojok kanan bawah video.
- Selanjutnya pilih opsi
Tertanamseperti pada gambar di bawah ini:
Cara Embed Konten Video TikTok di Blog - Setelah memilih opsi ini, akan muncul popup yang berisi embed kode dari video TikTok tersebut dalam bentuk HTML. Klik tombol Salin Kode untuk menyalin embed kode yang diberikan. Contoh embed kode HTML yang dihasilkan dari video TikTok akan terlihat seperti ini:
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@username/video/000000000" data-video-id="0000000000" style="max-width: 605px;min-width: 325px;"> <section> <a target="_blank" title="@b1_lordyoung" href="https://www.tiktok.com/@username?refer=embed">@username</a> judul video <a title="judul vidoe" target="_blank" href="https://www.tiktok.com/tag/example?refer=embed">#judul</a> <a title="judul" target="_blank" href="https://www.tiktok.com/tag/example?refer=embed">#judul</a> <a title="judul" target="_blank" href="https://www.tiktok.com/tag/example-tag?refer=embed">#tag</a> <a title="judul tag" target="_blank" href="https://www.tiktok.com/tag/example-tag?refer=embed">#example-tag</a> <a title="judul" target="_blank" href="https://www.tiktok.com/tag/example?refer=embed">#judul</a> <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp?refer=embed">#fyp</a> <a title="viral" target="_blank" href="https://www.tiktok.com/tag/viral?refer=embed">#viral</a> <a title="borushiki" target="_blank" href="https://www.tiktok.com/tag/borushiki?refer=embed">#borushiki</a> <a title="kawaki" target="_blank" href="https://www.tiktok.com/tag/kawaki?refer=embed">#kawaki</a> <a title="kawashiki" target="_blank" href="https://www.tiktok.com/tag/kawashiki?refer=embed">#kawashiki</a> <a title="borutochapter79" target="_blank" href="https://www.tiktok.com/tag/borutochapter79?refer=embed">#borutochapter79</a> <a target="_blank" title="♬ original sound - CodeVIgod" href="https://www.tiktok.com/music/original-sound-000000?refer=embed">♬ original sound - CodeVIgod</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script> - Setelah kamu mendapatkan embed kode HTML dari video TikTok yang ingin disematkan, langkah selanjutnya kamu bisa masukkan embed kode video TikTok tersebut ke dalam halaman website kamu. Atau, jika kamu menggunakan platform Blogger blogspot, kamu bisa masukkan embed kode video TikTok tersebut ke dalam postingan atau halaman statis dalam MODE HTML.
- Selesai! video TikTok sudah berhasil disematkan di blog secara responsif.
Cara Mengubah Embed Video TikTok Menjadi Responsif
Jika kamu menggunakan kode HTML yang diberikan oleh TikTok langsung tanpa diedit, kemungkinan tampilan dari video TikTok tersebut tidak akan responsif karena bentrok dengan kode <blockquote> yang digunakan pada template blog kamu. Oleh karena itu, agar tampilan video TikTok yang disematkan dalam blog menjadi responsif dan rapih, kamu harus mengedit beberapa bagian kode tersebut dan menyesuaikannya dengan kode yang digunakan pada template blog kamu.
Hal ini juga sama seperti template yang saya gunakan di blog ini. Karena terdapat kode CSS khusus untuk tag atau elemen <blockquote>, sehingga tampilannya akan berantakan. Untuk mengedit embed kode HTML TikTok menjadi responsif, kamu bisa ikuti langkah-langkah di bawah ini.
- Pertama-tama kamu salin terlebih dahulu ID video TikTok yang ingin disematkan. ID tersebut berupa angka seperti ini:
https://www.tiktok.com/@ignelius/video/0000000000000Angka-angka tersebut adalah ID video TikTok kamu. Kamu salin dan simpan ID tersebut karena nanti akan digunakan untuk menyematkan konten video TikTok ke blog.
- Setelah itu hapus semua kode HTML embed video TikTok yang sudah kamu sematkan ke dalam postingan karena yang kita butuhkan hanyalah ID video TikTok saja.
- Setelah semuanya dihapus, ganti dengan kode HTML berikut:
<div style="max-width: 100%;min-height: 750px"> <div style="left: 0;width: 100%;height: 750px;position: relative;padding-bottom: 0;padding-top: 0;"> <iframe src="https://www.tiktok.com/embed/0000000000000" allow="fullscreen" style="position: absolute;top: 0px;left: 0px;height: 100%;width: 100%;"></iframe> </div> </div> <script async src="https://www.tiktok.com/embed.js"></script>Ubah pada bagian
0000000000000dengan ID video TikTok yang sudah kamu salin tadi. Dan angka750pxadalah nilai maksimal tinggi dari elemen iframe. Kamu bisa ubah nilainya sesuai dengan nilai tinggi elemen iframe yang kamu inginkan, misalnya 800px. - Jika sudah, klik simpan dan lihat perubahannya. Video TikTok yang disematkan menjadi responsif dan lebih rapih dari sebelumnya.
Cara Menyematkan Profil TikTok di Blog
Selain dapat menyematkan konten video TikTok di laman web atau postingan blog blogspot, kita juga bisa menyematkan profil akun TikTok kita di laman web atau blog. Caranya mirip dengan cara menyematkan video TikTok di blog, berikut tutorial cara menyematkan profil akun TikTok di blog secara responsif.
- Pertama-tama login ke akun TikTok kamu melalui browser dalam MODE DESKTOP.
- Setelah itu masuk ke halaman PROFIL akun kamu.
- Setelah itu klik ikon panah atau berbagi.
- Kemudian klik opsi
Tertanam.Cara Embed Profil TikTok di Blog - Setelah itu akan muncul pop-up berisi kode embed profil TikTok yang bisa disematkan ke laman web atau blog. Salin semua kodenya lalu tempelkan ke postingan blog.
- Selesai! Profil akun TikTok kamu sudah berhasil disematkan ke halaman web atau postingan blog.
Cara Mengubah Embed Profil TikTok Menjadi Responsif
Kode embed profil TikTok yang diberikan juga sama seperti kode embed video TikTok, keduanya menggunakan tag <blockquote> sehingga tampilannya mungkin akan berantakan. Agar tampilannya menjadi responsif dan lebih rapih, kamu harus mengedit sedikit kode embed yang diberikan TikTok. Untuk cara mengubah embed profil TikTok jadi responsif, kamu bisa ikuti langkah-langkah sederhana di bawah ini.
- Pertama salin username TikTok kamu terlebih dahulu.
- Setelah itu hapus semua kode embed profil akun TikTok tadi kemudian ganti dengan kode HTML di bawah ini:
<div style="max-width: 100%;min-height: 750px"> <div style="left: 0;width: 100%;height: 750px;position: relative;padding-bottom: 0;padding-top: 0;"> <iframe src="https://www.tiktok.com/embed/@username" allow="fullscreen" style="position: absolute;top: 0px;left: 0px;height: 100%;width: 100%;"></iframe> </div> </div> <script async src="https://www.tiktok.com/embed.js"></script>Ubah pada bagian
@usernamedengan username akun TikTok yang sudah kamu salin di langkah awal tadi. - Terakhir klik simpan. Kamu bisa lihat perbedaan antara embed profil TikTok sebelum diedit dan setelah diedit di bawah.
Penutup
Itu dia tutorial cara menyematkan video dan profil akun TikTok di blog secara responsif. Jika kamu ingin menyematkan video TikTok dan profil akun TikTok dalam satu halaman yang sama, kamu hanya perlu memasang embed JavaScript satu kali saja. Namun jika ingin menyematkan video TikTok atau profil TikTok di halaman yang berbeda, sertakan JavaScript di setiap halaman. Contoh kode embed JavaScript yang dimaksud adalah seperti ini:
<script async="" src="https://www.tiktok.com/embed.js"></script>Semoga informasi yang di atas bisa bermanfaat dan membantu. Jika mengalami masalah saat memasang kode embed HTML, kamu bisa tanyakan di kolom komentar.
Posting Komentar