Dewa Blogger: Hasil penelusuran untuk memasang.komentar.facebook.responsive.di.blogger

Halaman

    Social Items

Home / Hasil penelusuran untuk memasang.komentar.facebook.responsive.di.blogger
Cara Memasang Komentar Facebook Responsive di Blogger Cara Memasang Komentar Facebook Responsive di Blogger

Cara Memasang Komentar Facebook Responsive di Blogger - Masih membahas seputar komentar, tutorial kedua hari ini akan membuatkan wacana cara memasang komentar facebook yang responsive di blog. Manfaat memasang komentar facebook di blogger ini memungkinkan pengunjung sanggup berkomentar pribadi di artikel yang dia baca dengan memakai akun facebook.

Baca juga : Mengatasi Thumbnail Share Post Facebook

Bagi yang ingin mencobanya, silakan ikuti langkah berikut

Cara Memasang Komentar Facebook Responsive di Blogger


1. Tambahkan meta tag facebook di bawah ini di dalam template sempurna di bawah <head>

<meta content='Kode ID Facebook admin' property='fb:admins'/> <meta content='Kode ID Aplikasi Facebook' property='fb:app_id'/>

Catatan : Jika sudah menerapkan langkah di atas, silakan lewati lanjut ke langkah berikutnya

2. Tambahkan instruksi di bawah ini sebelum </head>

<script>(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/id_ID/sdk.js#xfbml=1&amp;version=v2.9&amp;appId=562901580420523&quot;;                fjs.parentNode.insertBefore(js, fjs);                }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));             </script>

3. Selanjutnya tambahkan instruksi di bawah ini sempurna di bawah instruksi <data:post.body/> yang ada di halaman post

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div> </b:if>

4. Simpan template.

Untuk menampilkan comment count facebook di halaman index dan post, silakan tambahkan instruksi di bawah ini pada markup post meta atau post isu sesuai dengan template yang dipakai :

<a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> facebook comments</a>

Demikian tutorial wacana Cara Memasang Komentar Facebook Responsive di Blogger, biar bermanfaat.

Cara Memasang Komentar Facebook Responsive Di Blogger

Memasang Komentar Facebook dan Blogger Responsive - Komentar Facebook dan Blogger Berdampingan merupakan dua hal yang sangat berafiliasi alasannya ialah menyerupai kita ketahui bahwa pada komentar blogger biasanya Admin hanya menyodorkan kolom komentar bawaan blogger dan sebagian pengunjung mungkin tidak mempunyai akun gmail melainkan facebook.

Memasang Komentar Facebook dan Blogger Responsive Memasang Komentar Facebook dan Blogger Responsive

Kaprikornus yang perlu kita lakukan disini meletakkan juga kolom komentar facebook berdampingan dengan komentar blogger semoga pengunjung yang tidak mempunyai gmail sanggup berkomentar memakai akun facebook mereka. Kode responsive komentar facebook digabungkan dengan tutorial dari blog pada artikel Cara Memasang Komentar Facebook Responsive di Blogger

Cara Memasang Komentar Facebook dan Blogger Responsive Berdampingan


1. Login ke blog > Buka Template > Salin instruksi di bawah ini sebelum ]]></b:skin> atau </style>

/* Komentar Facebook dan Blogger */ .komentargabungan-page,.komentargabungan-tab{display:inline-block;background:#fafafa;color:#fff;float:left;margin:0 10px 0 0;cursor:pointer;font-weight:bold;position:relative;font-size:110%;z-index:10} .komentargabungan-page{background:rgba(255,255,255,1);width:100%;max-width:100%;margin:0 0 20px} #blogger-comments-page h4{display:none} #blogger-comments-page p{color:#444;} #blogger-comments-page {padding:0px 5px;display:none;} .komentargabungan-tab{background:#3b5998;padding:12px;transition:all .3s;} .komentargabungan-tab:nth-child(2) {background:#fda753;transition:all .3s;} .komentargabungan-tab:hover:nth-child(2) {background:#e1954a;} .komentargabungan-tab-icon {height:14px;width:auto;margin:0 3px} .komentargabungan-tab:hover{background-color:#324c82;} .inactive-select-tab {background:#aaa} .inactive-select-tab,.komentargabungan-tab:hover {background-color:#324c82;}

2. Kemudian salin instruksi di bawah ini sebelum </body>

<script type="text/javascript"> //<![CDATA[ $(window).bind("load resize",function(){var o=location.protocol+"//"+location.host+location.pathname,t=$("#container-commentfb").width();$("#container-commentfb").html('<div class="fb-comments" data-href="'+o+'" width="'+t+'" data-num-posts="10"></div>'),FB.XFBML.parse()}); //]]> </script>

3. Biasanya di dalam template terdapat dua instruksi <div class='comments' id='comments'>, salin instruksi di bawah ini sempurna di bawah kedua instruksi <div class='comments' id='comments'>

<div class='komentargabungan-tab' id='fb-comments' onclick='javascript: commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'> <fb:comments-count expr:href='data:post.url'/> Komentar Facebook</div> <div class='komentargabungan-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'> <data:post.numComments/> Komentar Blogger</div> <div class='clear'/> </div> <div class='komentargabungan-page' id='fb-comments-page'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div> </b:if></div> <div class='comments komentargabungan-page' id='blogger-comments-page'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script type='text/javascript'> function commentToggle(selectTab) {$(&quot;.komentargabungan-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.komentargabungan-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();} </script>

4. Simpan template dan lihat akhirnya di blog.

Sekian tutorial Cara Memasang Komentar Facebook dan Blogger Responsive di Blog, semoga dengan tutorial di atas berhasil diterapkan pada blog. Terima kasih.

Memasang Komentar Facebook Dan Blogger Responsive

Langganan: Postingan (Atom)