Jejaring sosial merupakan media yang paling banyak dikunjungi dan Facebook merupakan jejaring sosial yang menempati peringkat pertama paling banyak dikunjungi di seluruh dunia[1]. Banyaknya pengunjung yang menggunakan jejaring sosial merupakan kesempatan baik bagi para blogger untuk membagikan setiap artikelnya kedalam situs jejaring sosial dengan harapan semakin banyak pengunjung yang datang untuk membaca-baca blog kita, tentunya hal ini sangat berpengaruh terhadap posisi blog kita di mata mesin pencari. Namun jika kita sendiri yang membagikan artikel demi artikel dari blog kita ke situs jejaring sosial, maka para pengunjung yang akan datang ke blog kita hanya sejumlah teman-teman yang ada pada jejaring kita saja. Untuk itu menambahkan tombol atau link yang berfungsi untuk membagikan artikel kita ke situs jejaring sosial sangat bermanfaat agar para pengunjung blog kita dapat membagikan link artikel kita ke jejaring mereka.
Dua Cara Integrasi Tombol Berbagi Jejaring Sosial Pada Blog
1). Tombol Berbagi Terintegrasi pada ArtikelLangkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML" dan klik "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
.sharesoc {
display:inline-block;
float:right;
height:125px;
margin:5px 0;
width:60px;
}
Langkah 5Cari kode dibawah ini:
<data:post.body/>Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<span class='sharesoc'>Langkah 7
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float: right; margin: 8px 0px 0pt 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</span>
Simpan template dan preview blog anda...
2). Tombol Berbagi Terapung pada Pinggir Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
#sharehal {position:fixed; bottom:20%; margin-left:185px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharehal .tblshare {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;}
.sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}
Langkah 5Cari kode dibawah ini:
</body>Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<div id='sharehal'>Langkah 7
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</a>
</div>
</div>
Simpan template dan preview blog anda...
3). Pekerjaan Rumah
Kedua cara di atas akan menampilkan tombol berbagi jejaring sosial pada berbagai halaman (baik halaman utama ataupun halaman artikel). Nah tugas anda adalah mengintegrasikan kedua cara menambahkan tombol jejaring sosial di atas kemudian mengatur tampilannya, jika kita buka halaman utama maka tombol jejaring sosial yang tampil adalah dari cara pertama (Tombol Berbagi Terintegrasi pada Artikel) dan jika kita buka halaman artikel maka tombol jejaring sosial yang tampil adalah dari cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel). Cara mengatur tampilan tombol berbagi adalah artikel sebelumnya yang membahas Conditonal Tag.
<b:if cond='data:blog.pageType != "item"'>
<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float: right; margin: 8px 0px 0pt 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>Keterangan :
<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</a>
</div>
</div>
</b:if>
Untuk mengatur posisi tombol pada cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel) perhatikan kode pada Langkah 4 baris 1 :
- bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol
- margin-left:185px = ubah nilai 185 untuk mengatur jarak antara bagian pinggir browser dengan tombol
- float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel
- background-color:#fff = ubah nilai fff untuh mengatur warna latar belakang dan sesuaikan dengan warna latar belakang artikel blog anda
Catatan kaki:
[1] Top 1000 Sites - August 2010, Google AdPlanner. Diakses 20 September 2010
