Cara Memasang Komentar Facebook di Blog Versi Terbaru

Seringkali blogger, di blog mereka biasanya hanya menyediakan komentar Google+, Disqus, bawaan blogspot, dan bawaan wordpress.


Rata-rata orang yang ingin melakukan sesuatu mereka biasanya memakai cara yang instant, tujuannya agar lebih cepat, hemat waktu dan tidak repot untuk mendaftar kesana kemari.


Biasanya orang yang memakai cara instant, mereka tidak ingin mengutarakan pikirannya di dalam blog yang sedang dikunjungi.


Sebagai admin blog (termasuk saya), kejadian seperti itu harus patut kita perhatikan karena jika tidak diperhatikan otomatis pengunjung dari pengguna Facebook tidak ingin berkomentar di blog kita, dan bisa-bisa pengunjung blog kita turun drastis dibandingkan dengan sebelumnya.

Cara memasang komentar facebook di blog versi terbaru

Untuk mengantisipasi kejadian tersebut kita harus menyediakan kolom komentar bagi pengguna Facebook.

Namun bagaimana cara membuat komentar Facebook di Blog?

Baru-baru ini facebook sedang mengadakan renovasi design widget untuk dipasang oleh para webmaster.


Jadi ada beberapa tampilan dan script yang berbeda dari sebelumnya, cara ini baru saya pakai dan alhasilnya memang lebih enak dipandang, tidak berat daripada sebelumnya dan juga kita bisa menghapus dan membaned pengguna facebook jika ada yang menggunakan kata-kata kasar.


Membuat komentar Facebook di blog sangatlah mudah. Hanya tinggal mengedit beberapa bagian dari script yang disajikan di bawah, maka komentar Facebook akan terpasang di blog.


Komentar Facebook ini responsive yang bisa dilihat juga melalui hp jadi bagi pengguna HP dapat juga berkomentar di blog.

Sebelumnya apa yang membedakan versi terbaru dengan versi sebelumnya?


  • Kamu bisa menghapus komentar yang tidak seharusnya ditampilkan
  • Kamu bisa mereview komentar. Maksudnya, kamu bisa memoderasi komentar "apakah ingin ditampilkan atau tidak".
  • Tampilannya lebih dinamis dan stylish.
  • Tidak lemot daripada sebelumnya
  • Jika pengunjung menggunakan HP komentar ini akan menyesuaikan ukuran pada layar HP pengunjung. (Responsive).
  • Kata-kata yang terdapat dalam komentar facebook masuk ke search engine


Berikut ini tampilan review yang akan saya tampilkan atau saya hapus.

Cara memasang komentar facebook di blog versi terbaru


Berikut ini cara memasang komentar facebook di blog versi terbaru


  1. Masuk ke facebook
  2. Buatlah app facebook (Wajib) terlebih dahulu dengan mengikuti tutorial: Cara membuat aplikasi Facebook terbaru
  3. Masuk ke app facebook yang sudah dibuat tadi
  4. Copy app ID mue ke dalam notepad (Id ini nantinya akan kita gunakan)


  5. Aplikasi Facebook - Cara memasang komentar facebook di blog versi terbaru


  6. Masuk ke template -> edit HTML
  7. Masukan meta tag ini, meta tag ini saya dapatkan dari blog arlinadesign


  8. <!-- [ Social Media meta tag ] -->
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:if cond='data:blog.url'>
    <meta expr:content='data:blog.url' property='og:url'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.pageName'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    </b:if></b:if></b:if></b:if>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <b:else/>
    <meta content='website' property='og:type'/>
    </b:if>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
    </b:if></b:if>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta content='Deskripsi blog kamu' property='og:description'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='ID app kamu' property='fb:app_id'/>
    <meta content='ID facebook kamu' property='fb:admins'/>
    <meta content='en_US' property='og:locale'/>
    <meta content='en_GB' property='og:locale:alternate'/>
    <meta content='id_ID' property='og:locale:alternate'/>
    Catatan
    Editlah bagian yang saya tebalkan di atas


  9. Setelah itu carilah kode </body>, lalu masukan kode ini diatasnya

  10. <div id='fb-root'/>
    <script>
    window.fbAsyncInit = function() {
    FB.init({
    appId : &#39;ID app Kamu&#39;,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
    };
    (function() {
    var e = document.createElement(&#39;script&#39;);
    e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
    document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
    </script>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : &#39;ID app kamu&#39;,
          xfbml      : true,
          version    : &#39;v2.9&#39;
        });
      };
      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = &quot;//connect.facebook.net/en_US/sdk.js&quot;;
         fjs.parentNode.insertBefore(js, fjs);
       }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    </script>
    Catatan
    Ubah bagian yang saya tebalkan di atas


  11. Lalu cari kode </head> dan masukan kode javascript komentar V2.9 ini diatasnya

  12. &lt;script&gt;(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.9&amp;appId=ID app kamu&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;

  13. Setelah semua script terpasang saatnya kita membuat komentar facebook di blog, caranya carilah kode <data:post.body/> (Biasanya lebih dari satu, pilih saja yang terakhir, jika masih tidak bisa cobalah satu per satu).

  14. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <div class='fb-comments' data-colorscheme='light' data-mobile='auto-detected' data-numposts='5' data-order-by='reverse_time' data-width='100%' expr:href='data:post.url'/>
    </b:if>
    Catatan

    • Light : kamu bisa mengganti warna background komentar facebook mu menjadi cerah/gelap jika ingin menggantinya menjadi gelap gantilah kata ini menjadi "Dark"
    • Auto-detected : Kode ini berfungsi untuk menyesuaikan layar HP pengunjung.
    • 5 : Nomer ini berfungsi untuk membatasi komentar, jika sudah melebih 5 komentar maka secara otomatis akan di hidden dan diberi seperti "Read More".
    • reverse_time : Kode ini berfungsi untuk mengurutkan komentar, misalkan memilih "reverse_time" maka komentar yang paling atas adalah komentar yang terbaru, kamu bisa memilih juga "time" dan "social". time, komentar yang paling lama akan berada di atas. social, komentar paling bermanfaat, banyak yang like, dan banyak yang di reply maka komentar itu akan ditempatkan paling atas.
    • 100% : Sebenarnya kode ini untuk mengatur lebar komentar namun karena blog ini memakai template responsive jadi saya atur menjadi 100% agar komentar facebooknya menjadi responsive seperti template blog ini.
    • data:post.url : Kalau yang satu ini kamu tidak diwajibkan untuk mengedit, karena fungsi yang satu ini adalah menyesuaikan judul komentar facebook dengan artikel blog, jadi saat kamu berkomentar di facebook dan komentar itu kamu bagikan ke teman-teman kamu maka ketika di share judulnya akan sesuai dengan judul artikel blog.



  15. Simpan dan lihat hasilnya.


Mudah bukan?

Meta tag di atas bukan meta tag untuk search engine yang biasa dikenal oleh para webmaster, meta tag tersebut untuk mengidentifikasikan blog kita kedalam sosial media Facebook jadi untuk mempermudah mengidentifikasikan blog kita gunakan meta tag di atas.


Share this with short URL: Get Short URL
loading short url