Membuat Tombol Share Like FB Twitter Follow tanpa Plugin

Selain search engine, social bookmarking atau sharing facilitator dapat menjadi alternatif lain untuk meningkatkan traffic ke website atau blog kita. Adapun caranya dapat kita lakukan sendiri dengan membuat akun dan menambahkan sendiri ke social bookmarking pilihan kita. Dan untuk lebih memaksimalkan fungsi social bookmarking ini, kita juga dapat menawarkan kepada para pengujung website kita untuk men-share konten yang kita tulis jika dirasa bermanfaat dan menarik bagi pengunjung. Untuk menggunakan social bookmarking ini sebenarnya ada plugin add this atau share this yang bisa dimanfaatkan. Namun mengingat penggunaan plugin yang terlalu banyak dapat menurunkan performa blog kita, ada baiknya kita pangkas penggunaan plugin dan membuat button social bookmarking mandiri tanpa plugin.

Kelebihan membuat button mandiri ini selain mengurangi jumlah plugin, juga dapat mengurangi http request yang disebabkan oleh loading javascript, image dan lain-lain. Karena saya sendiri hanya menggunakan 2 buah image saja yang sudah dijadikan image sprite. Selebihnya tidak ada javascript dan css, hanya source code. Lihat hasilnya pada bagian akhir tulisan ini. OK deh, kita mulai sadja.

Membuat Tombol Share on Facebook

<a class="fb"href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>"target="blank"title="Share this on Facebook"><img src="https://static1.finderonly.net/demo/img/sbt.png"/></a>

Membuat Tombol Subscribe RSS via Email

<a class="rss" href="http://feedburner.google.com/fb/a/mailverify?uri=d-artchitextweblog" target="blank" title="Subscribe Free RSS"><img src="https://static1.finderonly.net/demo/img/sbt.png"/></a>

Sebagai catatan URL untuk feed pada script di atas sudah diadaptasikan dengan subskripsi feedburner. Jika tidak menggunakan feedburner maka URL diatas (sebagai contoh) diganti dengan “https://blog.finderonly.net/feed”

Membuat Tombol Share on Twitter Follower

<a class="twi"rel=" nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers" target="blank"><img src="https://static1.finderonly.net/demo/img/sbt.png"/></a>

Membuat Tombol Boomark post on Delicious

<a class="del" title="Bookmark this post at Delicious" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>"target="blank"><img src="https://static1.finderonly.net/demo/img/sbt.png"/></a>

Membuat Tombol Boomark Post to Digg

<a class="dig" title="Submit this post to Digg" rel="nofollow" href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>" target="blank"><img src="https://static1.finderonly.net/demo/img/sbt.png"/></a>

Membuat Tombol Share this Post at Stumble Upon

<a class="stu" title="Share this post at StumbleUpon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" target="blank"><img src="https://static1.finderonly.net/demo/img/sbt.png"/></a>

Tombol Kirim Artikel ke Lintas Berita

<a class="lib" href="http://www.lintasberita.com/kirimmedia/url:<?php the_permalink() ?>" target="_blank" title="Kirim artikel ini ke Lintas Berita"><img src="https://static1.finderonly.net/demo/img/sbt.png"/></a>

Membuat Tombol Share to Linked In

No Counter:
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>"></script>
Horizontal Counter:
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="right"></script>
Vertical Counter:
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="top"></script>

Agar diperhatikan, script atau kode di atas sudah disesuaikan dengan kode image sprite yang akan saya berikan di bawah. Jika ingin menggunakan image sendiri Sobat bisa mengganti url image berwarna biru di atas dan menghilangkan ID class-nya. Adapun jika ingin menggunakan image sprite seperti pada contoh button social bookmarking blog ini, silahkan download background imagenya disini. Simpan pada directory images sesuai dengan tema yang digunakan, kemudian tambahkan kode di bawah ini pada style.css:

.fb img{height:19px;padding-right:3px;background:url(images/SB1.png);background-position:0px -1px}
.rss img{height:19px;padding-right:3px;background:url(images/SBB.png);background-position:0px -51px}
.twi img{height:19px;padding-right:3px;background:url(images/SBB.png);background-position:0px -25px}
.stu img{height:19px;padding-right:5px;background:url(images/SBB.png);background-position:0px -78px}			
.del img{height:19px;padding-right:4px;background:url(images/SBB.png);background-position:0px -105px}
.dig img{height:19px;padding-right:3px;background:url(images/SBB.png);background-position:0px -131px}
.lib img{height:19px;padding-right:3px;background:url(images/SBB.png);background-position:0px -201px}			
.goo img{height:19px;padding-right:4px;background:url(images/SBB.png);background-position:0px -154px}

Untuk menggunakan social bookmarking tanpa plugin ini, cukup tambahkan kode-kode di atas pada theme yang digunakan setelah isi posting. Buka file single.php dan copy-pastekan setelah kode <?php the_content(); ?>, yaitu kode untuk memanggil fungsi konten. Adapun jika jumlah share pada blog Anda hilang setelah ganti ke https atau merubah permalink, silahkan baca cara mengembalikan jumlah share yang hilang pada artikel terpisah.

Update: senada dengan plugin ini, baru-baru ini saya membuat plugin featured post yang ringan, tidak meminta query dan dengan tampilan menarik, dilengkpi dengan mp3 player dan tombol share. Nah tombol sharenya ini sangat lengkap karena menggunakan AddThis, situs bookmarking terbesar. Kelebihannya, selain fitur sharenya paling lengkap juga dilengkapi dengan analytic. Nah silahkan download plugin ini pada Featured Random Post Rotator, Mp3 Player, AddThis Share Button.