Dec 242009
 

Logo Twitter dan Facebook

Pernah lihat tombol-tombol share seperti di samping kanan ini? Ya pernah dong, kan itu ada di kanan :P

Maksudnya, mungkin anda pernah/sering lihat ada tombol/widget share Facebook dan Twitter di bagian atas sebuah artikel blog di mana pada kedua widget itu terlihat angka yang menunjukkan banyaknya link dari sebuah artikel/posting yang dishare oleh pengunjung blog.

Bila tertarik, anda juga bisa memasangnya dengan memasukkan kode tertentu pada template blog, sehingga pada setiap artikel secara otomatis akan terlihat berapa banyak link yang dishare pada kedua layanan online social networking tersebut (Twitter dan Facebook).

Berikut ini adalah tutorial cara pemasangannya di blog, khususnya Blogger/Blogspot.

*

Pilihan Kode Widget Share Twitter dan Facebook

Silahkan lihat-lihat dulu pilihan widget share yang disediakan oleh TweetMeme (untuk widget Twitter) dan widget share Facebook. Nanti kodenya akan ditempatkan pada template blog:

*

Kode Widget Share Twitter (TweetMeme)

KODE-TWEETMEME-1 (kotak)

<script type='text/javascript' src='http://tweetmeme.com/i/scripts/button.js'></script>

KODE-TWEETMEME-2 (memanjang)

<script type='text/javascript'> tweetmeme_style = 'compact'; </script> <script type='text/javascript' src='http://tweetmeme.com/i/scripts/button.js'></script>

*

Kode Widget Share Facebook

KODE-FACEBOOK-1 (kotak)

<a title='Share on Facebook' 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>

KODE-FACEBOOK-2 (memanjang)

<a title='Share on Facebook' name='fb_share' type='button_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>

*

Cara Memasang Kode Widget Share Pada Template Blogger

  • Login ke akun Blooger.
  • Klik “Layout”, lalu klik tab “Edit HTML”.
  • Klik “Expand Widget Templates”.
  • Cari kode ini: <p><data:post.body/></p> atau <data:post.body/>
  • Di atas kode tersebut, masukkan kode ini:
    <div style='float:right; margin:0 0 10px 10px; text-align:center;'>
    KODE-TWEETMEME
    <br />
    <br />
    KODE-FACEBOOK
    </div>
  • Ganti tulisan KODE-TWEETMEME dan KODE-FACEBOOK dengan kode widget TweetMeme dan Facebook pilihan anda (lihat Pilihan Kode Widget).
  • Klik tombol “PREVIEW” untuk mereview perubahan tampilan template.
  • Bila tampilannya sudah benar, silahkan klik “SAVE TEMPLATE”.

*

Catatan

Untuk memasang widget tersebut (TweetMeme dan Facebook), kita tidak perlu menggunakan akun Twitter atau Facebook. Bahkan kita tidak harus punya akun di Twitter atau Facebook, karena tombol itu secara otomatis akan membaca URL artikel kita dan menunjukkan angka link sharenya yang tidak tergantung pada akun kita, jadi sebenarnya bisa dipasang di blog/situs mana saja.

Kode di atas adalah untuk pemasangan pada bagian atas artikel sebelah kanan. Kalau mau ditaruh di kiri, ganti kode style pada tag div menjadi:
<div style='float:left; margin:0 10px 10px 0;'>

Kalau ingin memasang widget secara memanjang (menyamping), hilangkan tag <br />. Atau coba experimen sendiri aja ya :P, kan nanti bisa direview dulu sebelum disave.

*

Update

Sebagai alternatif, silahkan lihat yang ini:

[TUTORIAL] Pasang Tombol Twitter, Facebook Share dan Facebook Like (3-in-1)

*

Bagi-bagi… :D

.

  • i

  84 Responses to “Pasang Widget Share Twitter dan Facebook Otomatis Di Setiap Artikel Blog”

  1. udah aku coba pasang share face booknya tapi eror terus. apa karena template yang di gunakan berbeda yach.

  2. makasih infonya sangat membantu
    salam :wink:
    next time agan tengok gubuk saya.

  3. Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar. Pesan error XML: The element type “b:includable” must be terminated by the matching end-tag “” nih pesan setelah berulang kali di utak atik, tolong infonya… makasih untuk petunjuk via e mail; : hilyaku@yahoo.com.. :-D

  4. nice info gan. di coba dulu script aah :-D . hehe

  5. makasih nih, ane lagi otak atik tombol share.. :idea:

  6. numpang link gan..Berbagi Info: Memasang widget share twitter, facebook di bawah a…: Mungkin sudah banyak yang tau memasang widget share facebook,twitter,yahoo dan lain-lain. Sebenarnya sudah ada widget share yang standard na…

  7. terima kasih atas informasinya..

    bagi kami yang masih baru pemula …. yg ingin belajar blogging , ^_^

    salam,
    melisa :oops:

  8. dblogspot ak kug kagak ada
    atau nya gan. . . ? Mh0n pncerahannya

  9. thanks mas,, q dah praktekkin n bisa..

    oia mau share blogq juga nih kunjungi n jadi member yah mas : http://gustibagusfindrapurnama.blogspot.com/

    :wink: :)

  10. Bermanfaat sekali. Makasih

  11. punya ane bisa tpi ko ngak bisa di klik yah ?

    :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x :-x

  12. Follow back yo mas

  13. wiiiiiiiiiiiiii jaddi gan thanks :lol: :mrgreen: :idea: :-D :wink:

  14. :-P thanks gan, [img]http://imgcash5.imageshack.us/img686/437/smilebycraive.gif[/img]
    follow mw blog technobasespace.blogspot.com

  15. makasih bgt gan,,
    udah tak coba n berhasil. :wink:

  16. sangat membantu buat newbie :)

  17. thank’s gan

  18. makasih atas share widget share ini gan, coba ane praktekkan dulu ya!

 Leave a Reply

(required)

(required)


8 − = six

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blog Indonesia
Blog Indonesia
tekno info intermezzo
X