Cara Membuat Widget Share Button FB, Tweet dan Google+1 di Blog

Pada postingan kali ini saya akan berbagi tips mengenai cara buat widget berupa tab share button FB, tweet dan Google+1 melayang di blog.

Sebagaimana kita ketahui bersama, dewasa ini popularitas media jejaring sosial khususnya Facebook dan twitter sangat tinggi, bahkan kalau kita perhatikan disekitar kita, orang lebih mengenal facebook daripada internet itu sendiri, bahkan di sebagian kalangan orang akan merasa tidak punya gengsi jika tidak mempunyai akun facebook.

Kali ini saya tidak akan membahas mengenai situs jejaring sosial, namun berdasarkan fakta tersebut diatas maka dapat saya sampaikan bahwa popularitas jejaring sosial dapat kita manfaatkan untuk meningkatkan traffik blog kita jika kita mampu mengintegrasikan blog kita dengan beberapa situs jejaring sosial yang begitu populer saat ini.

Salah satu upaya yang dapat kita lakukan untuk mengintegrasikan blog kita dengan situs jejaring sosial tersebut adalah dengan memasang tombol share / share button situs tersebut seperti facebook, twitter, Google plus dll ke dalam blog kita, dengan harapan para pembaca blog kita akan menshare artikel blog kita ke dalam jaringan mereka, sehingga link artikel blog kita akan tersebar luas, sehingga peluang meningkatnya trafik blok kita akan sangat terbuka..

Salah satu cara untuk mengintegrasikan blog kita dengan situs jejaring sosial yang akan kita bahas kali ini adalah dengan memasang tombol share / share button di widget blog yang ditampilkan melayang pada tab sebelah kanan. Cara ini tergolong sangat mudah, karena kita tidak perlu mengubah template blog, kita cukup menambahkan gadget/widget blog pada side bar. adapun caranya adalah sebagai berikut:

login ke akun bloger Anda.
Pilih menu Tata letak / lay out
Tambah Gadget / widget
Pilih gadget dengan konfigurasi < > HTML/JavaSript, klik tombol "+" yang berada disebelah kanannya
Copy code berikut dan paste kan pada kotak yang terletak pada window gadget HTML/JavaSript:


<style>
#pageshare {position:fixed; bottom:0%; right:5px; 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="bagikan ke teman anda">
<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='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>
Simpan Widget/Gadget
Selesai, dan silahkan lihat hasilnya.

Kita bisa mengedit tampilan widgetnya dengan cara mengedt sript diatas sesuai dengan template blog kita maupun selera kita, silahkan berkreasi sendiri.

Demikian postingan kali ini mengenai cara membuat widget share button FB tweet dan google+1 di blog, semoga bermanfaat untuk Anda.

PRODUK KAMI