Cara Memasang Komentar Facebook Pada Blog AMP HTML

BLOG MOBILE.






     Accelerated mobile page kini sudah mendukung sistem komentar menggukan facebook dengan plug-ins facebook komentar.
Untuk membuat komentar facebook ini bisa ini bisa di lakukan dengan dua cara
Pertama memasang komentar facebook di luar postingan/atau di bawah blog
Cara kedua di dalam postingan atau bisa di katakan dengan iframe.

Dengan memasang komentar facebook di blog kita bisa singkronisasikan langsung dengan fans page yang anda kelola,artinya setiap ada pemberitahuan/notivikasi komentar dari blog akan otomatis masuk ke fans page anda

Langsung saja berikut langkah langkahnya memasang komentar facebook pada blog accelerated mobile page.


MEMASANG KOMENTAR FACEBOOK DI LUAR POSTINGAN.



Sebenarnya di blog KOMPI AJAIB sudah di jelaskan dalam blognya.

Langkah Pertama.
Silahkan anda simpan kode berikut 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>

Dan simpan kode tadi di bawah kode ini.
<b:includable id='comments' var='post'>
............
............
............
</b:includable>

Sehingga tampilan kode script nya menjadi seperti ini.
<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>

Langkah kedua.
cari kode berikut ini di template blog AMP anda.
<b:include data='post' name='post'/>

dan simpan di bawah kode berikut ini di atas kode tadi.
<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='fb-comment'/>

Langkah ketiga.

Kemudian simpan kode meta facebook di bawah ini di tag </head>.

<meta content='XXXXXXXXXXXXXXX' property='fb:app_id'/>
<meta content='XXXXXXXXXXXXX' property='fb:admins'/>
<meta content='XXXXXXXXXXXXXXX' property='fb:profile_id'/>

Keterangan:

  • Ganti XXXXXXXXXXXXXX dengan fb:app_id 
  • Ganti juga  XXXXXXXXXXXXXX untuk fb.admins dengan ID PROFILE FACEBOOK
  • Dan ganti XXXXXXXXXXXXXXX untuk fb:profile_id      dengan ID FANS PAGE anda 

Fungsi kode di atas adalah untuk sincronisasi komentar facebook di blog dengan fans page anda dan juga untuk menjaga spam di facebook ketika di share ke facebook.

Untuk mendafatkan id aplikasi Silahkan anda buat dulu aplikasi facebook di facebook for developers.
https://developers.facebook.com/

Dan simpan juga script amp js facebook komentar ini di bawah 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>

SELESAI.

MEMASANG KOMENTAR FACEBOOK DI DALAM POSTINGAN/EMBED.



Untuk memasang komentar facebook di postingan seperti yang sudah di jelaskan di https://www.ampproject.org/docs/reference/components/amp-facebook-comments
Sebenarnya hampir sama seperti cara pertama bedanya kalo memasang komentar di dalam postingan kita bisa atur postingan mana saja yang mau di pasang plugin komentar facebook ya tentunya dengan menggukan tag conditional khusus untuk URL tertentu.

Langkah Pertama.
Simpan amp-facebook-comments di bawah ini di atas </head>

<b:if cond='data:blog.url in {&quot;http://bloggingmobile.blogspot.com/2017/05/cara-menggukan-fiture-baru-instragram.html&quot;,&quot;http://bloggingmobile.blogspot.com/2017/05/cara-embed-status-facebook-dan-video-di.html&quot;,&quot;http://bloggingmobile.blogspot.com/2017/05/membuat-postingan-supaya-valid-amp.html&quot;}'>
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
</b:if>

Keterangan:
Ganti URL postingan di atas  dengan URL yang mau di pasang komentar facebook.

Dan simpan juga kode meta ID FACEBOOOK nya seperti di cara pertama tadi seperti ini.
di atas kode </head> jika belum memasangnya
<meta content='XXXXXXXXXXXXXXX' property='fb:app_id'/> <meta content='XXXXXXXXXXXXX' property='fb:admins'/> <meta content='XXXXXXXXXXXXXXX' property='fb:profile_id'/>

Langkah Ke dua.

Untuk postingan gunakan script ini di mode HTML.
<amp-facebook-comments width=486 height=657
    layout="responsive"
    data-numposts="5"
    data-href="URL HALAMAN BLOG DI SINI ">
</amp-facebook-comments>

Dan jika ingin membuat komentar facebook dengan efek show hide gunakan script ini.
<amp-accordion>
  <section>  
<h4>
<span class='show-more'>add a comment with your facebook</span>
<span class='show-less'>Hide comment</span>
</h4>
<amp-facebook-comments width=552 height=310
    layout="responsive"
    data-numposts="5"
    data-order-by="social"
    data-href="URL halaman blog di sini">
</amp-facebook-comments>
</section>  
</amp-accordion>


SELESAI.

Dan hasilnya seperti di bawah ini

add a comment with your facebook Hide comment


Untuk setting MODERATION TOOL.
Masuk kesalah satu postingan anda klik MODERATION TOOL
Klik tools&support


Lalu setting app facebook yang sudah di buat di facebook developers.
Lalu atur seperti jika ingin menggukan photo untuk sistem komentar artinya bisa menggukan komentar dengan photo dan ceklisYES MIRROR TO Sesuaikan dengan Pans page anda.


Mirror ini berfungsi ketika ada komentar masuk di blog maka akan muncul pemberitahuan ke page anda begitu juga sebaliknya.

Jika ada pertanyaan silhkan anda berkomentar menggukan sistem komentar facebook yang sudah saya sediakan di atas hehe.

Selamat mencoba dan Terimakasih sudah berkunjung ke blog saya.

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×