Cara menambahkan tombol sosial sharing tanpa plugin

Tombol sosial sharingSebenarnya sudah banyak tersedia paket layanan yang gratis untuk membuat tombol sosial sharing seperti addthis, mashable, sharethis dll yang anda bisa gunakan langsung secara instan, bahkan sebagian generator blog/web sudah menyediakanya.

Tapi kadang kala kita menginginkan sesuatu yang berbeda sehingga perlu mengaturnya sesuai keinginan kita misal posisi bahkan judulnya. Untuk itu kali ini saya sedikit berbagi yang saya ketahu tentang bagaimana menambahkan tombol sosial sharing ke website/blog tanpa plugin.

Cara yang saya gunakan adalah dengan menambahkan tombol pintar yang sudah disediakan oleh media sosial sharing seperti facebook, twitter, google dll. Dengan menggunakan tombol pintar ini, tampilan diwebsite/blog lengkap dengan jumlah berapa kali halaman kita dipublikasikan pengunjung ke media sosial, sehingga kita bisa lihat seberapa popular informasi yang kita tulis. Caranya sangat mudah, kita tinggal tambahkan beberapa baris kode didalam publikasi informasi kita atau pada template yang sudah ada. Posisi penempatan bebas dimana saja sesuai keinginan. Untuk mendapatkan kodenya silahkan kunjungi link berikut :

  1. Tombol Like Facebook
  2. Tombol Twitter
  3. Tombol Digg
  4. Tombol Linkedin / inShare
  5. Tombol Google Plus
  6. Tombol Pin It
  7. Tombol Stumble

Atau silahkan copas dan sesuaikan kode berikut :

<!--SideBar Floating Share Buttons-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<div style="clear: both;font-size: 9px;text-align:center;padding:3px"><a href="http://www.zainalhakim.web.id/posting/cara-menambahkan-tombol-sosial-sharing-tanpa-plugin.html" target="blank" style="color:red">[Get This]</a></div>
</div>
<!--SideBar Floating Share Buttons-->

Semoga bermanfaat.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Cara mudah melakukan testing kecepatan website atau blog
    Kecepatan loading atau koneksi ke sebuah website sangatlah penting diperhatikan karena berhubungan dengan peningkatan pengunjung yang datang ke website kita. Jika proses koneksi atau tampilnya halaman web kita lambat otomatis pengunjung akan kecewa dan mu
  • Mengenal htaccess dan fungsinya
    File .htaccess adalah file konfigurasi yang disediakan oleh web server Apache, yang biasanya digunakan untuk mengubah pengaturan default dari Apache. Kita ketahui bahwa sebagian besar web hosting di internet menggunakan Apache sebagai servernya sehingga bagi para pengelola web / webmaster sedikit banyak harus belajar tentang .htaccess agar kita bisa mengubah pengaturan default dari server.
  • Menambahkan www pada setiap url dengan htacces
    Cara mengkonfigurasi file htacces hosting agar setiap url dilengkapi dengan www
  • Mengganti default halaman utama website
    Pada saat sebuah alamat website diakses, misal www.zainalhakim.web.id atau www.zainalhakim.web.id/posting/, web server biasanya akan mencari file utama website yang biasanya diberi nama index.html. Jika tidak ada, maka web server akan mencari alternatif file utama lainya seperti index.php, index.asp, atau index.jsp. Urutan pencarian biasanya mengikuti pengaturan dasar dari servernya.

Kiriman terbaru