Cara Membuat FB Coment berdampingan dengan Blogger Coment

Setelah membahas tentang Cara Membuat Facebook Comment di Blogspot sekarang kita akan membahas Cara Membuat FB Coment berdampingan dengan Blogger Coment dalam bentuk Tab. Selain untuk mempercantik tampilan komentar di blogspot ini juga dimaksudkan untuk memudahkan pengunjung untuk memberikan komentar dalam platform blogger atau facebook. Biar gak bingung silahkan masukkan perhatikan gambar berikut ini

Bagaimana apa masih bingung?
Kalau sudah gak bingung mari kita lanjut ke Cara Membuat FB Coment berdampingan dengan Blogger Coment dalam sebuah tab.

1. Masuk ke akun blogger anda
2. Masuk ke template (Jangan Lupa demi keamanan silahkan back up template anda terlebih dahulu) ->> edit HTML ->> Lanjutkan ->> centang expand widget template
3. Cari kode ]]></b:skin> kemudian copy kode berikut ini diatas kode ]]></b:skin> ( agan bisa memanfaatkan Ctrl + F untuk mempermudah pencarian)

  .comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

4. Cari kode </head> kemudian copy kode dibawah ini tepat di atas kode </head> :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB agan' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

ganti  ID FB agan dengan id fb milik agan misalkan http://www.facebook.com/id-kamu atau http://www.facebook.com/12345678 .

4. Kemudian cari kode ini <div class='comments' id='comments'>

  (biasanya ada 2 kode <div class='comments' id='comments'>, dan anda harus copy kan pada kode yang kedua letaknya pada bagian bawah).

  <div class='comments' id='comments'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'> <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/> <fb:comments-count expr:href='data:post.url'/> Comments </div> <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'> <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/> </div> <div class='comments-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <fb:comments data-colorscheme='clear' expr:href='data:post.url' num_posts='2' width='555'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'> 

5. Simpan dan coba lihat hasilnya ...

Semoga artikel Cara Membuat FB Coment berdampingan dengan Blogger Coment ini bermanfaat

More about → Cara Membuat FB Coment berdampingan dengan Blogger Coment

Cara Membuat Facebook Comment di Blogspot

Setelah kemarin saya menulis artikel tentang Membuat Facebook Like Box di Blog Sekarang saya akan membahas Cara Membuat Facebook Comment di Blogspot. Tidak dipungkiri jika facebook merupakan sebuah jejaring sosial  yang sangat popular.

Dan di Indonesia sendiri merupakan salah satu negara yang mempunyai pengguna facebook yang lumayan besar. Oleh karena itu kita bisa memanfaatkan kesempatan ini untuk menjadikannya menjadi salah satu alat untuk bisa berkomentar di blogspot kita. Karena selain berfungsi sebagai komentar bisa juga nantinya komentar yang ditulis di blog kita akan langsung muncul di wall orang yang memberi komentar di blog kita (apabila si orang yang komentar mencentang tulisan post to facebook). Dan yang muncul di wall mereka adalah berupa komentar dan link ke blog kita.
Oke

Oke langsung saja kita bahas langkah langkah Cara Membuat Facebook Comment di Blogspot:

1. Demi keamanana back up template anda terlebih dahulu.

1. Login ke akun facebook anda

2. Masuk ke link ini: developers.facebook.com/setup

3. Isi App Name dengan nama aplikasi anda, Kemudian kosongkan saja App Namespacenya, dan  centang Web Hosting lalu klik lanjutkan.

 

 4. Kemudian catat id aplikasi anda

5. Buka https://developers.facebook.com/apps/nomor-app-id-anda/ kemudian klik edit app

6. Masukkan URL situs anda di site URL

 7. Masuk/login ke akun blogspot anda ->Pilih Template -> Klik Edit HTML -> Lanjutkan

 

8. Cari kode di bawah ini dengan Ctrl + f (Biasanya letaknya berada di atas sendiri) 

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Tambahkan kode di bawah ini

xmlns:fb='http://www.facebook.com/2008/fbml'

Sehingga menjadi

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>

9. Cari kode </head> dan letakkan kode berikut  ini diatasnya

 <b:if cond='data:blog.pageType == &quot;item&quot;'> 

    <meta expr:content='data:blog.pageTitle' property='og:title'/> 

    <meta expr:content='data:blog.url' property='og:url'/> 

    <b:else/> 

    <meta expr:content='data:blog.title' property='og:title'/> 

    <meta expr:content='data:blog.homepageUrl' property='og:url'/> 

    </b:if> 

    <meta content='JUDUL BLOG ANDA' property='og:site_name'/>  

    <meta content='App ID' property='fb:app_id'/> 

    <meta content='ID FB' property='fb:admins'/> 

    <meta content='article' property='og:type'/>

• Ganti JUDUL BLOG ANDA sesuai judul blog/situs anda.
• Ganti tulisan APP ID ANDA dengan nomor aplikasi id .
• Ganti ID FB dg ganti dengan ID FB profil milik anda. Contoh : https://www.facebook.com/profil/100000149724303

10. Ulangi langkah nomor 9 Cari kode </head> tadi dan letakkan kode berikut ini tepat dibawah kode </head>

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'App ID',
      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>

Ganti tulisan APP ID dengan ID IPP milik anda

11. Cari kode di bawah ini

title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>

 Tambahkan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/> 
    </b:if>

 Sehingga menjadi

title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/> 
    </b:if>

12. Save templates anda

Demikian tadi Cara Membuat Facebook Comment di Blogspot semoga bermanfaat untuk anda :)

More about → Cara Membuat Facebook Comment di Blogspot

Membuat Facebook Like Box di Blog

Salah satu cara untuk menghubungkan blog dengan media jejaring sosial adalah menggunakan like box. Saya akan menjelaskan sedikit tentang cara kerja Facebook Like Box ini sendiri, yaitu saat seseorang me-like  fanpage anda melalui like box di blog anda maka orang tersebut telah berlangganan pada apa yang anda update di fanpage anda. Terlebih jika anda memfasilitasinya dengan menghubungkan blog anda dengan RSS grafiti. Mak seseorang yang me like facebook anda akan berlangganan artikel blog anda melalui facebooknya.

Sekarang kita kembali ke TKP eh maksudnya kembali ke pokok permasalahan yaitu membahas tentang bagaimana cara untuk membuat facebook like box di blog

1. Buka Facebook.com kemudian login ke akun facebook anda.

2. Selanjutnya silahkan klik Social Plugins kemudian piih like box

3. Anda akan mendapati tampilan seperti dibawah ini :

4. Keterangan Gambar:

• Facebook Page URL : diisi dengan URL facebook fans page milik Anda. Jika tidak tahu anda bisa masuk ke ke fan page anda kemudian copy di bagian adreesnya. (Ini contoh URL facebook fanpages https://www.facebook.com/pages/Fanpages/494518897654321)
• Width : isi dengan hitungan pixel untuk menentukan lebar fans like box
• Height : isi dengan hitungan pixel untuk menentukan tinggi Fans like box nantinya. Atau anda bisa mengosongkan bagian ini, karena tinggi akan menyesuaikan
• Color scheme : Ada dua pilihan warna di sini. Light untuk warna terang (putih) dan dark untuk warna gelap (hitam)
• Show Faces : Berfungsi untuk menampilkan foto profil orang-orang yang menyukai fans page Anda atau memilih untuk tidak menampilkannya.
• Stream : Berfungsi untuk menampilkan update terbaru dari facebook fans page milik Anda.
• Header : Berfungsi untuk menampilkan “find us on facebook”
• Jika anda sudah merasa puas melakukan konfigurasi. Sekaran anda Klik “Get Code” untuk menampilkan code facebook fans like box tersebut. Setelah itu anda akan mendapati tampilan seperti dibawah ini :

Kemudian klik IFRAME, setelah itu anda copy kode tersebut dan memasukkan ke  blog Anda

• Masuk ke Blogger
• Pilih Desain/Rancangan
• Pilih Tambah Gadget
• Pilih HTML/Java Script
• Paste Kode Facebook Like Box tadi
• Dan save

Taraaa....
Semoga bermanfaat ya :)

More about → Membuat Facebook Like Box di Blog