Membuat Tombol Share di Blog Tanpa Javascript

Membuat Tombol Share di Blog Tanpa Javascript | Salah satu komponen pendukung dalam blog adalah adanya tombol-tombol share di jejaring sosial seperti facebook, twitter, google+ dan lainnya.

Untuk mendapatkan tombol atau button share tersebut biasanya kita harus masuk ke jejaring sosial tersebut, karena di situ sudah ada layanan untuk membuat fitur share button.

Hasil akhir yang didapatkan berupa beberapa script baik gabungan dari html script maupun javascript yang menginduk ke server jejaring sosial tersebut.

Saya sudah pernah menggunakan itu, dan ketika saya cek blog saya di GTMetrix atau pun Google Page Speed, ternyata ada himbauan untuk memparse script khususnya javascript dari share-share button tersebut. Dan menurut saya hal ini mempengaruhi kecepatan loading web blog.

Misalnya tombol Follow Twitter berikut :

<a class=’twitter-follow-button’ data-lang=’en’ data-show-count=’true’ href=’https://twitter.com/S_AdiFirmansyah’>Follow @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&#39;//platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document,&#39;script&#39;,&#39;twitter-wjs&#39;);</script>

Dari script di atas ada yang mengarah ke http://platform.twitter.com/widgets.js, dan ini mempengaruhi kecepatan loading blog.

Nah, dari situlah saya lalu ingin membuat sebuah tombol share jejaring sosial di blog tanpa menggunakan script bawaan dari masing-masing jejaring sosial tersebut.

Langkah awal yang saya lakukan adalah mengecek URL Target dari masing-masing tombol share jenaring sosial yang aslinya.

Setelah saya mendapatkan URL Target selanjutnya dapat saya buat sebuah button hanya dengan tag <a href> tanpa harus menggunakan script bawaan tersebut.

Bagi yang ingin mencoba silahkan ikuti cara berikut,
1. Pertama, masuk ke Template > Edit HTML . Expand Widget Template
2. Lalu copy paste kode CSS berikut di atas kode ]]></b:skin>

.sharearea{border-top:3px solid #ccc;border-bottom:1px solid #ddd;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px}
.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; border-radius: 2px;}
.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}

3. Cari kode berikut

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:post.body/>
</b:if>

Dan copy paste kode dibawah ini tepat di bawah <data:post.body/>

<div class=’sharearea’>Share Artikel Ini :
<a class=’fbshare’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl’ rel=’nofollow’ target=’_blank’>Share Facebook</a>
<a class=’twshare’ expr:href=’&quot;https://twitter.com/intent/tweet?original_referer=&quot; + data:post.canonicalUrl + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;tw_p=tweetbutton&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;via=S_AdiFirmansyah&quot;’ rel=’nofollow’ target=’_blank’>Tweet</a>
<a class=’plshare’ expr:href=’&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl’ rel=’nofollow’ target=’_blank’>Google+</a>
<a class=’twshare’ expr:href=’&quot;https://twitter.com/intent/follow?original_referer=&quot; + data:post.canonicalUrl + &quot;&amp;region=follow_link&amp;screen_name=S_AdiFirmansyah&amp;tw_p=followbutton&amp;variant=2.0&quot;’ rel=’nofollow’ target=’_blank’>Follow Twitter</a>
</div>

*Warna Merah = ganti dengan Twitter Anda tanpa @ [at]

4. Simpan Template Anda. Dan silahkan lihat. Demo langsung di blog ini

Kode CSS di atas dapat anda sesuaikan dengan blog atau selera anda. Setelah diganti dengan kode di atas, kecepatan loading blog akan menjadi lebih cepat. Silahkan mencoba Membuat Tombol Share di Blog Tanpa Javascript.