Dalam artikel ini kita akan belajar bagaimana membuat tombol share pada artikel-artikel atau produk-produk tang kita telah buat.
Dalam artikel ini kita akan belajar bagaimana membuat tombol share pada artikel-artikel atau produk-produk tang kita telah buat.
Pertama sekali yang mesti Anda ketahui, bahwa semua ini bisa dibuat secara manual, seperti misalnya kita sediakan url dan juga icon nya. Namun, jika ada package yang bisa membantu kita untuk hal sekecil ini kenapa tidak.
Disini saya akan kenalkan kepada Anda package yang sering saya pakai jika berhubungan dengan yang namanya share button.
Jadi package ini akan mempermudah kita dalam membuat share button seperti share ke facebook, twitter, telegram, line dan banyak lagi.
Selain dia memberikan icon kepada kita, dia juga sudah membuat api untuk membuat share tersebut agar kita tidak sulit mengkonfigurasinya.
Saya akan menganggap bahwa Anda sudah mempunyai react project, entah itu CRA, Inertia-react, Next.js atau pun Remix. Karena package ini tidak akan peduli Anda menggunakan apa, yang penting dia akan stand under react.
Buka terminal Anda, dan silakan install package dengan menjalan perintah tersebut.
npm i react-share
Jika Anda menggunakan yarn, silakan jalankan perintah berikut:
yarn add react-share
Setelah itu, kita akan langsung lihat bagaimana cara menggunakannya.
Biasa yang saya lakukan adalah membuat 1 komponen yang terkusus kepada apa yang ingin kita share, seperti contoh. Disini saya akan menganggap bahwa Anda ingin membagikan artikel yang telah ditulis. Maka untuk itu, saya akan membuat 1 komponen dengan nama ArticleShare.tsx. Kemudian, Anda bisa tuliskan kode berikut.
Jika Anda sedang tidak menggunakan typescript, atau mungkin file yang Anda gunakan saat ini adalah
.jsx, itu sama sekali tidak ada masalah.
import { FacebookIcon, FacebookShareButton } from 'react-share';
import useTypedPage from '@/Hooks/useTypedPage';
import { ArticleSingleProps } from '@/types';
import useRoute from '@/Hooks/useRoute';
export default function ArticleShare() {
const { article, clara } = useTypedPage<{ article: ArticleSingleProps }>().props;
const route = useRoute();
return (
<div className='mb-8 '>
<h4 className='mb-2 text-slate-500'>Share</h4>
<div className='flex items-center gap-2 [&>button>svg]:h-8 [&>button>svg]:w-8 [&>button>svg]:rounded-lg'>
<FacebookShareButton
url={route('articles.show', [article])}
quote={article.excerpt}
hashtag={article.tags.map((tag) => tag.name).join(', ')}>
<FacebookIcon />
</FacebookShareButton>
</div>
</div>
);
}
Kode di atas, itu terkusus untuk facebook saja, namun Anda harus perhatikan disini. Bahwa masing-masing dari komponen share button itu mempunyai props yang berbeda. Saat ini mungkin Anda akan melihat ada quote= dan hastag=, kebetulan untuk url itu tetap karena itu harus di masukkan ke dalam komponen tersebut namun yang lainnya itu opsional.
Jika Anda perhatikan baik-baik, disini saya menggunakan inertia js dengan typescript. Maka disini jika Anda lihat saya memakai yang namanya route dari tighten. Itu adalah full url dari aplikasi yang sedang kita bangun, seperti contoh misalnya: http://app-name.test/articles/your-article-slug. Kurang lebih seperti itulah isi dari url tersebut.
Banyak sekali icon yang di sediakan oleh package ini, namun ada beberapa yang sering saya pakai yaitu: Facebook, Twitter, Telegram, Whatsapp, Pinterest, Line, Linkedin dan Pinterest.
Nah, saya akan masukkan semua script yang telah saya sebutkan di atas agar Anda juga mengetahui bahwa masing-masing dari komponen share button itu mempunyai props yang berbeda-beda.
import {
FacebookIcon,
FacebookShareButton,
LineIcon,
LineShareButton,
LinkedinIcon,
LinkedinShareButton,
PinterestIcon,
PinterestShareButton,
TelegramIcon,
TelegramShareButton,
TwitterIcon,
TwitterShareButton,
WhatsappIcon,
WhatsappShareButton,
} from 'react-share';
import useTypedPage from '@/Hooks/useTypedPage';
import { ArticleSingleProps } from '@/types';
import useRoute from '@/Hooks/useRoute';
export default function ArticleShare() {
const { article, clara } = useTypedPage<{ article: ArticleSingleProps }>().props;
const route = useRoute();
return (
<div className='mb-8 '>
<h4 className='mb-2 text-slate-500'>Share</h4>
<div className='flex items-center gap-2 [&>button>svg]:h-8 [&>button>svg]:w-8 [&>button>svg]:rounded-lg'>
<FacebookShareButton
url={route('articles.show', [article])}
quote={article.excerpt}
hashtag={article.tags.map((tag) => tag.name).join(', ')}>
<FacebookIcon />
</FacebookShareButton>
<TwitterShareButton
url={route('articles.show', [article])}
title={article.excerpt}
via={clara.app_name}
hashtags={article.tags.map((tag) => tag.name)}>
<TwitterIcon />
</TwitterShareButton>
<TelegramShareButton url={route('articles.show', [article])} title={article.title}>
<TelegramIcon />
</TelegramShareButton>
<WhatsappShareButton url={route('articles.show', [article])} title={article.title}>
<WhatsappIcon />
</WhatsappShareButton>
<PinterestShareButton
url={route('articles.show', [article])}
media={article.picture}
description={article.excerpt}>
<PinterestIcon />
</PinterestShareButton>
<LineShareButton url={route('articles.show', [article])} title={article.title}>
<LineIcon />
</LineShareButton>
<LinkedinShareButton url={route('articles.show', [article])} title={article.title}>
<LinkedinIcon />
</LinkedinShareButton>
</div>
</div>
);
}
Maka jika Anda perhatikan, bahkan ada 1 props yang tidak ada di tempat lain seperti yang di pakai oleh Pinterest yaitu media=.
Sebenarnya jika Anda perhatikan, disini saya design icon nya menggunakan tailwind css yang langsung di tembah dari parent div nya. Namun sebenarnya, Anda bisa langsung memodifikasi nya tepat pada icon itu sendiri. Berikut contoh untuk icon twitter. Alhamdulillah, untuk icon ini props nya tidak berbeda-beda, jadi keseluruhan dari props nya sama.
<TwitterIcon
borderRadius={32}
iconFillColor={'#ff0000'}
round={10}
size={32}
/>
Mungkin kalian berfikir ingin menggunakan icon sendiri, itu bahkan tidak ada masalah sama sekali. Seperti misalnya kita ingin menggunakan tabler icons, maka kita bisa membuat seperti ini.
import { FacebookShareButton, TwitterShareButton } from 'react-share';
import useTypedPage from '@/Hooks/useTypedPage';
import { ArticleSingleProps } from '@/types';
import useRoute from '@/Hooks/useRoute';
import { IconBrandFacebook, IconBrandTwitter } from '@tabler/icons-react';
export default function ArticleShare() {
const { article, clara } = useTypedPage<{ article: ArticleSingleProps }>().props;
const route = useRoute();
return (
<div className='mb-8 '>
<h4 className='mb-2 text-slate-500'>Share</h4>
<FacebookShareButton
url={route('articles.show', [article])}
quote={article.excerpt}
hashtag={article.tags.map((tag) => tag.name).join(', ')}>
<IconBrandFacebook className='h-5 w-5 stroke-[1.25]' />
</FacebookShareButton>
<TwitterShareButton
url={route('articles.show', [article])}
title={article.excerpt}
via={clara.app_name}
hashtags={article.tags.map((tag) => tag.name)}>
<IconBrandTwitter className='h-5 w-5 stroke-[1.25]' />
</TwitterShareButton>
</div>
);
}
Sayang nya, icon ini untuk tabler ini terbatas, karena jika Anda berfikir untuk membuat share ke Line. Itu tidak akan ada pada icon tabler ini. Untuk keseluruhan icon, kalian bisa lihat langsung di website resmi nya yaitu: https://tabler-icons.io/, dan cari untuk "Brand. Maka harusnya akan muncul semua brand company yang kalian inginkan.
Seperti yang saya bilang di awal, hal ini bisa dibuat secara manual, namun. Jika ada package yang dapat membantu kita, kenapa kita harus membuatnya secara manual. Bahkan sebenarnya, banyak sekali package yang menyediakan tentang share button ini. Namun, beberapa dari mereka telah saya pakai, dan jatuh cinta ke react-share ini.
Semoga artikel ini bermanfaat, saya Irsyad. Dan saya akan melihat Anda di artikel selanjutnya.
Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.