Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

[TUTORIAL] Buat Share Button Twitter dan Facebook di Web anda

edited January 2011 in Share
Tutorial kali ini lumayan simpel tapi bisa mempunyai efek yang lumayan besar. Sekarang ini hampir semua orang yang browsing di internet mempunyai account twitter ataupun facebook. Akan sangat menguntungkan sekali untuk web anda jika ada yang masuk ke web anda, lalu membaca sesuatu yang menarik dan mereka bisa share webpage anda di account twitter / facebook mereka. User bisa saja share webpage anda secara manual lewat account mereka masing2 tetapi alangkah baiknya jika mereka bisa langsung melakukannya langsung lewat webpage anda tersebut lewat klik satu button saja. Tutorial kali ini akan memberikan bagaimana caranya untuk membuat share button tersebut.

<img src="http://lh4.ggpht.com/_FAqtGARDUf8/TS3M6dHJfVI/AAAAAAAAASg/39SBB3r970U/s400/share_fb_twitter.png"; height="160" width="400" />
Seperti yang terlihat di gambar demo ini, button twitter dan share button facebook yang akan kita buat akan mempunyai tampilan seperti itu. Jika kalian ingin modif button tersebut, tampilannya ataupun cara menampilkan informasinya anda bisa ke link ini <a href="http://twitter.com/about/resources/tweetbutton"; title="Informasi share button twitter">untuk twitter</a> dan <a href="http://developers.facebook.com/docs/share"; title="Informasi share button facebook">untuk facebook.</a>

Sebenarnya cukup mudah, anda cukup memasukkan beberapa baris script berikut di setiap halaman webpage anda yang ingin anda tampilkan.<div class='geshi_syntax'><table><tr><td><div class='code'><pre class="html"><div id="shareButton">
<div id="butTwitter">
<a href="http://twitter.com/share"; class="twitter-share-button" data-count="horizontal" data-via="isikan_username_twitter_anda">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>;
</div>
<div id="butFb">
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"; type="text/javascript"></script>
</div>
</div></pre></div></td></tr></table></div>
Tag divnya cuekin aja soalnya itu untuk style mengatur letak button tersebut. Sebagai catatan dalam demo di tutorial ini, untuk share button ini hanya bisa di kasih masing2 satu button per halaman webpage anda. Untuk bisa menampilkan banyak share button di satu halaman webpage anda harus modif lebih lanjut scriptnya.

Untuk button facebook anda bisa kasih parameter di tag a nya<div class='geshi_syntax'><table><tr><td><div class='code'><pre class="html"><a name="fb_share" type="button"url="YOUR_URL"></a>
<!--dalam bentuk button-->
<a name="fb_share" type="icon_link"url="YOUR_URL"></a>
<!--dalam bentuk icon custom anda sendiri-->
<a name="fb_share" type="icon"url="YOUR_URL"></a>
<!--dalam bentuk icon sendiri--></pre></div></td></tr></table></div>
perlu anda perhatikan jika anda memasukkan parameter share_url, url tersebut harus di encode dulu. kalau di php bisa memakai fungsi urlencode() atau kalau lewat javazscript bisa memakai encodeURIComponent()

untuk twit button juga bisa dikasih parameter seperti berikut<div class='geshi_syntax'><table><tr><td><div class='code'><pre class="html"><a href="http://twitter.com/share"; class="twitter-share-button" data-count="vertical" data-via="username_twitter">Tweet</a>
<!--dalam vertical count-->
<a href="http://twitter.com/share"; class="twitter-share-button" data-count="horizontal" data-via="username_twitter">Tweet</a>
<!--dalam horizontal count-->
<a href="http://twitter.com/share"; class="twitter-share-button" data-count="none" data-via="username_twitter">Tweet</a>
<!--tidak pakai count--></pre></div></td></tr></table></div>

Seperti biasa, untuk lebih jelasnya anda bisa download source code dan coba dijalankan di komputer masing2. Oh ya sebagai catatan, share button ini tidak bisa jalan dilocalhost atau lebih tepatnya url yang formatnya tidak benar. Soalnya biasanya kalo dilocalhost itu biasanya punya url begini "http://localhost/app_apa_gitu"; soalnya ini bukan url yang valid. Untuk mencoba langsung bisa klik link demo diatas artikel ini. Terima Kasih, Saran dan Komentar sangat ditunggu.

Untuk bisa lihat demo dan donwload source codenya bisa melalui blog saya dilink berikut
<a href="http://www.nikolius-luiso.web.id/posting/Buat_Share_Button_Twitter_dan_Facebook_di_Web_anda"; title="[Tutorial] Buat Share Button Twitter dan Facebook di Web anda">[Tutorial] Buat Share Button Twitter dan Facebook di Web anda</a>

Tanggapan

Sign In or Register to comment.