Untuk menambahkan share icon di Hugo, kita bisa menggunakan beberapa cara. Pertama, menggunakan platform pihak ketiga seperti Add to Any, Share It, dan sebagainya. Kedua, menggunakan API masing-masing sosial media. Ketiga, ngoding sendiri.
Masing-masing cara memiliki kelebihan dan kekurangannya. Tetapi, jika mempertimbangkan performa (terutama loading speed), saya pribadi lebih suka cara ketiga. Maka dari itu, di artikel ini kita akan membahas tentang cara membuat share icon lengkap dengan open graph-nya.
Cara Menambahkan Share Icon di Hugo
Berikut step by step cara untuk menambahkan share icon di Hugo.
Langkah 1: Buat File Partial share-button.html
Buatlah file share-button.html di direktori themes/layouts/partials/. Lalu, tambahkan kode berikut:
<!-- themes/layouts/partials/share-button.html -->
{{ $title := .Title }} {{ $url := printf "%s" .Permalink | absLangURL }} {{
$body := print $title ", by " .Site.Title "\n" .Params.description "\n\n" $url
"\n" }}
<div class="share-button-desktop">
<p class="text-sm font-bold">S H A R E</p>
<a
href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"
class="flex h-11 w-11 items-center justify-center rounded-full border-2 border-black bg-white p-2 !text-black transition hover:bg-black hover:!text-white"
target="_blank"
rel="nofollow noreferrer noopener"
aria-label="share on Facebook"
>
<!-- Tambahkan ikon Facebook di sini -->
</a>
<a
href="https://wa.me/?text={{ $url }}"
data-action="share/whatsapp/share"
class="flex h-11 w-11 items-center justify-center rounded-full border-2 border-black bg-white p-2 !text-black transition hover:bg-black hover:!text-white"
target="_blank"
rel="nofollow noreferrer noopener"
aria-label="share on WhatsApp"
>
<!-- Tambahkan ikon WhatsApp di sini -->
</a>
<a
href="https://twitter.com/share?url={{ $url }}&text={{ $title }}&via={{with .Site.Social.twitter }}{{ . }}{{ end }}"
class="flex h-11 w-11 items-center justify-center rounded-full border-2 border-black bg-white p-2 !text-black transition hover:bg-black hover:!text-white"
target="_blank"
rel="nofollow noreferrer noopener"
aria-label="share on Twitter"
>
<!-- Tambahkan ikon Twitter di sini -->
</a>
<a
href="https://www.linkedin.com/shareArticle?mini=true&url={{ $url }}&title={{ $title }}&summary={{ $body }}&source={{ .Site.Title }}"
class="flex h-11 w-11 items-center justify-center rounded-full border-2 border-black bg-white p-2 !text-black transition hover:bg-black hover:!text-white"
target="_blank"
rel="nofollow noreferrer noopener"
aria-label="share on LinkedIn"
>
<!-- Tambahkan ikon LinkedIn di sini -->
</a>
</div>
Perhatikan bahwa di sini saya menggunakan Tailwind CSS
, bila Anda menggunakan CSS framework berbeda, silakan diganti dengan class yang sesuai di tiap-tiap elemen. Untuk ikon, silakan ditambahkan dengan icon library favorit Anda.
Langkah 2: Tambahkan ke single.html
Langkah berikutnya adalah menambahkan file partial yang telah kita buat ke single.html atau halaman mana pun yang akan ditambahkan share icon.
<!-- themes/layouts/_default/single.html -->
{{ partial "/share-button.html" . }}
Langkah 3: Tambahkan OpenGraph
Agar ketika dibagikan ke setiap sosial media artikel blog kita tampil sebagaimana mestinya, kita perlu memasukkan OpenGraph. Masukkan OpenGraph di bagian atas halaman sebelum </head>. Tergantung konfigurasi Hugo Anda, saya sendiri menyimpan file head.html di direktori /themes/layouts/partials/head/head.html.
<!-- /themes/layouts/head.html -->
<!-- Facebook Open Graph Markup -->
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ .Title }}" />
<meta
property="og:description"
content="{{ with .Summary }}{{ . | htmlEscape }}{{ else }}{{ with .Params.description }}{{ . | htmlEscape }}{{ else }}{{ with site.Params.description }}{{ . | htmlEscape }}{{ end }}{{ end }}{{ end }}"
/>
<meta
property="og:image"
content="{{ with .Params.featured_image }}{{ . | absURL }}{{ else }}{{ .Site.Params.HomeImage | absURL }}{{ end }}"
/>
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@eLAmaravati" />
<meta name="twitter:creator" content="@eLAmaravati" />
<meta name="twitter:title" content="{{ .Title }}" />
<meta
name="twitter:description"
content="{{ with .Summary }}{{ . | htmlEscape }}{{ else }}{{ with .Params.description }}{{ . | htmlEscape }}{{ else }}{{ with site.Params.description }}{{ . | htmlEscape }}{{ end }}{{ end }}{{ end }}"
/>
<meta
property="og:image"
content="{{ with .Params.featured_image }}{{ . | absURL }}{{ else }}{{ .Site.Params.HomeImage | absURL }}{{ end }}"
/>
Untuk Twitter, silakan ganti twitter:site dan twitter:creator dengan akun Anda sendiri.
“Kenapa hanya ada Open Graph untuk Facebook dan Twitter?”
Pada dasarnya meta tag Open Graph untuk Facebook adalah konfigurasi default, sama seperti sosial media lainnya, termasuk untuk LinkedIn dan WhatsApp. Sedangkan Twitter Open Graph-nya sedikit berbeda.
Penjelasan kode:
{{ with .Params.featured_image }}{{ . | absURL }}{{ else }}{{ .Site.Params.HomeImage | absURL }}{{ end }}
-
featured_imageadalah parameter custom yang saya buat untuk menampilkan featured image, secara default Hugo menggunakan parameterimage. Jadi sesuaikan dengan parameter yang Anda gunakan. -
HomeImagejuga sama. Ini parameter custom untuk menampilkan featured image apabila hanya URL webwww.langitamaravati.comyang dibagikan ke sosial media. Dalam hal ini,HomeImagedigunakan sebagai fallback apabila artikel tidak memiliki featured image.
Langkah 4: View Page Source
Untuk melihat apakah meta tags open graph yang tadi kita buat sudah di-render dengan benar, buka artikel ==> klik kanan ==> view page source.
Jika sudah benar, akan tampak seperti ini:
Langkah 5: Test
Langkah berikutnya adalah mengetes share icon apakah sudah bekerja dengan baik atau belum. Sebagai catatan, share icon tidak bisa dites di local server, jadi web Hugo Anda perlu di-deploy dulu ke live server.
Untuk Facebook, Anda bisa menggunakan Facebook Debugger, sedangkan untuk sosial media lainnya bisa dicoba membagikannya ke masing-masing sosial media. Atau, Anda juga bisa menggunakan web app seperti Social Share Preview. .
Yak, sekian ngobrol-ngobrol tentang cara menambahkan share icon di Hugo. Selamat mencoba. Bila Anda mengalami kendala, silakan tuliskan di kolom komentar atau mention saya di Twitter. (eL)
Langit Amaravati
Web developer, graphic designer, techno blogger.
Aktivis ngoding barbar yang punya love-hate relationship dengan JavaScript. Hobi mendengarkan lagu dangdut koplo dan lagu campursari. Jika tidak sedang ngoding dan melayout buku, biasanya Langit melukis, belajar bahasa pemrograman baru, atau meracau di Twitter.
