Tuesday, November 6, 2012

Cara Membuat "Komentar Facebook" di Blog

43 comments
Assalamualaikum...

Bagi setiap Blogger, pengunjung memiliki arti yang sangat penting.
Dengan banyak pengunjung, berarti blog kita ramai alias blog kita disukai banyak orang. Dengan banyak pengunjung, berarti informasi atau postingan yang kita share di blog kita itu bermanfaat buat mereka.
Kalau menurutku ini yang paling penting : "Apa yang kita share, bermanfaat buat orang lain".
Dan dengan banyak pengunjung pula, itu berarti semakin banyak uang, hehehe... Yuph... itu tentunya untuk para sahabat Blogger pemilik blog-blog yang berbau bisnis online.


Namun untuk meningkatkan pengunjung blog itu tidaklah semudah membalikkan telapak tangan, perlu kerja keras dan kesabaran. Nah, salah satu cara untuk meningkatkan pengunjung blog kita itu adalah dengan mempromosikannya di Facebook.

Sedikit berbagi pengalaman, saat aku membagikan postingan blog ini di Facebook, Alhamdulillah lho... banyak teman-teman Facebookku yang berkata bahwa mereka menyukai postingan-postingan di blogku ini. Mereka bilang, banyak informasi-informasi penting yang bermanfaat di blogku dan menambah pengetahuan mereka. #hwaahhh.... aku seneng banget dengernya, jadi pengen koprol keliling kampung...#


Tapi ada sedikiiit keanehan, kan katanya banyak teman-teman Facebookku yang suka dengan postingan-postingan di blog ini. Tapi kok aku lihat di blog gak ada komentar dari mereka, yang ada aku malah menerima banyak pesan dinding dan inbox, yang isinya komentar dan pertanyaan dari teman-teman Facebook yang telah membaca post-post di blog ini. Ternyata, masalahnya adalah beberapa diantara mereka ada yang tidak memiliki akun Google untuk menulis komentar di blog.

Padahal untuk seorang Blogger (pemula) seperti saya ini, "Satu Komentar dari Pengunjung Sangat Berarti".

Setelah tahu masalahnya seperti itu, saya berusaha untuk mencari tahu, bagaimana penyelesaiannya... Akhirnya saya menemukan cara untuk membuat kotak Komentar Facebook di Blog tanpa menghilangkan kotak Komentar bawaan dari Blogger. Sehingga tampilannya jadi seperti berikut :


Buat kamu yang sedang mencari tahu tentang Cara Membuat Komentar Facebook di Blog, berikut aku kasih tau cara-caranya yaa...

Langkah Pertama,
Kamu login/masuk ke akun blogger kamu.

Langkah Kedua, Silahkan perhatikan gambar...
Klik "Template" (yang dilingkari warna hitam) lalu klik "Edit HTML" (yang dilingkari warna merah)

Langkah Ketiga,
Setelah terlihat tampilan seperti pada gambar dibawah ini, klik "Lanjutkan".

Langkah Keempat,
Beri ceklis pada kotak kecil disamping tulisan "Expand Template Widget"

Langkah Kelima,
Kamu cari kode  ]]></b:skin> 
(Untuk mempermudah pencarian, gunakan ctrl + f . Lalu masukan kode  ]]></b:skin> di kotak pencarian yang biasanya berada di bagian bawah sebelah kiri)

Langkah Keenam,
Setelah itu, simpan kode berikut diatas kode ]]></b:skin> yang tadi kamu cari.

    .comments-page { background-color: #;}

    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

Langkah Ketujuh,
Cari kode </head> lalu simpan kode berikut diatasnya.
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID Facebook Kamu' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>


Perhatikan Kode Diiatas.!!!
Pada tulisan yang berwarna hijau, silahkan ganti dengan ID Facebook kamu. Misalnya link profil Facebook kamu adalah : https://www.facebook.com/Nama Akun Facebook Kamu, maka ID kamu itu adalah yang berada pada tulisan berwarna hijau.

Langkah Kedelapan,
Cari kode  <div class='comments' id='comments'> lalu masukan kode dibawah ini :


    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>

    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='5' width='630'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>



Mohon Diperhatikan.!!!

1. Jika kamu menemukan ada 2 kode <div class='comments' id='comments'> 
    Maka, kamu simpan kode diatas tepat di bawah kedua kode <div class='comments' id='comments'>.

2. Angka 5 adalah jumlah komentar yang akan ditampilkan pada komentar Facebook.
    Angka 630 merupakan lebar kotak komentar Facebooknya.

Dan kamu bisa mengubah angka-angka tersebut, sesuai dengan lebar template blog kamu.

Langkah Kesembilan,
Kilk "Simpan Template" atau "Save"

Selesaaaii....
Silahkan lihat hasilnya, 


Oh iya... dengan adanya kotak komentar Facebook ini, diharapkan para pengunjung blog kita dapat mengirim komentar pada artikel blog dengan mudah. Yaitu dengan menggunakan akun Facebook mereka. 

Meskipun memang terkadang ada pemilik blog (termasuk saya) juga yang mengijinkan "Anonymous User" untuk post komentar di blognya, Namun jika hanya mengandalkan kotak komentar bawaan dari Blogger saja, terkadang ada pengunjung yang merasa malas untuk menulis komentar karena ada beragam persyaratan yang harus dipenuhi misalnya harus login ke Google Acount. Sedangkan dia tidak memiliki akun Google.

Selain itu kelebihan kotak komentar Facebook ini adalah sangat efektif untuk SEO (Search Engine Optimizing), karena ada pilihan “Post comment to my Facebook profile”.
Jika tanda centang diaktifkan, maka komentar dari pengunjung akan mampir juga ke profile pengunjung tersebut. 
Dengan demikian, besar kemungkinan teman mereka yang juga tertarik dengan postingan kita, akhirnya ikut berkunjung ke blog kita.


Nah, itulah cara membuat kotak komentar Facebook di blog.
Semoga bermanfaat... khususnya buat Giny yang semalam tanya tentang ini, hehehe....

Ehh, siapa sih Giny...?
itu lho blogger keuren, pemilik blog Recent Activity 
hehehe....

43 comments :

  1. YES BERHASIL..:D

    Makasih ya de, jadi terharu...hehe :D

    ReplyDelete
    Replies
    1. HOREE... :)

      Iya sama-sama, ahh biasa aja kakak, hehehe :D

      Delete
  2. dari segi promosi ok sob,..cuman biasanya para blogger yang ingin berkomentar di blog itu menginginkan backlink dan komentar facebook tidak memberikan backlink sob,..hehhe tapi kalau buat promosi blog ini yang paling hebat sob,...aku coba dua2nya ya,...

    ReplyDelete
    Replies
    1. Betul... itu kelemahannya, tidak memberikan backlink... padahal termasuk saya, selalu berarap, backlink, backlink dan backlink, hihihi
      iya, silahkan dicoba, sob...

      Delete
  3. Replies
    1. Teriakasih, berharap bisa bermanfaat, :)

      Delete
  4. lebih dari 5 tutorial aku coba mengenai Cara Membuat "Komentar Facebook" di Blog. tp nggak ada yg bisa 1 pu. setelah ngikutin tutorial yang ini, alhamdulillah berhasil :D nice thread. makasiiiiiii ;))))

    ReplyDelete
    Replies
    1. Sama-sama, Alahamdulillah... senang sekali kalau bisa bermanfaat...
      Salam Sukses untuk Megha Octarina :)

      Delete
  5. masih ya terbantu banget jangan lupa mampir ke blog saya Olalashop1@blogspot.com

    ReplyDelete
    Replies
    1. Iya sama-sama...
      sipp deh, siap meluncur ke TKP, hehe

      Delete
  6. mantap gan,ane sudah coba diblog ane...tks ya keren jd nya....wkwkwk by http://jasafinance.blogspot.com

    ReplyDelete
    Replies
    1. Iya sama-sama... Alhamdulilah kalau udah berhasil :)

      Delete
  7. lagi iseng search membuat komentar facebook, eh ketemu mba lg.
    http://softwareku4u.blogspot.com

    berhasil si,makasih.

    ReplyDelete
    Replies
    1. heheh...mudah-mudahan gak bosen ya ketemu aku..
      iya sam-sama, seneng kalau bisa bermanfaat :D

      Delete
    2. kaka counter alexa nya keren udah elit ^_^

      lanjutkan :D

      Delete
    3. Hai Agiel :)
      hihi, iya Alhamdulillah.... berharapnya sih bisa lebih baik lagi dari ini, hehe terima kasih yaa

      Delete
  8. Nih buat yang ingin setiap komentar facebook ada pemberitahuan dan ada apakah komentar tersebut mau ditampilkan atau tidak. sama seperti komentar blogger.

    Langsung saja ke halaman ini ya, http://softwareku4u.blogspot.com/2013/01/membuat-komentar-facebook-ada-pemberitahuan-masuk.html

    ReplyDelete
    Replies
    1. Oke... terimakasih banyak tambahannya :D

      Delete
  9. kok jadi'y gini yah??? bkan'y k'samping malah k'bawah ? :D

    Look it dehh , sory :)
    http://aboy212.blogspot.com/2013/01/download-habibie-ainun-full-movie.html

    ReplyDelete
    Replies
    1. memang hasilnya ada yang berdampingan dengan kotak komentar Blogger dan ada yang berurutan kebawah, saya gak tau pasti penyebabnya apa tapi sepertinya itu dipengaruhi juga kode script dari template blog yg kamu pakai...

      Delete
  10. Replies
    1. hmm... kenapa ya, tapi udah diikutin setiap langkah-langkahnya?

      Delete
  11. saya sudah ikutin langkah2nya tapi gak bisa...

    ReplyDelete
    Replies
    1. hmm... kenapa ya...
      biasanya masalah di langkah ke-8, coba lebih teliti lagi di step yang itu.. semoga berhasil :)

      Delete
  12. Alhamdulillah, saya bisa mengaplikasikannya di Blogku :) makasih Deeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee :D

    Pokonya makasih aja deh :D hehehe

    ReplyDelete
    Replies
    1. Alhamdulillah.... iya sama-sama, semoga blognya Ray makin mantap, hehe...

      Delete
  13. tanks ya ....
    follow back ya..
    ini blog q.
    http://thephatar.blogspot.com

    ReplyDelete
    Replies
    1. Sama-sama, okee...
      Terima kasih udah follow :)

      Delete
  14. koment aku double,..gimn dong mbak,..

    ReplyDelete
    Replies
    1. maksudnya double gimana ya? setiap langkah-langkahnya udah diikutin dengan benar, mas/mba?

      Delete
  15. Replies
    1. karena mungkin langkah-langkahnya gak diikuti semua atau memang blog milik anda tidak cocok jika menggunakan tambahan komentar dari FB, :)

      Delete
  16. Produk dijamin asli.
    Tilla Shop : Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Garansi Resmi Distributor dan gransi TAM.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI DI http://tilla-shop.blogspot.com/
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    SAMSUNG
    Asli Buatan Korea.
    HARGA PROMO

    Samsung Galaxy Note II N7100 Rp 2.499.000.
    Samsung Galaxy Chat B5330 Rp 1.220.000.
    Samsung GT-E1205M Rp 145.000.
    Samsung Galaxy Ace Duos S6802 Rp 1.525.000.
    Samsung I8530 Galaxy Beam Rp 4.825.000.
    Samsung Galaxy Ace 2 I8160 Rp 2.250.000.
    Samsung I9300 Galaxy S III Rp 2.800.000.
    Samsung I9070 Galaxy S Advance Rp 2.850.000.
    Samsung Galaxy mini 2 S6500 Rp 1.400.000.
    Samsung E1390 Rp 200.000.
    Samsung Galaxy Ace Plus S7500 Rp 1.850.000.
    Samsung S 5300 Galaxy Pocket Rp 850.000.
    Samsung Galaxy Y Duos S6102 Rp 1.150.000.
    Samsung C3312 Deluxe Duos Rp 500.000.
    Samsung C3520 Rp 425.000.
    Samsung E1232B Rp 200.000.
    Samsung i9250 Galaxy Nexus Rp 2.250.000.
    Samsung C3350 X Cover II Rp 750.000.
    Samsung S5610 Rp 725.000.
    Samsung C3330 Champ 2 Rp 525.000.
    Samsung I8150 Galaxy W Rp 1.950.000.
    Samsung GT-N7000 Galaxy Note Rp 1,700.000.
    Samsung E1195 Rp 225.000.
    Samsung Galaxy Y S5360 Rp 875.000.
    Samsung i509 Galaxy Y CDMA Rp 875.000.
    Samsung W139 Rp 350.000.
    Samsung E2232 Rp 350.000.
    Samsung I9100 Galaxy S II Rp 2.250.000.
    Samsung C3322 Rp 400.000.
    Samsung E1182 Rp 175.000.
    Samsung E2152 Rp 425.000.
    Samsung E2652 Champ Duos Rp 615.000.
    Samsung S3850L Corby II Rp 550.000.
    Samsung B7510 Galaxy Pro Rp 1.550.000.
    Samsung Ch@t 322 Wi-Fi Rp 500.000.
    Samsung GT-E1055T Rp 175.000.
    Samsung GT-E3210 Rp 495.000.
    Samsung I9003 Galaxy SL 4 GB Rp 1.850.000.
    Samsung Nexus S i9023 Rp 1.350.000.
    Samsung I9003 Galaxy SL 16 GB Rp 3.000.000.
    Samsung Gio S5660 Rp 1.450.000.
    Samsung Galaxy FIT S5670 Rp 1.200.000.
    Samsung Samsung F480 - Rp 550.000.
    Samsung Galaxy Mini S5570 Rp 900.000.
    Samsung B6520 Omnia PRO 5 Rp 725.000.
    Samsung S5253 Wave525 Rp 900.000.
    Samsung i8510 innov8 Rp 875.000.
    Samsung S5830 Galaxy ACE Rp 1.750.000.
    Samsung S5333 Wave533 Rp 900.000.
    Samsung C3510 Genoa - Rp 550.000.
    Samsung i900 Omnia - Rp 1.100.000.
    Samsung S5753 Wave575 Rp 1.000.000.
    Samsung I5503 Galaxy 5 Rp 825.000.
    Samsung i5510 Galaxy 551 Rp 1.250.000.
    Samsung S8530 Wave II Rp 1.750.000.
    Samsung C3303 Champ Rp 175.000.
    Samsung I9000 Galaxy S Rp 1.650.000.

    ReplyDelete
  17. Potingannya sangat rinci hingga mudah dipahami .. thanks ya

    ReplyDelete
    Replies
    1. Terima kasih yaa...

      hehe... iyaa sama-sama.... :)

      Delete
  18. wah terima kasih gan.. infonya sangat mantab dan baru kali ini bisa berhasil.. sebelumnya susah banget.. tutorial agan lengkap pokoknya oke.. ooh ya tanya gan... kalo merubah warna teknya menjadi putih gimana gan.. soale begronnya item teknya ite jadi nggak kelihatan... sekali lagi makasih gan.. ditunggu petunjukknya...
    http://wargademak.blogspot.com

    ReplyDelete
    Replies
    1. Hai... iya sama-sama... untuk merubah warna teks, saya belum pernah mencoba, hehe... jadi nggak tahu pasti bagaimana caranya, sebagai alternatif mas mungkin bisa mencoba mengubah warna background nya, caranya pada bagian kode berikut :

      .comments-page { background-color: #;}

      ubah tanda pagar (#) dengan kode html warna yang mas inginkan, mudah-mudahan bisa membantu :)

      Delete