Cara Membuat Tombol Social Share tanpa Plugin – Ketika sedang berkunjung ke sebuah web, anda pasti pernah menemukan tombol social share kan? Nah sebagai blogger pemula pasti bertanya tanya, bagaimana cara membuat tombol tersebut.
Secara umum, ada dua cara membuat tombol social share seperti itu. Yakni, dengan membuatnya menggunakan bantuan plugin, dan tanpa plugin. Pada artikel kali ini kita akan membahas cara yang kedua. Yakni, cara membuat tombol social share tanpa menggunakan plugin. Caranya mudah, simak penjelasannya berikut.
Komposisi yang dibutuhkan
Dalam proses pembuatan tombol social share pada web, kita membutuhkan beberapa komposisi. Mulai dari HTML, kemudian SVG, sampai dengan CSS.
Dan yang pasti, tidak menggunakan javascript ya. Sehingga bakalan lebih ringan. Tenang saja, meskipun dibuat tanpa javascript, hasilnya tetap maksimal kok, dan tetap terlihat elegan pastinya.
Cara membuat tombol social share
Berikut ini merupakan tutorial yang bisa diikuti oleh para blogger pemula:
Buat element
Cara pertama yang bisa kita lakukan adalah dengan membuka halaman web anda. Kemudian pilih menu tampilan, add new element, hook, create.
Buat hook
Setelah ada di bagian halaman editor, maka anda dapat memberikan nama sosial share, dan salin kode berikut ke editor hook baru.
<?php
$mamamudaURL = urlencode(get_the_permalink());
$mamamudaTitle = urlencode(get_the_title());
$mamamudaImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), ‘full’));
?>
<div class=”mamamuda-social-wrapper”>
<span class=”hide-on-mobile”>Share on:</span>
<a class=”mamamuda-social-sharing mamamuda-social-facebook” href=”https://www.facebook.com/sharer/sharer.php?u=<?php echo $mamamudaURL; ?>” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z”/></svg></a>
<a class=”mamamuda-social-sharing mamamuda-social-twitter” href=”https://twitter.com/intent/tweet?text=<?php echo $mamamudaTitle;?>&url=<?php echo $mamamudaURL;?>&via=heyapakabarcom” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z”/></svg></a>
<a class=”mamamuda-social-sharing mamamuda-social-pinterest” href=”https://pinterest.com/pin/create/button/?url=<?php echo $mamamudaURL; ?>&media=<?php echo $mamamudaImage; ?>&description=<?php echo $mamamudaTitle; ?>” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z” fill-rule=”evenodd” clip-rule=”evenodd”/></svg></a>
<a class=”mamamuda-social-sharing mamamuda-social-linkedin” href=”https://www.linkedin.com/shareArticle?url=<?php echo $mamamudaURL; ?>&title=<?php echo $mamamudaTitle; ?>&mini=true” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z”/></svg></a>
<a class=”mamamuda-social-sharing mamamuda-social-whatsapp” href=”https://api.whatsapp.com/send?text=<?php echo $mamamudaTitle; echo ” “; echo $mamamudaURL;?>” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z”/></svg></a>
<a class=”mamamuda-social-sharing mamamuda-social-reddit” href=”https://reddit.com/submit?url=<?php echo $mamamudaURL;?>&title=<?php echo $mamamudaTitle; ?>” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z”/></svg></a>
</div>
Setting Hook
Kalau sudah, maka cara membuat tombol social share tanpa menggunakan plugin yang berikutnya adalah dengan mengatur hook, alias setting hook nya. Yakni, dimana tombol sharenya bakalan ditampilkan. Apakah akan diletakkan setelah artikel, sebelumnya, di sebelah kanan, atau sebelah kiri.
Nantinya tinggal pelajari saja menu yang ada untuk memilih letak tombol sharenya. Kemudian, tidak ada salahnya buat mengatur bagian display rules ya. Dan bagian ini juga dapat disesuaikan dengan tampilan yang diinginkan.
Tambahkan CSS di icon social share
Adapun cara membuat tombol social share tanpa menggunakan plugin yang terakhir adalah dengan menambahkan kode CSS. Hal ini berguna untuk memberikan styling iconnya. Adapun kode css yang bisa digunakan ialah:
.mamamuda-social-wrapper {
margin: 30px 0;
font-size: 0;
}
.mamamuda-social-wrapper span {
font-weight: bold;
padding-right: 10px;
font-size: 16px;
}
.mamamuda-social-sharing {
font-size: 17px;
padding: 7px 20px;
}
@media only screen and (max-width: 600px) {
.mamamuda-social-sharing {
font-size: 17px;
padding: 7px 12px;
display: inline-block;
}
}
.mamamuda-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.mamamuda-social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
}
.mamamuda-social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
}
.mamamuda-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.mamamuda-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.mamamuda-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.mamamuda-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.mamamuda-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.mamamuda-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.mamamuda-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.mamamuda-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.mamamuda-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.mamamuda-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.mamamuda-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}
.mamamuda-social-reddit:hover {
background-color: rgba(255, 87, 0, .8);
}
Adapun cara menambahkan cssnya ialah dengan masuk ke bagian menu tampilan, pilih menu sesuaikan, kemudian klik pada css tambahan, tempelkan kode tersebut pada kolom yang ada, klik save. Selesai deh. Jika sudah, anda bisa kok menyesuaikannya kembali, sesuai dengan selera dan keinginan.
Nah, demikian pembahasan seputar cara membuat tombol social share tanpa menggunakan plugin yang bisa dicoba. Semoga membantu, selamat mencoba, dan semoga berhasil ya.