Cara Membuat Tombol Share di Blogger Dalam 3 Langkah (Gaya Simple + Elegant)

Sebuah blog populer biasanya akan banyak memperoleh feedback dari pembacanya. Contoh bentuknya adalah share artikel ke media sosial. Mulai dari yang paling populer, Facebook, sampai dengan media sosial ala chatting seperti Whatsapp.

Pengetahuan utama yang harus diketahui adalah alamat link share media sosial yang dituju. Setelah diketahui, sebuah tombol share baru bisa ditambahkan berdasarkan link tersebut. Agar terliihat menarik, tombol share dilengkapi dengan ikon yang berkorelasi dengan tujuan share media sosial.

Contoh link share (Facebook & Twitter) :
https://www.facebook.com/sharer/sharer.php?u=LINK_ARTIKEL&t=JUDUL_ARTIKEL
https://twitter.com/intent/tweet?source=LINK_ARTIKEL&text=TWEET

Simpelnya, kita bisa membuat link share dengan tag HTML anchor ( <a>), lalu menambahkan ikon di dalamnya agar terlihat menarik. Pertanyaannya, dimana kita tahu judul dan link artikel yang perlu disisipkan pada link tersebut?

Untuk platform blogger,  judul dan link artikel bisa diperoleh dengan script layout data tags. Pakai data:post.title untuk memperoleh judul dan data:post.link untuk link artikel. Contohnya...

<a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank'>....</a>

Agar lebih menarik, kita gunakan ikon font awesome. Sehingga menjadi seperti ini...

<a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share on Facebook'>
   <i aria-hidden='true' class='fa fa-facebook-square fa-2x'></i>
</a>

Oke, langsung saja. Pertama cari kode <b:includable id='shareButtons' pada template anda.

<b:includable id='shareButtons' var='post'>
 ...
</b:includable>

Ubah semua isinya menjadi kode berikut ini.

<b:includable id='shareButtons' var='post'>
  <ul class='custom-share-buttons'>
<li>
 <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share on Facebook'>
<i aria-hidden='true' class='fa fa-facebook-square fa-2x'>
</i>
<span class='sr-only'>
 Share on Facebook
</span>
 </a>
</li>
<li>
 <a expr:href='&quot;https://twitter.com/intent/tweet?source=&quot; + data:post.url + &quot;&amp;text=&quot;+ data:post.title + &quot;:%20&quot; + data:post.url' target='_blank' title='Tweet'>
<i aria-hidden='true' class='fa fa-twitter-square fa-2x'>
</i>
<span class='sr-only'>
 Tweet
</span>
 </a>
</li>
<li>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank' title='Share on Google+'>
<i aria-hidden='true' class='fa fa-google-plus-square fa-2x'>
</i>
<span class='sr-only'>
 Share on Google+
</span>
 </a>
</li>
<li>
 <a expr:href='&quot;http://www.tumblr.com/share?v=3&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; +  data:post.title + &quot;&amp;s=&quot;' target='_blank' title='Post to Tumblr'>
<i aria-hidden='true' class='fa fa-tumblr-square fa-2x'>
</i>
<span class='sr-only'>
 Post to Tumblr
</span>
 </a>
</li>
<li>
 <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; +  data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' target='_blank' title='Pin it'>
<i aria-hidden='true' class='fa fa-pinterest-square fa-2x'>
</i>
<span class='sr-only'>
 Pin it
</span>
 </a>
</li>
<li>
 <a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Submit to Reddit'>
<i aria-hidden='true' class='fa fa-reddit-square fa-2x'>
</i>
<span class='sr-only'>
 Submit to Reddit
</span>
 </a>
</li>
<li>
 <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet + &quot;&amp;source=&quot; + data:post.url' target='_blank' title='Share on LinkedIn'>
<i aria-hidden='true' class='fa fa-linkedin-square fa-2x'>
</i>
<span class='sr-only'>
 Share on LinkedIn
</span>
 </a>
</li>
<li>
 <a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.snippet + &quot;:%20&quot; + data:post.url' target='_blank' title='Send email'>
<i aria-hidden='true' class='fa fa-envelope-square fa-2x'>
</i>
<span class='sr-only'>
 Send email
</span>
 </a>
</li>
  </ul>
</b:includable>

Langkah berikutnya, sisipkan kode CSS berikut di atas tag </head> template anda.
<style>
ul.custom-share-buttons li {
display: inline-block;
border: none !important;
padding: 5px !important;
}
.custom-share-buttons li a, .custom-share-buttons li a:visited {
color: #888;
}
.custom-share-buttons li a:hover {
color: #444;
}
</style>

Terakhir, cari kode awesome.min.css atau awesome.css di template anda. Jika keduanya tidak ada, sisipkan kode berikut di bawah tag <head> atau sebelum kode CSS di atas.

<link crossorigin='anonymous' href='https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css' integrity='sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU' rel='stylesheet'/>

Dan, selesai. Selamat mencoba :)
Btw, jika tampilan belum sesuai keinginan atau melenceng dari screenshot artikel ini, silahkan berkomentar. Nanti akan saya bantu mengarang kodenya.