Membuat Custom Social Network Share Button Part 1

Yak berhubung akhir – akhir ini saya lagi semangat buat ngeblog😀 saya mau membagi tutorial yg saya dapatkan ketika saya membuat web http://ict.smkn1batam.sch.id/ dan web http://datapokok.smkn1batam.sch.id/. Ketika membuat web itu, guru saya menyuruh saya membuat tombol share buttonnya, so langsung aja searching ke pak de google, dan akhirnya berhasil juga buat tombol share buttonya. Kalau untuk wordpress, social network share buttonnya langsung ada secara otomatis, jadi ngak usah repot2 lagi😉

Saya membuat 2 variasi tombol share buttonnya. variasi pertama share buttonnya langsung dari social networknya sendiri, oh ya kalau share button yg variasi pertama, cuma ada 3 aja social network buttonnya yaitu: twitter, facebook dan google+. variasi yg kedua, share buttonnya memakai plugin dari www.addthis.com. Yuk ngak usah banyak basa basi lagi langsung aja kita mulai tutornya🙂

Oke pada tutorial kali ini saya hanya memposting cara membuat share button yang variasi pertama, untuk variasi yg kedua silahkan tunggu dipostingan selanjutnya ya😉 yuk kita mulai buat share button yg variasi pertamanya😀 Nanti full scriptnya kira2 seperti dibawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Social Network Share Button</title>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

<style type="text/css">
div#shareButton {
width: 100%;
overflow: hidden;
float: right;
}
div#shareButton div#butTwitter {
float: right;
width: 100px;
background: #cccccc;
padding: 3px;
margin: 2px;
border-radius: 2px;
-moz-border-radius: 2px;
}
div#shareButton div#butFb {
float: right;
width: 100px;
background: #cccccc;
padding: 3px;
margin: 2px;
border-radius: 2px;
-moz-border-radius: 2px;
}
div#shareButton div#butGoogle {
float: right;
width: 60px;
background: #cccccc;
padding: 3px;
margin: 2px;
border-radius: 2px;
-moz-border-radius: 2px;
}
</style>
</head>

<body>
<div id="shareButton">
<div id="butTwitter">
<a href="http://twitter.com/share" data-count="horizontal" data-via="ictsmkn1batam">Tweet</a>
</div>
<div id="butFb">
<a name="fb_share"></a>
</div>
<div id="butGoogle">
<g:plusone size="medium"></g:plusone>
</div>
</div>
</body>
</html>

Yak dan berikut ini penjelasannya :

Pertama – tama kita harus memasukkan url dari file javascript setiap social network yg akan kita buat share buttonnya, letakkan script ini di bawah tag <title>, atau terserah anda, yg penting letaknya masih di dalam lingkungan tag <head>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

kita buat css untuk share buttonnya, supaya share buttonnya keliatan lebih menarik😀 seperti saya :p kalau style cssnya kurang sesuai dengan keinginan hati, cssnya bisa anda rubah2 kok😉 Oh iya, script ini juga harus diletakkan dalam lingkungan tag <head>

<style type="text/css">
div#shareButton {
width: 100%;
overflow: hidden;
float: right;
}
div#shareButton div#butTwitter {
float: right;
width: 100px;
background: #cccccc;
padding: 3px;
margin: 2px;
border-radius: 2px;
-moz-border-radius: 2px;
}
div#shareButton div#butFb {
float: right;
width: 100px;
background: #cccccc;
padding: 3px;
margin: 2px;
border-radius: 2px;
-moz-border-radius: 2px;
}
div#shareButton div#butGoogle {
float: right;
width: 60px;
background: #cccccc;
padding: 3px;
margin: 2px;
border-radius: 2px;
-moz-border-radius: 2px;
}
</style>

dan langkah terakhir tinggal memunculkan tombol share buttonnya

<div id="shareButton">
<div id="butTwitter">
<a href="http://twitter.com/share" data-count="horizontal" data-via="ictsmkn1batam">Tweet</a>
</div>
<div id="butFb">
<a name="fb_share"></a>
</div>
<div id="butGoogle">
<g:plusone size="medium"></g:plusone>
</div>
</div>

nah khusus yg untuk twitter, anda bisa mengisi variabel “via” sesuai dengan keinginan anda, untuk contoh kali ini saya mengisinya seperti ini “via = ictsmkn1batam” karena share buttonnya saya pakai di web ict sekolah saya😀

Nah untuk demonya bisa diliat di http://ict.smkn1batam.sch.id/tutorial/108/2011/efek-tulisan-matrix-dengan-javascript/

Selamat Mencoba Ya😀

One comment on “Membuat Custom Social Network Share Button Part 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s