19 April 2013

Cara Memasang Sistem Komentar Google Plus di Blogger

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 :)

Memudahkan

Suka dengan artikel Memudahkan?

Dukung kami dengan memasukkan blog ini pada whitelist ad blocker Anda.

Terima kasih :)

×