Langkah Pemasangan Butang Perkongsian Sosial (WordPress)

Ditulis oleh

Jika korang perasan, blog ini mengalami perubahan sedikit sejak semalam apabila aku menambah butang perkongsian sosial pada bahagian atas dan bawah entri. Jika sebelum ini aku hanya memasang butang Facebook Like dan Tweet Button, kini ia ditambah dengan butang Google+. Idea untuk menambah butang ini datangnya dari paparan tema blog Amanz.MY. Disebabkan ia nampak kemas, lalu aku dengan tiada perasaan bersalah aku mencuri idea tersebut.

Jika korang merupakan pengguna tema Thesis, korang boleh mengikuti tutorial khas untuk tema tersebut di blog Si Bintang. Jika korang bukan pengguna Thesis, korang boleh cuba cara yang aku akan tunjukkan ini. Oh ya, paparan pada butang ini juga agak berbeza jika dibandingkan dengan butang yang terdapat pada entri Si Bintang.

 

 

Contoh Butang Sosial Dari Sibintang

 

Satu perkara lagi, buat masa ini, tutorial butang perkongsian sosial ini hanya untuk pengguna WordPress. Aku akan cuba mengubah kodnya bagi pengguna Blogspot dapat menggunakannya. InsyaAllah.

Langkah Pemasangan.

1. Pertama sekali, sila ke bahagian Appearance Editor.  Dashboard > Appearance > Editor.

2. Pastikan korang berada di style.css kerana proses pemasangan akan dimulakan.

Sesetengah theme, korang perlu memasukkan kod dibawah pada lokasi yang lain.

3. Masukkan kod dibawah ke dalam style.css tadi.

Sebelum melakukan pengubahsuaian, aku sarankan korang buat backup kod asal sebagai langkah berjaga-jaga.

4. Seterusnya, pergi ke header.php dan masukkan code dibawah sebelum </head>.


5. Seterusnya pergi ke Single Post (single.php), dan masukkan pula kod dibawah pada tempat yang korang mahu.


Korang boleh memilih untuk meletakkan pada bahagian atas atau bawah entri atau kedua-duanya. Tetapi diingatkan, sila lakukan backup pada kod asal.

6. Sila periksa samaada pemasangan butang sosial ini berjaya. Jika tidak, sila cuba sampai boleh. Boleh tanya pada aku, tetapi mungkin jawapan korang akan terima sedikit lewat.

Tambahan

Untuk butang sosial Facebook, terdapat 2 jenis butang yang disediakan (sila rujuk gambar dibawah). Bagi kod diatas, ia menggunakan butang jenis ‘a’. Bagi mereka yang mahukan butang jenis ‘b’, sila tukarkan kod Facebook diatas, kepada kod dibawah.


Jika kedudukan butang sosial ini kelihatan sedikit terkeluar dari entri, sila lakukan pengubahsuaian pada kelebaran butang Facebook. Ini kerana, kod yang aku buat ini mempunyai kelebaran kira-kira 580px.

Akhirnya berjaya jugak aku siapkan entri ni. Banyak error masa nak lihatkan kod. Kod ini diubahsuai dari kod yang dibuat oleh AzmanIshak. Bagi mereka yang mahu berkongsikan kod diatas, sila lakukan backlink kepada entri ini dan kalau ada yang nak kongsi, tolong jangan lakukan hotlinking pada gambar diatas. Sila save dan upload semula. Hargailah usaha aku membuat kod dan tutorial ini.

Komen

  • ak pun dah pasang, curi code dr amanz.my jgk.. x pe dh mintak kebenaran dia utk curi. tp thanks buat tutorial ni, sbb sblm ni pun ak ada masalah jgk utk psg dgn betul. now br blh psg yg betul2 punya. :D

    Azah Jul 23, 2011 12:04 pm Reply
    • aman tak bagi, aku sepak die.. haha

      Mr Piratz Jul 23, 2011 12:24 pm Reply
      • pergh. yer ar. aku ko sepak-sepak. haha.

        aman Jul 23, 2011 2:10 pm Reply
  • thx, nanti nak try juga ler…harap2 jadi..

    Twit N View Jul 23, 2011 12:10 pm Reply
    • boleh punye…

      Mr Piratz Jul 23, 2011 12:23 pm Reply
      • tak jadi pulak…

        Twit N View Jul 23, 2011 12:25 pm Reply
        • facebook share tue memang ada ke?

          Mr Piratz Jul 23, 2011 12:27 pm Reply
          • aku dah deactivate kan plugin yg aku pakai tu..
            dia timbul perkataan tweet jer…

            Twit N View Jul 23, 2011 12:35 pm
  • terma kasih pokcik atas backlink. sebenarnya segala mak nenek pasal coding dan komputer aku dah redirect pada blog *.NET.

    yang ni lattest coding bersama butang google +1
    http://azmanishak.net/index.php/2011/06/memasang-butang-google-1-secara-manual/

    KReuger Jul 23, 2011 12:20 pm Reply
  • nanti eden torai tutorial ni

    khairil Jul 23, 2011 1:14 pm Reply
  • aku dah pernah buat dulu, ada org suruh aku update dgn butang G+ aku malas nak buat haha. btw, ada background tu nampak lebih nice.

    Tau tak apa problem die? width untuk setiap theme tak sama. tapi macam ko nye theme ni standard size kut, dalam 600px camtu. Kalau nak bg lebih flexible, width tu mungkin blh tukar guna % hehe.

    Btw, untuk blogspot pun dah ada org buat. Cuma perlu tambah css untuk background je. Settle

    P/s: aku pnh cuba wat untuk genesis, masih belum berjaya lagi dgn hook2 yang ada

    Affan Jul 23, 2011 1:23 pm Reply
  • pi lah sorg buat wordpress plugin. malas gilo eden nak edit css ni…

    FD Jul 23, 2011 6:11 pm Reply
  • mantap gitu..tq atas perkongsian.. :grin: :grin:

    acid Jul 24, 2011 7:45 am Reply
  • Pingback: Langkah Pemasangan Butang Perkongsian Sosial (Blogspot) | MrPiratz[dot]Com

  • Yang penting ia berfungsi bukan sekadar kosmetik :-)

    akubiomed Jul 24, 2011 6:20 pm Reply
  • hoho…menarik tertarik…apa kata ko tlg pasangkan pada kotakminda.com…hehe…klu free la…:P

    Mohd Isa Jul 26, 2011 12:10 am Reply
  • tumpang tanya,kalo kuar tweet je yg lain tak kuar, apa penyelesaiannye

    acad Jul 27, 2011 7:20 pm Reply
  • wow.. nice one.. aku nk sedut background button tu leh.. hahahaha… :tongue:

    Mr.Bintang Jul 29, 2011 8:07 pm Reply
  • butang share xder eh..

    informasi.my Jul 31, 2011 11:30 pm Reply
    • facebook share ke? boleh guna facebook like.. facebook share button tak cantik…

      Mr Piratz Jul 31, 2011 11:33 pm Reply
    • kalau leh mintak wat sekali untuk butang facebook share..

      informasi.my Jul 31, 2011 11:34 pm Reply
  • Emm, yg facebook like tu kan, aku tak letak kod ni: div id = ” fb-root ” / div
    Ok ke bro?
    Emm, aku nak yg gambar ikon tu ek… :)

    Azuan Aug 1, 2011 4:40 am Reply
    • terpulang… selagi button tue kuar, takde masalah..
      pasal icon tue ambik jerk la…

      Mr Piratz Aug 1, 2011 5:56 am Reply
      • Tapi satni baru jer tambah balik kod tu.. ok bro, thanks.. ada masa nak edit lg..

        Azuan Aug 1, 2011 5:59 am Reply
  • Menarik..cuma kena pandai main css je

    wazy Aug 1, 2011 3:21 pm Reply
  • bro..dah pasang tapi google plus pnya button tak keluar la..
    lagi satu code facebook ( b ) tu rasanya takde semicolon kat akhir ( ; )

    Izwan Aug 2, 2011 12:02 pm Reply
  • bro
    bde nieh auto tiap kali update entry ka??

    akmalhilmi Aug 4, 2011 4:33 am Reply
  • kenapa aku punya google+ tak jadi.kotaknya gambarnya semua ada, butang nye je tak de.

    Amar Aug 14, 2011 7:28 am Reply
  • Pingback: Memasang Butang Perkongsian Sosial Pada Wordpress | Ahmad Rushdi Dot Com

  • bro, lain je aku punya walaupun jadi.. background image maca tak keluar je.. warna sama je dalam aku punya bro.. nak letak mana lagi ek?

    Mr Leypark Sep 4, 2011 3:28 am Reply
  • tutorial menarik…tapi saya jumpa satu plugin yg memudahkan nak pasang butang sosial ni…dengan aktivate saje.tak perlu nak paham kod html ni.download plugin ni …Facebook , twitter , google-new button pastu setting saje nak letak kat bawah atau kat atas.just nak kongsi….

    eddyhata Sep 10, 2011 1:32 am Reply
  • Tak menjadi bro.. Apa yang tak kena erk?

    ProfHariz Nov 9, 2011 2:31 am Reply
    • Style.css kalau x letak disitu nak letak kt mn? Sy pakai theme cubismo

      ProfHariz Nov 9, 2011 2:38 am Reply
  • ada plugin tak? hehe

    paihujey Nov 30, 2011 1:00 am Reply
    • untuk plugin, sila refer kat blog amanz.my

      Mr Piratz Nov 30, 2011 10:13 am Reply
  • Salam bro, boleh tolong buat untuk button share tak? :)

    Umar Faruq May 13, 2012 2:52 pm Reply
    • Button share yang mana?

      Mr Piratz May 14, 2012 2:15 pm Reply
      • Button share untuk Facebook. Hehe. Boleh tambah tak?
        Sebab sekarang aku guna plugin untuk button tu.

        Umar Faruq May 14, 2012 3:32 pm Reply
        • Bukan ke Share dengan Like sama je.. Bila orang like, automatik akan dishare kat FB..

          p/s: Rasanya la..

          Mr Piratz May 14, 2012 3:41 pm Reply
          • Memang kalau orang like dia akan automatik dishare dekat FB. Tapi ada kebanyakan orang tak suka tekan like, dia suka tekan share sahaja. Agak efek opada traffil saya. :)

            Boleh tengok contoh dekat entri ini [ http://bit.ly/ITr9K0 ] .
            Cuba tengok beza bilangan share dengan like. :)

            Umar Faruq May 14, 2012 5:23 pm
          • owh.. sebab ko letak dua-dua.. aku rasa ko boleh buang dah kot fb share tue.. sebab facebook dah buang option fb share..

            Dari web Facebook : The Share button has been deprecated in favor of the Like button, and will no longer be supported. Facebook Share

            Mr Piratz May 14, 2012 5:32 pm
  • Ouh.. Memang dah tak releven untuk guna button share tu ek? Okies, terima kasih ya. :)

    Umar Faruq May 14, 2012 6:08 pm Reply
  • Salam, kenapa saya punya jadi macam ni ek?

    http://awesomescreenshot.com/04a9gv020

    Umar Faruq Jul 2, 2012 11:07 pm Reply
    • oopss.. Aku rasa gambar untuk icon tue dah tak valid.. :(

      Mr Piratz Jul 3, 2012 5:45 pm Reply
      • Erk.. Abestu macam mana nak betulkan ek?

        Umar Faruq Jul 3, 2012 9:55 pm Reply
        • Link dah diperbetulkan.. Cuba try.. TQ..

          Mr Piratz Jul 3, 2012 11:04 pm Reply

Leave a Comment

Your email address will not be published. Required fields are marked *