Membuat Tombol Share di Blog Tanpa Javascript

Dikategorikan dalam Blog, Tutorial
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.

Baca Artikel Lainnya :

8 komentar

  1. Kayaknya perlu dicoba diblog saya nih sob cos kalau tombol share yg saya pasang saat ini yaitu dari layanan AddThis kayaknya bikin nambah2 waktu loading blog saya aja tuh.. 😀 Salam kenal dan sekalian izin copy kode2 di atas ya… (y)

  2. @S. Adi FirmansyahKirain lama baru mau dimunculkan komentr saya sob… 😀 Sekalinya balik lagi cuman untuk memastikan, ternyata komentar saya sdh dimunculkan… 😀

  3. @S. Adi Firmansyah : Hahahaha…. Luar biasa admin blog ini. Btw, kapan kunjungan baliknya nih ke rumah saya sob…. Hehehehe….

  4. Makasih banyak gan.. akhirnya ketemu disini yang saya maksud.. 😀 ctrl+d dulu gan 🙂 kunjung balik ya

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *