19 April 2013

Cara Memasang Sistem Komentar Google Plus di Blogger

Ditulis oleh pada 19.4.13
Mengikuti jejak Facebook (yang telah terlebih dahulu meluncurkan sistem komentar untuk web secara umum), Google akhirnya merilis sistem komentar Google Plus (Google Plus Comment) untuk blog Blogger/blogspot (ke depannya mungkin akan tersedia untuk platform web secara umum). Selain lebih sosial (terintegrasi langsung dengan Google Plus), sistem komentar Google Plus terlihat lebih keren dan eksklusif dari sistem komentar bawaan Blogger yang telah lama kita kenal sebelumnya.

Google Plus Comment

Sayangnya, tidak semua blog dapat dipasangi sistem komentar Google Plus dengan mudah, terutama untuk blog yang templatenya sudah dimodifikasi sedemikan rupa. Bagaimana cara mengaktifkan Google Plus Comment di Blogger? Silakan ikuti ulasan berikut.


Apa itu Google Plus Comment?


Seperti yang telah disinggung di atas, Google Plus Comment adalah sistem komentar baru yang diluncurkan Google sebagai alternatif untuk sistem komentar Blogger yang telah ada sebelumnya. Google Plus Comment ini bersifat opsional, jadi Google masih memberikan pilihan pada kita (pengguna blog Blogger) untuk memakai Google Plus Comment atau tetap bertahan menggunakan sistem komentar bawaan Blogger.


Fitur-fitur Google Plus Comment


Tampilan yang keren - Google Plus Comment hadir dengan tampilan yang bersih dan rapi, dan bisa dikatakan lebih keren dari sistem komentar bawaan Blogger.

Komentar yang sebelumnya telah diposting tidak akan hilang - Anda tidak perlu khawatir akan kehilangan komentar lama bila beralih ke Google Plus Comment. Komentar-komentar yang sebelumnya diposting menggunakan sistem komentar bawaan Blogger akan diimport langsung ke Google Plus Comment.

Memantau semua komentar tentang artikel blog Anda pada satu tempat - Google Plus Comment mampu mengumpulkan semua komentar yang dialamatkan pada artikel blog Anda di satu tempat. Misalnya bila ada pengguna Google Plus yang membagikan link artikel Anda di Google Plus, kemudian link tersebut dikomentari orang lain, maka semua komentar tersebut akan tampil di Google Plus Comment di blog Anda.

Memberikan pilihan untuk berkomentar secara publik maupun privat - Sebelum membagikan komentar di Google Plus Comment, Anda akan diberi pilihan untuk menentukan siapa saja yang bisa melihat komentar Anda tersebut, persis seperti saat kita menggunakan Google Plus.

Kemudahan dalam melihat/membaca komentar - Pembaca blog Anda akan dimudahkan dengan adanya pilihan untuk mengurutkan komentar berdasarkan rating komentar dan waktu komentar.


Cara Memasang Google Plus Comment di Blogger


Pertama-tama, Anda harus menghubungkan blog Anda dengan akun Google Plus dengan mengunjungi tab pengaturan Google Plus di Dasboard Blogger. Setelah itu, beri tanda centang pada "Use Google+ Comments on this blog".

Use Google+ Comments on this blog

Nah, kini blog Anda telah terintegrasi dengan sistem komenter Google Plus. Semudah itu. Namun bila kotak Google Plus Comment tidak muncul, mungkin template blog Anda telah mengalami modifikasi yang menyebabkan hilangnya beberapa deret kode tertentu. Oleh karena itu, silakan ikuti tutorial berikut.

Masuk ke laman Edit Template. Backup template Anda.

Cari kode berikut <b:includable id='iframe_comments' var='post'> dan klik tanda ‘►’ di sebelah kiri untuk membuka kode lanjutannya.

(Bila belum ada) Letakkan kode Google Plus Comment berikut tepat di bawah kode di atas.

<b:if cond='data:post.allowIframeComments'>
    <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
    <b:if cond='data:post.embedCommentForm == &quot;false&quot;'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>


Simpan template Anda.

Bila masih belum muncul juga atau kode di atas sudah ada pada template Anda, silakan cari kode di bawah ini.

<b:include data='post' name='threaded_comments'/>

Kurang lebih, nantinya Anda akan menemukan kode berikut ini.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>

</b:if>

Kemudian ganti kode yang ditandai di atas dengan kode berikut ini.

<b:include data='post' name='comment_picker'/>

Jangan lupa untuk menyimpan kembali template Anda.

Masih belum berhasil juga? Tenang.. tenang, cari kode ini

<b:include data='post' name='post'/>

Kemudian letakkan kode yang saya dapat dari Google+ Comments FAQs berikut ini tepat di bawah kode tersebut di atas.

<div class='cmt_iframe_holder'
expr:data-href='data:post.canonicalUrl'
expr:data-viewtype='data:post.viewType'/>

Simpan kembali template Anda.


UPDATE 21/04/2013: Pihak Blogger rupanya mengupdate template (menambahkan kode) secara bertahap (tidak bersamaan). Hal tersebut terbukti dengan munculnya kode-kode baru pada template blog ini (dan juga beberapa blog saya yang lain). Untuk template-template yang telah diedit secara ekstrim, cara-cara di atas mungkin belum cukup untuk memunculkan kotak komentar Google Plus. Untuk itu, silakan coba cara lanjutan berikut.

Cara ini dapat diterapkan pada semua jenis template Blogger/blogspot maupun website secara umum (selengkapnya dapat dibaca di sini). Jadi gunakan hanya bila cara-cara sebelumnya tidak berhasil mengaktifkan komentar Google+ pada template Anda. 

Temukan kode berikut di template Anda <div id='backlinks-container'>

Kode lengkapnya kurang lebih seperti ini.

<div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
            </b:widget>
          </b:section>
</div>
        </div>

Bila Anda menemukan 2 buah kode yang serupa, pilih yang kedua (terbawah). Selanjutnya sisipkan kode yang berwarna merah di bawah ini, sehingga susunannya menjadi seperti berikut.

<div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
            </b:widget>
          </b:section>
       
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div id='comments'/>
    <script>gapi.comments.render(&#39;comments&#39;, {
    href: window.location,
    width: &#39;575&#39;,
    first_party_property: &#39;BLOGGER&#39;,
    view_type: &#39;FILTERED_POSTMOD&#39;
    });</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='comments'/>
    <script>gapi.comments.render(&#39;comments&#39;, {
    href: window.location,
    width: &#39;575&#39;,
    first_party_property: &#39;BLOGGER&#39;,
    view_type: &#39;FILTERED_POSTMOD&#39;
    });</script>
</b:if>
       
</div>
        </div>

Untuk menyesuaikan lebar kotak komentar Google Plus, ganti angka 575 (dalam pixel) pada kode di atas. Simpan template Anda.

Selanjutnya, Anda dapat melihat live demo dari penerapan sistem komentar Google Plus di blog Membebaskan. Selamat mencoba :)

30 komentar:

  1. yah ini dia yang saya cari. Ini tutorial satu-satunya yang pake bahasa indo sampai saat ini. Selamat ya gan. Tadi baru masuk ke blogger dapat notifikasi tentang G+ comment, langsung saya aktifkan tapi komentarnya tidak muncul dan komentar lama malah jadi tersembunyi. Langsung saya coba pasang dulu

    BalasHapus
    Balasan
    1. Awalnya saya juga seperti itu sob. Akhirnya coba-coba di blog yang templatenya masih default. Saya ambil kodenya dari situ hehe

      Hapus
  2. hohohoo :P
    http://beben-koben.blogspot.com/2013/04/enable-google-plus-comments-in-blogger.html

    BalasHapus
    Balasan
    1. Wah, ketemu lagi sama kang Beben. Apa kabar kang? :D

      Hapus
  3. nemu jg akhirnya d sini.....thanks sob.... :)

    BalasHapus
  4. Help me mass, kok gak muncul ya kalau pake template maskolis ?? padahal udah ikuti tutorialnya :(

    saya coba di template yang lain udah bisa,,

    BalasHapus
  5. Template yang Jhony Wuss mas :) tolong dibantu yak :)

    BalasHapus
    Balasan
    1. Eh salah .. Template Johny See Book Sekali sama Johny Ajaib

      Hapus
    2. Waduh, saya kurang tahu template mana itu sob. Coba langsung hubungi pembuat templatenya, pasti lebih tahu daripada saya :D

      Hapus
  6. kalau saya lebih suka kolom komentar bawaan blogger sobat :-)

    BalasHapus
    Balasan
    1. Blog ini juga masih mempertahankan komentar bawaan blogger sob, masih nunggu perkembangan selanjutnya :)

      Hapus
  7. hmmm,,,saya juga sudah mencobanya tapi tidak berhasil sob,,,saya pakai template buatan Lasantha yang saya download di blognya kang oom...

    BalasHapus
    Balasan
    1. Sepertinya untuk template yang diedit terlalu jauh, masih ada kode lain yang perlu ditambahkan. Masalahnya, saya belum menemukan kode2 tersebut. Sampai saat ini juga belum ada Blogger yang nemu solusinya. Btw, boleh tahu link download templatenya sob?

      Hapus
  8. hehe bener sob nunggu perkembangan selanjutnya, blog ane masih pakai comment bawaan blogger .

    BalasHapus
    Balasan
    1. Iya sob, sepertinya Google+ Comment masih dalam tahap awal pengembangan nih.

      Hapus
  9. wah.. keren banget gan.. kalo cuma dicentang doang rupanya belum mau muncul ya..

    BalasHapus
    Balasan
    1. Kalau pakai template bawaan Blogger pasti langsung muncul sob. Masalahnya, kalau pakai template yang sudah dimodif, bakal lebih ribet masangnya.

      Hapus
  10. Masih belum Muncul Semua Tutorial Sini UDah saya Ikuti.. -_- :(

    BalasHapus
    Balasan
    1. Artikel sudah saya update dengan kode dari Google+ Comments FAQs, silakan cek lagi. Semoga berhasil :)

      Hapus
  11. mantap sob ditunggu kunjungan baliknya

    BalasHapus
  12. wah, boleh dicoba. terima kasih banyak

    BalasHapus
  13. kalo ane pake bawaan aja bro.. centang aja yang atasnya yg bawahnya jgn.. kliatan lg komen2 ane.. kalo centang yg bawah doang sih memang ga kliatan, centang yg atas aja coba kliatan deh ..
    mampir sini juga gan.. :p
    http://onyexbhu.blogspot.com/

    BalasHapus
  14. mas bagus postingan nya Ijin komentar ya mas

    BalasHapus
  15. wah gmana gan... kok komen pembaca gak ke-detect padahal di pos katanya ada 3 komen... saat dibuka gak ada... tolong dibantu gan ...

    BalasHapus

Memudahkan

Suka dengan artikel Memudahkan?

Dukung kami dengan menonaktifkan ad blocker di browser Anda.

FYI: Beberapa isi di blog ini e.g. gambar, tips khusus, dan konten menarik lainnya akan menghilang ketika Anda menggunakan ad blocker.

Terima kasih :)

×