p7xhMSO4O9fyfib8OANOxXym2LUEvDesKq0YUJbG
Pilih Warna Tema
Bookmark

Cara Embed Video dan Profil TikTok di Blog Secara Responsif

Cara Menyematkan Video TikTok di Blog
Cara Menyematkan Konten Video TikTok di Blog

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:

  1. Buka dan login ke akun TikTok kamu melalui website TikTok menggunakan mode desktop.
  2. Setelah itu cari video TikTok yang ingin disematkan ke dalam halaman web atau blog kamu.
  3. Setelah dapat, klik ikon panah (berbagi) di bagian pojok kanan bawah video.
  4. Selanjutnya pilih opsi Tertanam seperti pada gambar di bawah ini:
    Cara Embed Video TikTok di Blog
    Cara Embed Konten Video TikTok di Blog
  5. 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>
  6. 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.
  7. 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.

  1. Pertama-tama kamu salin terlebih dahulu ID video TikTok yang ingin disematkan. ID tersebut berupa angka seperti ini:
    https://www.tiktok.com/@ignelius/video/0000000000000

    Angka-angka tersebut adalah ID video TikTok kamu. Kamu salin dan simpan ID tersebut karena nanti akan digunakan untuk menyematkan konten video TikTok ke blog.

  2. 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.
  3. 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 0000000000000 dengan ID video TikTok yang sudah kamu salin tadi. Dan angka 750px adalah nilai maksimal tinggi dari elemen iframe. Kamu bisa ubah nilainya sesuai dengan nilai tinggi elemen iframe yang kamu inginkan, misalnya 800px.

  4. 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.

  1. Pertama-tama login ke akun TikTok kamu melalui browser dalam MODE DESKTOP.
  2. Setelah itu masuk ke halaman PROFIL akun kamu.
  3. Setelah itu klik ikon panah atau berbagi.
  4. Kemudian klik opsi Tertanam.
    Cara Embed Profil TikTok di Blog
    Cara Embed Profil TikTok di Blog
  5. 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.
  6. 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.

  1. Pertama salin username TikTok kamu terlebih dahulu.
  2. 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 @username dengan username akun TikTok yang sudah kamu salin di langkah awal tadi.

  3. 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.

Cara Menyematkan Video TikTok di Blog Secara Responsive
Cara Embed Video TikTok di Website dengan Responsif
Cara Embed Profil TikTok di Blog Blogger Secara Responsif
Cara Menyematkan Profil TikTok di Blog Secara Responsif
Tips Embed Video dan Profil TikTok di Blog Secara Responsive
Menyematkan Video Profil TikTok di Website Secara Gratis
Embed Video TikTok di Blog dengan Mudah
Cara Menyematkan Konten Video TikTok di blog
Cara Menyematkan Profil TikTok di Blog
Cara Embed Konten Video TikTok di Website
Cara Embed Profil TikTok di Website
Komentar

Posting Komentar

Sebelum memposting komentar, harap baca kebijakan berkomentar terlebih dulu.

1. Untuk menulis kode syntax highlighter, gunakan <em>KODE SYNTAX</em> (kode harus di parse terlebih dulu).
2. Untuk menyisipkan gambar dalam komentar, gunakan <strong>URL GAMBAR</strong>.
3. Untuk menulis tautan, gunakan <a href='URL WEB TUJUAN'>Anchor Teks</a>.
4. Untuk menulis sebuah quote / kutipuan, gunakan <i rel="quote">TULIS QUOTE DI SINI</i>.
5. Centang Beri Tahu Saya untuk mendapatkan notifikasi yang dikirim langsung ke email saat ada yang membalas komentar kamu.