Memasang Komentar Facebook Pada Blog AMP HTML Dan Sinkronisasi Fans Page

Akhirnya Google memilih Facebook comments plugin yang pertama di-support oleh AMP HTML. Untuk itu kemudian saya mencobanya di salah satu blog AMP saya dan komentar Facebook tampil sempurna di blog, cara memasangnya pun cukup mudah.

Selain itu, komentar yang masuk bisa disinkronisasikan dengan fans page, artinya komentar yang masuk bisa tampil di blog dan di fans page dengan menggunakan aplikasi Facebook.

Untuk mencoba komentar Facebook di blog AMP, silahkan coba di tombol di bawah ini.


Jika Anda ingin mencoba memasang komentar Facebook di blog AMP, silahkan ikuti langkahnya di bawah ini.

Silahkan copy kode HTML ini.


            <b:includable id='fb-comment' var='post'>
<div class='fb-comments' id='fb_comments'>
<amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
</amp-facebook-comments>
</div>
            </b:includable>

Jika background blog Anda light atau terang, silahkan hapus kode data-colorscheme='dark'

Kemudian silahkan simpan kode HTML tadi di bawah kode berikut:


<b:includable id='comments' var='post'>
............
............
............
</b:includable>

Sehingga tampilannya seperti berikut:


<b:includable id='comments' var='post'>
............
............
............
</b:includable>
            <b:includable id='fb-comment' var='post'>
<div class='fb-comments' id='fb_comments'>
<amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
</amp-facebook-comments>
</div>
            </b:includable>

Silahkan copy kode berikut:


<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='fb-comment'/>

Dan simpan tepat di bawah kode berikut:


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

Kemudian silahkan simpan kode meta di bawah ini di atas kode </head>


<meta content='xxxxxxxxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxxx' property='fb:profile_id'/>

Silahkan ganti xxxxxxxxxxxxxxx untuk fb:admins dengan ID profile Facebook Anda dan xxxxxxxxxxxxxxx untuk fb:profile_id dengan ID fans page blog Anda.

Kemudian silahkan simpan kode berikut di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
</b:if>

Kemudian silahkan cek komentar Facebook di salah satu postingan blog Anda.

Nah untuk menampilkan komentar yang masuk tampil di blog dan fans page Facebook, silahkan ikuti langkahnya di bawah ini.

Silahkan buat Aplikasi Facebook baru di https://developers.facebook.com/.

Silahkan kasih nama FB_Comments untuk aplikasi yang Anda buat. Setelah halaman aplikasi muncul silahkan klik tab App Review di sidebar kiri. Dan ubah aplikasi Anda menjadi Public dan pilih aplikasi untuk fans page.

Kemudian silahkan simpan kode meta berikut di atas kode </head>


<meta content='xxxxxxxxxxxxxxxx' property='fb:app_id'/>

Ganti xxxxxxxxxxxxxxxx dengan ID aplikasi yang Anda buat tadi.

Sekarang silahkan masuk pada salah satu postingan blog Anda lalu klik tulisan Moderation Tool pada komentar Facebook seperti gambar berikut:


Di halaman berikutnya silahkan klik nama Aplikasi Anda seperti di gambar berikut:


Di halaman berikutnya silahkan klik Setting seperti gambar berikut:


Kemudian pada popup yang muncul silahkan centang pada yes, mirror to dan pilih fans page blog Anda.


Selesai.

Nah mirroring ini akan muncul pada postingan baru setelah ini dibuat, setiap komentar yang dibuat di blog akan muncul di fans page, begitu pun sebaliknya komentar yang dibuat di post fans page akan muncul di komentar blog.

Reactions:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser