#Blogging for Human

Rabu, 02 Januari 2013

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.



loading...
Membuat Tombol Share di Blog Tanpa Javascript 4.5 5 Adi Firmansyah Rabu, 02 Januari 2013 Membuat Tombol Share di Blog Tanpa Javascript | Salah satu komponen pendukung dalam blog adalah ad...
Rabu, 02 Januari 2013Rabu, Januari 02, 2013

Membuat Tombol Share di Blog Tanpa Javascript

4.5 out of 5 based on 24 ratings. 5 user reviews:

Bagi yang kesulitan untuk mengirim komentar di blog ini, silahkan baca ini Cara Mengirim Komentar Melalui Disqus Comment System

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.. :D Salam kenal dan sekalian izin copy kode2 di atas ya... (y)

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

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

    BalasHapus
  4. Thanks Infonya Sob, sangat membantu blog Saya,

    BalasHapus
  5. Makasih banyak gan.. akhirnya ketemu disini yang saya maksud.. :D ctrl+d dulu gan :) kunjung balik ya

    BalasHapus
  6. Makasih banyak gan. Ijin sedot caranya. :V

    BalasHapus

*Centang "Beri Tahu Saya" untuk mendapatkan notifikasi di email kamu kalau Komentar kamu sudah mendapat balasan dari ku.

*Jika tidak memiliki akun Google, silahkan pilih Name/URL, jangan Anonymous. Komentar dengan Anonymous tidak akan ditampilkan.


*Komentar tidak langsung muncul, karena akan saya moderasi terlebih dahulu.

*Segala bentuk komentar SPAM/Iklan tidak akan ditayangkan.

*Komentarlah sesuai dengan topik artikel di atas (Bisa Kritik/Saran/Kesan/Pertanyaan)

*KOMENTAR MODEL (Like, Nice Article, Thanks infonya, dll) yang hanya bertujuan untuk mendapatkan BACKLINK, tidak akan di APPROVE. Jika ingin mendapatkan BACKLINK dari blog ini silahkan hubungi saya untuk kerjasama SPONSORED POST.