Kehadiran di social media adalah bagian penting dari strategi content marketing. Sitemas menyediakan konfigurasi terpusat untuk semua link social media dan komunitas, memudahkan Anda menghubungkan semua platform dalam satu tempat.

Lokasi Konfigurasi

Semua link eksternal dikonfigurasi di src/utils/constants.ts. File ini adalah “single source of truth” untuk social media dan komunitas.

1. Konfigurasi Social Media

Struktur SOCIAL

src/utils/constants.ts
typescript 
export const SOCIAL = {
    github: '#',           // GitHub profile atau organization
    twitter: '#',          // Twitter/X profile
    youtube: '#',          // YouTube channel
    instagram: '#',        // Instagram profile
    facebook: '#',         // Facebook page
    whatsapp: '#',         // WhatsApp Channel atau Business
    linkedin: '#',         // LinkedIn company atau personal
    tiktok: '#',           // TikTok profile
} as const;

Mengisi URL Social Media

Ganti # dengan URL lengkap profile Anda:

Contoh konfigurasi aktual
typescript 
export const SOCIAL = {
    github: 'https://github.com/usernameanda',
    twitter: 'https://twitter.com/usernameanda',
    youtube: 'https://youtube.com/@channelanda',
    instagram: 'https://instagram.com/usernameanda',
    facebook: 'https://facebook.com/pageanda',
    whatsapp: 'https://whatsapp.com/channel/0029xxxx',
    linkedin: 'https://linkedin.com/company/namacompany',
    tiktok: 'https://tiktok.com/@usernameanda',
} as const;
Platform yang Tidak Digunakan

Biarkan value sebagai # untuk platform yang tidak Anda gunakan. Komponen akan menangani ini dengan tidak menampilkan atau menonaktifkan link tersebut.

Format URL yang Benar

PlatformFormat URL
GitHubhttps://github.com/username
Twitter/Xhttps://twitter.com/username atau https://x.com/username
YouTubehttps://youtube.com/@channelname atau https://youtube.com/c/channelname
Instagramhttps://instagram.com/username
Facebookhttps://facebook.com/pagename
WhatsApphttps://whatsapp.com/channel/invitecode (Channel) atau https://wa.me/6281234567890 (Direct)
LinkedInhttps://linkedin.com/in/username (Personal) atau https://linkedin.com/company/name (Company)
TikTokhttps://tiktok.com/@username

Untuk website yang memiliki komunitas atau repository open source:

src/utils/constants.ts
typescript 
export const COMMUNITY = {
    discussions: '#',      // GitHub Discussions
    repository: '#',       // GitHub Repository
    issues: '#',           // Issue tracker
    contribute: '#',       // Contribution guide
} as const;

Contoh Konfigurasi Komunitas

Untuk proyek open source
typescript 
export const COMMUNITY = {
    discussions: 'https://github.com/username/repo/discussions',
    repository: 'https://github.com/username/repo',
    issues: 'https://github.com/username/repo/issues',
    contribute: 'https://github.com/username/repo/blob/main/CONTRIBUTING.md',
} as const;
Bukan Open Source?

Jika website Anda bukan proyek open source, biarkan semua value sebagai # atau modifikasi konfigurasi untuk kebutuhan Anda (misalnya Discord server, Telegram group, dll.).

3. Menambah Platform Baru

Untuk menambah platform social media yang belum ada:

Langkah 1: Tambah ke SOCIAL

constants.ts
typescript 
export const SOCIAL = {
    // ... existing
    discord: 'https://discord.gg/invitecode',    // Baru
    telegram: 'https://t.me/channelname',        // Baru
    threads: 'https://threads.net/@username',    // Baru
} as const;

Langkah 2: Buat Icon Component (Jika Belum Ada)

Cek folder src/components/icons/. Jika icon belum ada, buat baru:

src/components/icons/IconDiscord.astro
astro 
---
interface Props {
    size?: number;
    class?: string;
}

const { size = 24, class: className } = Astro.props;
---

<svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="currentColor"
    class={className}
>
    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515..."/>
</svg>

Anda bisa mendapatkan SVG path dari:

Di Footer.astro, tambahkan platform baru ke rendering social links:

Footer.astro
astro 
import IconDiscord from '@/components/icons/IconDiscord.astro';

// Di bagian social icons mapping
const socialIcons = {
    github: IconGitHub,
    twitter: IconTwitter,
    discord: IconDiscord,  // Tambah baru
    // ...
};

4. Helper Functions

Sitemas menyediakan helper functions untuk mengelola social links:

Mengecek apakah link valid (bukan placeholder):

Penggunaan isValidLink
typescript 
import { SOCIAL, isValidLink } from '@/utils/constants';

// Cek apakah GitHub link valid
if (isValidLink(SOCIAL.github)) {
    // Tampilkan link GitHub
}

Mendapatkan social link dengan fallback:

Penggunaan getSocialLink
typescript 
import { getSocialLink } from '@/utils/constants';

// Return URL jika valid, atau '#' jika tidak
const githubUrl = getSocialLink('github');
const twitterUrl = getSocialLink('twitter', '/contact'); // Custom fallback

Social links otomatis muncul di footer. Hanya platform dengan URL valid yang ditampilkan.

Di Tempat Lain

Untuk menampilkan social links di komponen custom:

Contoh komponen
astro 
---
import { SOCIAL, isValidLink } from '@/utils/constants';
import IconGitHub from '@/components/icons/IconGitHub.astro';
import IconTwitter from '@/components/icons/IconTwitter.astro';
---

<div class="social-links">
    {isValidLink(SOCIAL.github) && (
        <a href={SOCIAL.github} target="_blank" rel="noopener noreferrer">
            <IconGitHub size={24} />
        </a>
    )}
    {isValidLink(SOCIAL.twitter) && (
        <a href={SOCIAL.twitter} target="_blank" rel="noopener noreferrer">
            <IconTwitter size={24} />
        </a>
    )}
</div>
target dan rel

Selalu gunakan target="_blank" untuk membuka di tab baru dan rel="noopener noreferrer" untuk keamanan saat linking ke website eksternal.

6. Subdomains Configuration

Jika Anda memiliki beberapa subdomain untuk layanan berbeda:

src/utils/constants.ts
typescript 
export const SUBDOMAINS = {
    main: 'https://sitemas.com',
    api: 'https://api.sitemas.com',
    dashboard: 'https://dash.sitemas.com',
    store: 'https://toko.sitemas.com',
    demo: 'https://demo.sitemas.com',
    payment: 'https://pay.sitemas.com',
    app: 'https://app.sitemas.com',
    portfolio: 'https://porto.sitemas.com',
} as const;

Update sesuai subdomain yang Anda miliki. Yang tidak digunakan bisa dihapus atau dibiarkan.

7. Best Practices Social Media

Konsistensi Branding

  • Gunakan username yang sama di semua platform (jika available)
  • Profile picture dan banner yang konsisten
  • Bio yang menyebutkan website Anda

Untuk tracking traffic dari social media, gunakan UTM parameters:

https://sitemas.com/?utm_source=twitter&utm_medium=social&utm_campaign=profile

Verifikasi Platform

Beberapa platform menyediakan verifikasi website:

  • Twitter/X: Tambahkan website di bio
  • Facebook: Verifikasi domain di Business Manager
  • Google: Search Console verification

8. Open Graph untuk Social Sharing

Sitemas sudah dikonfigurasi dengan Open Graph tags yang optimal. Saat artikel dibagikan di social media, akan muncul preview yang menarik dengan:

  • Judul artikel
  • Deskripsi
  • Gambar OG (auto-generated)
  • Nama website

Anda bisa melihat preview di:

Checklist Konfigurasi

Sebelum deploy, pastikan:

  • Minimal 2-3 social media platform dikonfigurasi
  • URL valid dan menuju profile yang benar
  • Test link bekerja (klik dan buka)
  • Profile social media sudah dioptimasi (bio, picture)
  • Open Graph preview terlihat baik

Langkah Selanjutnya

Branding dan navigasi sudah siap! Lanjutkan dengan mempelajari cara menulis artikel:

Mulai Menulis

Pelajari cara membuat artikel baru di Sitemas dengan format MDX.

Membuat Artikel Baru

Kesimpulan

Social media adalah extension dari brand Anda. Dengan konfigurasi terpusat di Sitemas, mengelola semua link menjadi mudah — cukup edit satu file dan perubahan akan reflect di seluruh website.

Ingat bahwa tidak perlu aktif di semua platform. Lebih baik fokus di 2-3 platform yang sesuai dengan target audiens Anda daripada setengah-setengah di banyak platform.

M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.