Penambahan Fitur Penyematan Konten Media Sosial

Ini adalah fitur beta dan mungkin masih butuh penyesuaian.

Contoh pemakaian dalam artikel MDX

Misalnya dalam file: ~/content/artikel/contoh.mdx

Kita akan menuliskan import komponen kemudian mndefinisikan dalam isi artikel.

Import yang dimaksud:

import Sosmed from '~/components/blocks/embed/Sosmed.astro'
import YouTube from '~/components/blocks/embed/YouTube.astro'
import Twitter from '~/components/blocks/embed/Twitter.astro'
import Facebook from '~/components/blocks/embed/Facebook.astro

'

Tidak perlu import semuanya, cukup yang dibutuhkan pada halaman artikel. Kemudian menambahkan tag di mana embed sosmed itu dibutuhkan. Contoh pemakaiannya dalam artikel penulisan artikel sebagai berikut:

YouTube Embed

<Sosmed
	platform="youtube"
	url="https://www.youtube.com/watch?v=r4ndOmHasH"
	caption="Contoh video YouTube"
/>

Atau menggunakan komponen khusus:

<YouTube url="https://www.youtube.com/watch?v=r4ndOmHasH" caption="Contoh Video Youtube" />

Misalnya kita tempatkan di bawah sini dengan tambahan parameter caption maka hasilnya akan tampak seperti :

Contoh Video Youtube

Twitter Embed

<Sosmed
	platform="twitter"
	url="https://twitter.com/username/status/1234567890"
	caption="Tweet penting dari sumber terpercaya"
/>

Atau:

<Twitter url="https://twitter.com/username/status/1234567890" />

Facebook Embed

<Sosmed
	platform="facebook"
	url="https://www.facebook.com/username/posts/1234567890"
	caption="Update terbaru dari Facebook"
/>

Atau:

<Facebook url="https://www.facebook.com/username/posts/r4nd0ml33tteranDNumb3rofthEp05t" />

Instagram Embed

<Sosmed
	platform="instagram"
	url="https://www.instagram.com/p/ABC123/"
	caption="Foto Instagram terbaru"
/>

Atau

<Instagram url="https://www.instagram.com/p/ABC123/" />

Keterangan dan Parameter:

Efektifitas pemakaian tag embed:

1. Sosmed jika dalam satu posting ada konten lebih dari 1 platform.
2. Youtube, Facebook, Twitter dan Instagram hanya dipakai jika hanya ada 1 platform saja dari ketiganya.

Pemakaian parameter:

1. Youtube
   • Harus menyertakan parameter: url dengan awalan protokol. Mis: https://youtube.com/watch=1234Xyz, https://youtu.be/watch=1234xyz, dst.
   • Boleh tidak menyertakan parameter: caption
2. Facebook
   • Harus menyertakan parameter: url dengan awalan protokol. https://www.facebook.com/username/posts/1234567890, username bisanya memakai nama personal/halaman.
   • Boleh tidak menyertakan parameter: caption
3. Twitter
   • Harus menyertakan parameter: url dengan awalan protokol. Misal: https://twitter.com/username/status/1234567890, username biasanya adalah id person/halaman.
   • Boleh tidak menyertakan parameter: caption
4. Instagram
   • Harus menyertakan parameter: url dengan awalan protokol. Misal’ https://www.instagram.com/p/ABC123, username biasanya adalah id instagram.
   • Boleh tidak menyertakan parameter: caption
5. Sosmed (global)
   • Harus selalu menyertakan parameter : platform dengan pilihan value: facebook | instagram | twitter | youtube untuk definisi konten siapa yang akan disematkan.
   • menyertakan parameter yang dibutuhkan tiap platform, parameter caption juga opsional.

image: via unsplash